A black electric vehicle with a sleek design and the logo VAYDR on the front, set against a dark background with technical drawings, specifications, and orange paint splashes, featuring the word 'VAYDR' and the phrase 'CASE STUDY'.

Role:

Brand, UX, UI, design system, content

Type:

Self-directed product + brand

Status:

Hi-fi built · testing next

Figma - full design system, 5 stages, desktop and mobile, prototyping & campaign and product assets

A sleek, dark-colored sports car parked indoors in front of a modern concrete wall with a textured pattern. The ceiling is a geometric grid allowing natural light to illuminate the space. The website overlay suggests it is related to electric vehicles, with options to customize the model, view specifications, and start a demo drive.
A sleek black electric sedan car with futuristic design features, including smooth curves and narrow headlights, is displayed on a computer screen showing a vehicle customization webpage. The webpage offers options for configuring and pricing the car, including payment method, down payment, and financing terms.
Screenshot of a car customization website showing a black luxury sedan named VVADR One in Phantom Black color with a sleek design, digital interface with options for exterior, interior, wheels, performance, tech, and a price of £70,900.
A website page for Vaydr, a service where users can book a test drive of various car models. The page includes options to choose a car model, select a location, and enter personal details for scheduling a test drive.

Design-conscious buyers going electric

01.

THE CUSTOMER

Buyers in the consideration phase. They are comparing models, want to understand what separates one variant from another without dealer pressure, and want a low-commitment way to actually get behind the wheel.

They find legacy automotive sites either overwhelming (configurators that demand decisions too early) or thin on the design and brand cues that matter to them. Vaydr is positioned as the design-first challenger for that buyer: clarity over clutter, confidence over hard sell.

Empty website template with gray background, white header, and black placeholder text. Placeholder text includes Latin filler at the top, and a paragraph at the bottom. A small button labeled 'Design Yours' is in the lower-left corner.

The decision and the action were tangled

02.

THE INSIGHT

Low-fidelity usability testing surfaced the core problem: people could not confidently tell the three variants apart, and that uncertainty stalled them before they would book a demo drive.

The decision ("which Vaydr is for me?") and the action ("book a drive") were knotted together, so users hesitated on both.

A man with a backpack and a hat looking at his phone leaning against a sleek black electric sports car parked on a reflective wet city street at sunset. Lit buildings and purple decorative lights are in the background.

Decouple the booking from the configurator

03.

THE A-HA MOMENT

The fix was to separate the two. Let people book a demo drive early as a low-commitment entry point, and turn variant selection into a guided, side-by-side comparison rather than a configurator gate.

The second realisation was bigger: Vaydr was never a set of pages, it was a system. One set of tokens and components could carry brand, marketing site, booking flow, and merch with full consistency. That reframing set the direction for everything after.

Screenshot of a website page for scheduling a test drive, with options to select a Vaydr model and location, and fields to enter postal code, email, date, and time.
Website homepage for Vaydr, an automotive experience service. The page features options to book a test drive with different car models like Vaydr One, Vaydr GT, and Vaydr Sport. There is a form to choose a model, select a location, and input personal details for a demo drive appointment.

Coherence at scale, solo, without a user base

04.

THE CHALLENGE

Holding quality and consistency across a system that grew to five stages, desktop and mobile, brand through to merch, as a solo designer. Scope kept expanding, and every new surface risked drifting from the last.

The second challenge was validating decisions without a real user base, which I addressed by running structured usability testing on the prototypes rather than designing on instinct.

A detailed infographic illustrating a spacing scale for web design, showing various spacing sizes from small to large, labeled with pixel values, descriptive names, and use cases such as icon spacing, badge padding, list row padding, screen margins, hero padding, and section breaks.
Screenshot of an online shopping website featuring car models, clothing options, and color swatches with various labels and prices.
A digital design interface showing various color palette options, button styles, and layout settings on a peach-colored background.

A coherent, testable whole

05.

RESOLUTION & OUTPUT

Design System

Complete Figma system, five stages, desktop and mobile, foundations through to assembled screens.

Booking flow

A validated demo drive flow, reshaped directly from low-fi findings.

Variant pages

One, GT, and Sport, built around legible, side-by-side comparison.

Marketing & Merch

Marketing site and merch shop carried on the same system.

Imagery

AI-generated product imagery with Photoshop touch ups.

A sleek, silver electric sports car parked outside a modern building with large arched windows illuminated from within, reflecting on wet pavement in an urban cityscape at night with skyscrapers.
Online store page displaying black and grey apparel including T-shirts, a cap, and a travel flask, all with an orange "V" logo.
Online shopping checkout page for Vaydr website showing order summary, shipping details, and payment details forms.

Next steps / what I'd validate

IN PROGRESS

The high-fidelity designs are built and the next iteration is a planned round of usability testing. I’m naming this deliberately. Testing as an ongoing discipline rather than a box ticked once.

Technical blueprint and design schematics of a sleek, modern car with detailed vehicle specifications and chassis notes on a dark background.

Does decoupling booking from configuration reduce drop-off?

The central hypothesis from low-fi, now testable on the hi-fi flow.

Is variant differentiation legible?

Whether side-by-side comparison resolves the original confusion between One, GT, and Sport.

Does mobile booking hold up?

Whether the flow completes on the smaller breakpoint, where commitment friction tends to spike.

How I'll measure it: task completion rate and time-to-book, points of hesitation or error in the booking flow, and a SUS score benchmarked against the low-fi baseline. Findings will feed a final revision of the system.

Other Case Studies

A digital dashboard displaying IT assets such as access points, printers, routers, tablets, workstations, and hard disks with status counts for in use, in store, in repair, and total. The dashboard is part of asset management software with the header 'IT Assets' and sections for non-IT assets.
Part of a computer screen showing a business partner creation form on a website, with tabs labeled General Info, Addresses, NAICS Code, Attachments, Hierarchy, and fields for partner details.
A man is sitting on a bench with two yellow sculptures of seated figures on either side. The man is wearing sunglasses, a white shirt, shorts, and sneakers, with one leg crossed over the other. The sculptures seem to be made of a shiny material, possibly painted metal or plastic. The background features a clear blue sky and large tropical trees.
Illustration of various skills and tools, including a presentation, team discussion, wrench and pencil, web design, brain with lightbulb, chat bubbles, and mobile app icons, with the text 'Skills & Tools'