Background

Competitive cyclists have specific needs and preferences, making it difficult to find a truly perfect off-the-shelf bike. We imagined a tool that would allow cyclists to customize and buy bikes to match their exact requirements, creating a truly personal riding experience.

Overview

Bike Build is a user-friendly custom bike ordering app that simplifies the process of finding the perfect bike. My role included thorough product research, conducting rigorous testing, and developing a comprehensive design system. The result is a high-fidelity prototype ready for development.

Competitive Analysis

By analyzing popular bike manufacturer websites, I gained valuable insights into user behavior and identified opportunities to improve the bike buying experience. My competitive analysis revealed key pain points in the customer journey, such as confusing product pages, limited component information, and frustrating user flows.

Empathizing with Users

To gain a deeper understanding of user needs, I conducted in-depth interviews to explore their experiences with bike ordering tools. I focused on specific aspects of the process, asking about their interactions with the tool, their level of satisfaction, and the emotions they felt during the experience.

Creating User Solutions

I tested wireframes to validate design concepts and find solutions that would work well for every level of cyclist.

An interesting finding was the popularity of the 'more info' button. Initially, we believed this feature would primarily appeal to beginners seeking additional information about bike parts. However, we discovered that experienced cyclists also valued the ability to access detailed specifications like rim width. By incorporating the 'more info' button, we were able to effectively cater to the diverse needs of all riders.

Crafting the Interface

Next I transformed the wireframes into a high-fidelity prototype in Figma. By meticulously considering user flow, information architecture, and visual hierarchy, I aimed to provide a seamless and intuitive interface. We opted for a dark mode interface and a minimalist aesthetic to streamline the bike-building process and reduce visual clutter, making it easier for users to focus on the task at hand.

To gather quantitative data on user behavior and satisfaction, we conducted unmoderated usability tests using Hotjar. By tracking key performance indicators such as success rates, user satisfaction scores, and time-to-completion, we were able to identify areas for improvement and validate design decisions. For example, we found that fit was a higher priority that component level and rearranged the build options accordingly.

Results

By deeply understanding rider needs and combining design strategy with meticulous execution, Bike Build offers a revolutionary approach to custom bike ordering. To maintain consistency and efficiency, I also developed a comprehensive design system. This included typography, color palette, iconography, and UI components, all optimized for the Bike Build app.