An opening you can stop
“Everything starts with a turn.” The video pauses with a button, stops offscreen or with reduced motion, and there is a shortcut. The opening scroll was shortened to reach the product sooner.
Independent concept · Consumer, commerce
VOLTA
A fictional urban bike brand. A video opening gives character; the rest is a clear product page with colour, a height-based size recommendation and a simulated purchase.
The challenge
The problem it tries to solve.
A single-product shop needs two things that pull in opposite directions: a first impression with personality, and a short path to choosing and buying.
The design question: how much motion fits in the opening without delaying the decision, and what does someone need to know to choose a size without trying the bike?
Design decisions
Four decisions, in view.
Each one can be checked in the demo.
Colour changes the whole product
Petrol, Sand and Clay change the image, the labels and the selector state together, so the choice is both seen and read.
Size, from your height
“Which size?” asks for your height and recommends S, M or L. If you are between two sizes, it says so and explains how to decide. The button applies the recommended size on the page.
What people ask before buying
The page adds specs (motor, battery, range, weight) and delivery and returns terms, marked as examples. The cart is kept when you come back.
What you can try
A four-step walkthrough.
To see the decisions at work, in this order.
Pause the opening video and press “Discover VOLTA City”.
Switch between the three finishes.
Open “Which size?” and enter your height.
Add the bike to the cart, reload the page and open the cart.
Behind the interface
Video weight
The opening video was recompressed from 10.4 MB to 2.5 MB without changing the file the page links to, so it loads faster on mobile.
- HTML, CSS and JavaScript, no external dependencies.
- Checked for console errors and horizontal overflow at 1440 and 390 px.
- Brand, imagery and data are fictional. No figure comes from real users.
With more time
What I would check with people.
These are hypotheses for a test I have not run yet, not results.
- How long do people take to reach “Choose my City” with and without the opening?
- Do they trust the recommended size, or hesitate between two?
Shall we talk about the role?
I can walk you through how I reached each decision in this concept.