Case Study: Blue Fire Bikes

AI, simplifying, and optimizing the guest checkout process for a professional-level bike shop

The Problem

Blue Fire Bike (BFB) users are avid cyclists. They are extremely preferential when it comes to quality products. It can be a challenge to purchase an expensive item such as a bike without touching it or test riding it. Blue Fire Bikes’ mobile website had several usability issues.

Data showed that:

50% of users open an average of 7 pages, then exit, without moving anything to the cart
70% of users who did place an item in the cart did not complete the purchase

In general, the company’s mobile-web experience showed low conversion. This work sought to fine tune the app to increase the business bottom line.

The Work

I created an easy-to-use guest checkout system. This “one-screen” solution displays the minimal required input fields at a user’s fingertips. The progressive steps, kept to only 3, makes the process simple and efficient for users. In order to reach this solution, I completed the following:

Competitor analysis on checkout flows
Revised BFB flow to include guest checkout and created user flow on a miro board
Created wireframes screens
Conducted usability testing of wireframes to learn the next steps
- If I were to iterate my next steps would be to increase touchpoint sizes and also clean up the info entry, including “continue to payment, contact” buttons
Created hi-fi screens and prototype
Conducted 2nd round usability testing
- As a next iteration, I changed the breadcrumb layout to be smaller icons versus text, thus more mobile-friendly

The Solution

Cyclists are serious shoppers. I redesigned BFB’s mobile app experience to reduce friction, build trust, and streamline the path to purchase. Product pages were upgraded with 360° product views and virtual ride videos to simulate in-person evaluation. The navigation structure was streamlined to reduce taps and improve discoverability. Checkout was reimagined as a single, fluid experience with express payment options and reassuring messaging. Iconography around security was added, as well as drop-downs for clarity and categorization. User-generated reviews reassured purchasers and customers began to convert.

The Results

Post-launch metrics showed a dramatic improvement in user behavior and business performance. The add-to-cart rate increased by 38%, and cart abandonment decreased by 42%. Mobile conversion rates rose by 24%, and time on site became more purposeful, with users engaging more deeply with product content. The bounce rate on product pages dropped by 30%, and overall mobile revenue grew by 19% within three months. These outcomes demonstrate how human-centered UX improvements can directly impact trust, engagement, and the bottom line.

Iterating with AI

I made several versions using Figma Make and AI tools. The designs look nice but contained mistakes, and as a designer I was able to adjust text and other layers.

I can edit the colors to match my existing design system, or use my alternate Figma libraries for this light theme.

I added motion, video, and more product details using AI. I tested WCAG compliance via Figma Dev tools. Systems are fast! The is great for rapid prototyping but still needs a lot of human oversight.