Chris Seymour.

Home

About

Projects

Home

About

Projects

Home

About

Projects

Back

Back

Back

Optimising the Bike Club checkout experience

UX Design
User Research
UI Design
Responsive Design

BikeClub is a subscription-based kids' bike service with 60,000 members, helping families buy and exchange bikes as children grow. I led the UX and UI design for the website, boosting engagement and supporting over 100,000 monthly sessions. This case study focuses on optimising the checkout process—a previously disjointed experience that led to higher drop-off rates, abandoned carts, and reduced conversions.

Woman in a relaxed environment with the BikeClub checkout page open on her laptop and phone in front of her.

Analysing competitors and understanding user needs

Using the research methods below, I obtained insights into how competitors approach similar design problems, including identifying the needs and pain points of users. Evidence of this research is available on request.


  • Competitor analysis: Researched direct and indirect competitors with 7 key areas to compare and contrast.

  • Analytics: Identified key metrics to set a benchmark for success.

  • User behaviour analytics: Observed session recordings and heat maps to uncover pain points.

  • Website survey: Collected feedback to uncover common patterns.

  • Usability testing: Conducted moderated usability testing with existing members to gain a deeper insight into the current checkout experience.

Using the research methods below, I obtained insights into how competitors approach similar design problems, including identifying the needs and pain points of users. Evidence of this research is available on request.


  • Competitor analysis: Researched direct and indirect competitors with 7 key areas to compare and contrast.

  • Analytics: Identified key metrics to set a benchmark for success.

  • User behaviour analytics: Observed session recordings and heat maps to uncover pain points.

  • Website survey: Collected feedback to uncover common patterns.

  • Usability testing: Conducted moderated usability testing with existing members to gain a deeper insight into the current checkout experience.

Using the research methods below, I obtained insights into how competitors approach similar design problems, including identifying the needs and pain points of users. Evidence of this research is available on request.


  • Competitor analysis: Researched direct and indirect competitors with 7 key areas to compare and contrast.

  • Analytics: Identified key metrics to set a benchmark for success.

  • User behaviour analytics: Observed session recordings and heat maps to uncover pain points.

  • Website survey: Collected feedback to uncover common patterns.

  • Usability testing: Conducted moderated usability testing with existing members to gain a deeper insight into the current checkout experience.

A comparison image shows two lists of competitors categorized under "Direct" and "Indirect." Direct competitors include Halfords, Decathlon, Argos, Evans Cycles, Amazon, and eBay. Indirect competitors include Buzzbike, Blike, Swapfiets, Cinch, Bundlee, and KiwiCo.

Key Findings

  • Complexity: Members found the user journey lengthy and disjointed due to the integration of 3rd party tools.

  • Account creation: Members found they were being asked to log in multiple times confusing the checkout process.

  • Transparency: There was a lack of confidence in the cart due to the cost summary not updating dynamically and not clearing once an order had been placed.

Key Findings

  • Complexity: Members found the user journey lengthy and disjointed due to the integration of 3rd party tools.

  • Account creation: Members found they were being asked to log in multiple times confusing the checkout process.

  • Transparency: There was a lack of confidence in the cart due to the cost summary not updating dynamically and not clearing once an order had been placed.

Key Findings

  • Complexity: Members found the user journey lengthy and disjointed due to the integration of 3rd party tools.

  • Account creation: Members found they were being asked to log in multiple times confusing the checkout process.

  • Transparency: There was a lack of confidence in the cart due to the cost summary not updating dynamically and not clearing once an order had been placed.

A photo of sticky notes stuck to a wall to form an affinity diagram of research findings.

Affinity diagram of research findings grouped into categories

Affinity diagram of research findings grouped into categories

The design process for an improved checkout

User Stories

