case study — UX & UI design
E-bike website redesign
A mobile-first redesign for a premium bike retailer — simplifying comparison and guest checkout to turn browsers into buyers.
the challenge
- No small-screen experience
- Hard to compare bikes side by side
- Checkout friction; account required
goals
- Support mobile discovery to checkout
- Make comparison effortless
- Add guest checkout to cut drop-off
my focus
- Research & synthesis
- Flows, wireframes, prototypes
- UI system & usability testing
discovery
Research insights
what I learned
- 1Users open many product pages but can't tell differences quickly
- 2Account creation before checkout causes abandonment
- 3They want specs up front: size, terrain, components, price
design principles
- 1Comparison first: align specs, enable quick contrast
- 2Frictionless purchase: guest checkout, minimal fields
- 3Small-screen clarity: concise cards, tap-friendly actions
approach
Solution highlights
Compare in one glance
Side-by-side spec summaries and saved comparisons to reduce back-and-forth browsing.
Guest checkout
Checkout without account creation; clear progress, minimal form fields, auto-fill friendly.
Mobile-first UI
Compact cards, large tap targets, and scannable detail blocks tailored for phones.
process
User flow
Mapped the core path from discovery to checkout to remove dead ends and reduce taps.
exploration
Wireframes
Quick sketches and low-fidelity wires to explore layout options for product cards and comparison.
final design
Hi-fi screens
Iterated high-fidelity designs after usability rounds.
validation
Testing & learnings
- Comparison cards reduced product-hopping; users chose in fewer steps
- Guest checkout removed major drop-off; users preferred progress visibility
- Specs needed bolder labels; improved contrast and spacing in later iterations
40%
Reduction in checkout abandonment
with guest checkout flow
interactive
Prototype
reflection
Key takeaways
01
Mobile constraints force clarity — prioritize essentials and comparison above all else.
02
Guest checkout is a must-have for e-commerce — every forced account step costs conversions.
03
Early testing caught hierarchy issues before development, saving significant rework time.
