Overview
Purchasing a bike online can be overwhelming. Between dozens of models, pages of specs, and scattered product details, users can give up before they reach checkout. This project’s goal was to help users quickly find the right bike, feel confident and informed in their choice, and complete their purchase.
Role
UX/UI Designer | Research, Wireframes, UI, Prototype Testing
Research
Through competitive research, I confirmed what users felt: shopping on large e-commerce sites is similar to a maze. Information was there but scattered. Categories existed, but didn’t guide the user’s eye. With such a large inventory, users could easily feel lost. Their key pain points:
- Overwhelmed with too many results
- Difficulty comparing products
- Confused by disorganized product specs
I drew ideas from Amazon, Target and TrekBikes.com:
- Amazon: Extensive categories, but lacked clarity in the browsing experience
- Target: Category cards with graphics that guided users visually
- TrekBikes.com: Clear comparison tool with side-by-side specs and concise formatting
Next, I set out to:
- Use category cards to guide browsing visually
- Create a comparison tool that felt intuitive and quick
- Organize bike details so users could scan specs easily
Design Process
User Flow
I designed a flow that gave users two clear paths:
- Compare bikes side-by-side
- Shop directly if they had a preference
The flow accounted for users entering from different points: browsing categories, searching by keywords, or starting from featured products.
Search Results Screen
Initial Testing:
Users weren’t sure what the “save” icon did or where saved bikes went. The low-contrast icon and lack of a dedicated saved-results page caused hesitation.
Iteration:
- Replaced the small icon with a clear CTA
- Added an upper-right icon that opened saved bikes
- Used card layouts with images, colors, and save buttons for quicker recognition
Impact:
In the next round of tests, use of the save feature nearly doubled. Users immediately understand where to find their saved bikes.
Interior Product Screen
Initial Testing:
Users disliked having to go back to the results just to save a bike.
Iteration:
- Added a save button directly on the bike’s detail page
- Introduced a “Continue Shopping” CTA for faster navigation between products
Impact:
Users moved between bikes faster with less mention of wasted time. Many preferred saving from the detail page rather than the results page.
Comparison Tool
Initial design issues:
- Dropdown menu to select bikes slowed users down
- Bike features displayed as isolated data points, not comparable
Iteration:
- Allowed users to pull bikes from saved items, recent searches, or browsing results
- Designed the layout to match the visual card style from the results for familiarity
Impact:
Users felt more confident and spent less time setting up comparisons. The flow was smoother with clear instructions and a structured UI.
Home Page Hierarchy
Challenge:
Providing too many bikes up front risked overwhelming users before they started browsing.
Iteration:
- Placed categories at the top as a visual guide
- Reduced “New” and “Featured” sections to manageable scroll sizes
- Used cards to limit content exposure and guide first clicks
Impact:
Testing showed quicker first interactions and a clear split between shoppers.
Outcome + Next Steps
By focusing on hierarchy, clear CTAs, and familiar UI patterns, the final design removed friction from the buying journey. Testing showed more users reaching checkout compared to early prototypes, with less confusion around saving and comparing bikes.
I plan to extend the comparison tool to allow saving multiple comparisons for future research. This would support users who want to explore different sets of bikes before committing to a purchase.