Using the key findings collected during research, user stories were created. Each story included an acceptance criteria to ensure the needs of each user were met.

  • A user story card of a new member for Bike Club. It depicts a character's avatar at the top followed by a user story and acceptance criteria.
  • A user story card followed by an acceptance criteria for an existing member. It requests adding an additional bike to a subscription for multiple family members.
  • A user story card followed by an acceptance criteria for a member placing an exchange.
  • A user story card of a new member for Bike Club. It depicts a character's avatar at the top followed by a user story and acceptance criteria.
  • A user story card followed by an acceptance criteria for an existing member. It requests adding an additional bike to a subscription for multiple family members.
  • A user story card followed by an acceptance criteria for a member placing an exchange.
  • A user story card of a new member for Bike Club. It depicts a character's avatar at the top followed by a user story and acceptance criteria.
  • A user story card followed by an acceptance criteria for an existing member. It requests adding an additional bike to a subscription for multiple family members.
  • A user story card followed by an acceptance criteria for a member placing an exchange.

User Flow Diagram

I created a user flow diagram to gain a broader picture of the steps required. It was important to integrate the user flow for members looking to place an exchange to ensure a seamless user journey from one to the other.

A flowchart illustrating the checkout process for purchasing and exchanging a bike with Bike Club.

Wireframes

I created greyscale wireframes using a combination of old and new design components which would later be refined. This was to ensure the focus was on the structure of the design rather than it's aesthetics.

Five wireframes in grayscale showing stages of the checkout process.
Five wireframes in grayscale showing stages of the checkout process.
Five wireframes in grayscale showing stages of the checkout process.

The key features of the final design

A laptop screen displaying an order review page for an online purchase.

Order Review

The order review step lets customers confirm all details of their purchase before completing the transaction, ensuring everything is correct.

Order Review

The order review step lets customers confirm all details of their purchase before completing the transaction, ensuring everything is correct.

Two versions of a sign-up form on a website for creating an account or logging in. The forms include fields for personal information such as name, email, phone number, address, and password. One version is in a vertical format, and the other is horizontal.

Account

The account step allows customers to log in or create an account, this was a mandatory requirement due to it being a subscription service.

Account

The account step allows customers to log in or create an account, this was a mandatory requirement due to it being a subscription service.

A smartphone and a laptop display the delivery stage of a checkout process with the options to pick an address and delivery date.

Delivery

The delivery step lets customers select and edit their delivery address whilst also providing an option to choose their preferred delivery date.

Delivery

The delivery step lets customers select and edit their delivery address whilst also providing an option to choose their preferred delivery date.

Two mobile phone screens showing the steps for a credit check and payment process.

Payment

New members must enter their Date of Birth for credit checks, set up a direct debit, and pay a one-time fee at checkout, all through a multi-step checklist for a seamless signposted experience.

Payment

New members must enter their Date of Birth for credit checks, set up a direct debit, and pay a one-time fee at checkout, all through a multi-step checklist for a seamless signposted experience.

A laptop and a smartphone display the order confirmation with order details.

Confirmation

The confirmation step provides customers with a final summary of their order and payment, confirming that the purchase has been completed. We also invite them to share their website experience by completing a short survey.

A successful launch which helped busy parents get their children pedalling quicker

In collaboration with the in-house development team. The redesign of the Bike Club website checkout process significantly improved the user experience by addressing key pain points. The improved design contributed to higher conversion rates, reduced cart abandonment and task completion time. Visit BikeClub.com for a closer look.

More product design projects

Close-up of a person's hand holding a digital scanner displaying a WMS app interface, with a warehouse setting visible in the background.

Warehouse Management App

UX Design
Close-up of a person's hand holding a digital scanner displaying a WMS app interface, with a warehouse setting visible in the background.

Warehouse Management App

UX Design
Close-up of a person's hand holding a digital scanner displaying a WMS app interface, with a warehouse setting visible in the background.

Warehouse Management App

UX Design
Desktop, tablet and mobile devices displaying the home page of a medical device website.

Website Navigation

UX/UI Design
Desktop, tablet and mobile devices displaying the home page of a medical device website.

Website Navigation

UX/UI Design
Desktop, tablet and mobile devices displaying the home page of a medical device website.

Website Navigation

UX/UI Design
A layout displaying various components from Bike Clubs component library.

Component Library

UI Design
A layout displaying various components from Bike Clubs component library.

Component Library

UI Design
A layout displaying various components from Bike Clubs component library.

Component Library

UI Design

Copyright © 2024 Chris Seymour