Case Study

Bike Mobile E-Commerce Website

A mobile-first redesign for a premium bike retailer to simplify comparison and guest checkout, turning curious browsers into confident buyers.

Role: UX & UI Design Duration: 3 months Tools: FigJam, Figma
Bike mobile website hero

Challenges

  • No small-screen experience.
  • Hard to compare bikes.
  • 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
  • Ul system & usability testing

Research insights

What I learned

  • Users open many product pages but can’t tell differences quickly.
  • Account creation before checkout causes abandonment.
  • They want specs up front: size, terrain, components, price.

Design principles

  • Comparison first: align specs, enable quick contrast.
  • Frictionless purchase: guest checkout, minimal fields.
  • Small-screen clarity: concise cards, tap-friendly actions.

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.

User flow

Mapped the core path from discovery to checkout to remove dead ends and reduce taps.

User flow

Wireframes

Quick sketches and low-fidelity wires to explore layout options for product cards and comparison.

Wireframe 1 Wireframe 2 Wireframe 3 Wireframe 4

Lo-fi refinement

Focused on hierarchy and flows before visual polish.

Low fidelity wireframes

Hi-fi screens

Iterated high-fidelity designs after usability rounds.

High fidelity screen 1 High fidelity screen 2

Testing & learnings

Prototype

Key takeaways