ASTRA EV

The brief

A motorcycle costs more than most people ever spend online. The site's job isn't checkout.

It has to make the product make sense in the first few seconds, build enough confidence to book a test ride, and let people configure their own bike along the way.

The problem

A premium electric motorcycle is an expensive, unfamiliar purchase. People need to understand it quickly, trust it enough to want to ride it, and be able to see it in their own colour, all before they will give a dealer their time.

Riders expect the raw visceral excitement of mechanical engineering, but face unfamiliar questions about real-world range, charging speeds, and battery degradation. When an electric bike sits in the premium bracket, the site cannot simply be a generic brochure; it must build confidence and remove friction before asking for commitment.

How might we

• How might we make the motorcycle make sense in the first few seconds?
• How might we let people make it their own without leaving the story?
• How might we turn interest into a booked test ride?

Goals and how success is judged

• Primary goal: Book a test ride at a local showroom.
• Secondary goal: Configure a bike with personalized colourway and spec preferences.

The two numbers this design should be judged on: how many people who open the configurator go on to book a ride, and whether the four headline numbers keep people reading.

Proposed measures: configurator completion rate, test ride conversions, and time spent exploring battery specifications.

Who it's for

Proto-personas. Based on assumptions about the audience, not on interviews. Replace with research if you have it.

What I looked at

I reviewed current automotive and performance electric motorcycle platforms to see where launch experiences lose buyers:

• Heavy pre-rendered video versus speed. Many luxury EV sites rely on massive cinematic video loops that cause severe layout shift and battery drain on mobile devices. ASTRA prioritizes responsive live CSS stages and immediate interactive swatches.
• Burying the critical specifications. Several manufacturers hide actual charging times and battery capacities deep in technical PDF brochures. ASTRA surfaces range, top speed, 0–100 km/h acceleration, and 25-minute fast charging right beneath the motorcycle image.
• Disconnected configuration. Traditional car configurators take the user to an isolated full-screen tool away from the product narrative. ASTRA embeds the configurator directly as the core product page.

Site structure and journey

Decisions

Four numbers before any story

Range, top speed, acceleration and charging time sit directly under the hero: 450 km, 200 km/h, 3.2 seconds and 25 minutes. A rider decides whether to keep reading from those.

Story first, then the specification

Sections on design, performance, technology and battery carry the argument. The full spec table comes after, for people who want detail rather than persuasion.

Explore in 3D: Rider perspective and mechanical inspection

Before asking riders to configure or commit, an interactive 3D mode lets them inspect the bike from all angles, switching between external motorcycle geometry and an immersive cockpit view from the rider's perspective.

The configurator is the product page

Colour swatches, two variant cards with their key numbers, and a running summary with the starting price. Try it in the demo above. It ends in one clear action, not a menu of options.

One action everywhere

Book a test ride lives in the navigation and closes every section. A test ride is the conversion for a purchase this size.

Colour changes the whole site

Midnight, Silver, Forest and Bronze each re-colour every page, so the choice made in the configurator carries through the rest of the site in the prototype.

The system

The site runs on a local design system built on variables, not on copied styles:

• Four variable collections for colour, spacing, radius and layout, with 49 variables in total.
• The layout collection has Desktop, Tablet and Mobile modes, so one set of variables drives all three breakpoints.
• 24 text styles across Barlow Condensed for display and data, Inter for reading and IBM Plex Mono for technical labels.
• 17 components, including a colour selector, variant selector, 3D control, specification row, location card and global navigation.

Responsive

Every page is designed at 1440, 1024 and 390 pixels wide, not scaled down from one layout: 40 frames in all. Sections stack on narrower screens, and mobile has its own navigation menu.

Results

• Status: Concept project exploring end-to-end digital sales for premium electric mobility.
• 40 frames across desktop, tablet and mobile, including three alternate colourways of the home and configure pages.
• A complete journey in the interactive prototype: explore, configure, book a test ride, confirmation.
• One variable-driven system for three breakpoints, instead of three separate style sets.

Designing ASTRA showed that high-ticket consumer products need immediate emotional pull backed by uncompromised spec clarity. Next, I'd test the variant comparison with real riders and measure how many people who open the configurator go on to book a ride. Those are the two numbers this design should be judged on.