Increase conversion rate for a bicycle e-commerce platform

electrobikes mackbook mockup


ElectroBikes, a bicycle e-commerce platform, needs to enhance the conversion from browsing to completion of checkout in order to greatly improve their product’s usability.

The Problem

Data shows that 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. Additionally, 70% of users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page.


UX Designer & Researcher


1 month (March 2021)


compare feature

Compare bikes

This feature allows users to conveniently compare bikes side by side without having to open multiple item pages in order to facilitate the decision making process.

find your size feature

Find your size

According to research, wrong fitting is one of the top concerns when shopping for bikes online. This feature helps users to easily find the bike size best fit them.

guest checkout feature

Guest checkout

Checkout in a fast and easy way without needing to create an account would prevent site abandonment and improve convention.

Design Process

Project Plan

A project plan is an immensely useful tool to stay organized given the time constraints that are presented (90 hours total).  

project plan


I began the project by conducting a competitive analysis with products achieving similar business goals, such as Amazon and Trek Bikes, in order to learn about the scope of existing solutions within this problem space. I then created a screener survey to identify candidates for user interviews. I interviewed 5 serious cyclists who have purchased or tried to purchase a bike online before to understand their behaviors and struggles. 
View research plan

Specifically, the questions I was looking to answer were:


Common patterns in user research were found utilizing an Affinity Map. I found that that users were mainly:

affinity map

With my findings, I created a persona that embodied the archetypes of the user group to visualize the areas of frustrations and goals.


Information Architecture

I then created User Flows of the products' red routes, comparing bikes and purchasing, to give me a clear idea of the screens that were needed on the prototyping stage.


Red route 1 - Comparing bikes

wireflow 1

Red route 2 - Purchasing a bike

wireflow 2

Wireframe Usability Testing

I conducted 5 remote moderated tests by asking the users to complete a list of tasks with little to no help. This session was to test the design of the website and to see if users were able to compare bikes and complete the purchase without setting up an account. The goals of this usability testing include establishing a baseline of user performance and identifying potential design concerns to be addressed in order to improve the efficiency, productivity, and end-user satisfaction.


High-Fidelity Mockups

After a round of testing and critique on the wireframes, I moved onto creating high fidelity mockups. The problems that were found on the first round of testing were addressed at this stage.

Drawing from the gathered data and interview findings, I decided to add a new “Find your size” feature to solve users’ concern regarding sizing and fitting. This feature will be tested in the hi-fi usability testing.

3d mockup

Hi-fi Usability Testing

Using the moderated testing technique again, I tested the hi-fi prototype with 5 users to see if they were able to compare bikes and figure out their sizes for purchase.

All users were able to find their ways in the app to complete all the tasks in both rounds of testing. They indicated an overall satisfied experience as the flows were smooth and most of the UI elements were self-explanatory.

Findings and Iterations

Issue #1: “Calculate” button was confusing after getting the recommended size.

Users were not sure if they had to close the window after getting their recommended bike size. They eventually figured out as there were only 2 options: “calculate” button or close the window. However, this was not a smooth flow.

Solution: I changed the “cancel RSVP” button to “Edit RSVP”, and put all 3 options, including “reschedule”, “Edit interpretation preference” and “cancel RSVP” in it. Once users click on it, this bottom sheet will slide up and then users can decide what they want to do.

iteration 1

Issue #2: Arrows on homepage were hard to see.

Users were not sure if the arrows on the homepage under “Explore” were clickable as they look discreet and blend in with the images.

Solution: Changing arrow style and increasing their size in order to make it less discreet and more clickable.

iteration 2

Final Design

Compare bikes

Find your size

Guest checkout


One of the biggest challenges of this project was not having access to the company’s internal resources and direct populations. I was able to overcome this by interviewing some of their target customers and empathize with their frustrations and goals the best I could. However, I would have taken a different approach, such as incorporating the A/B Testing technique, if I was not designing externally. Through this challenge, I’ve learned to work comfortably with design constraints and be creative and open to alternative approaches.

The “Find your size” feature was not created in the early stage. This was an oversight on my part thinking that providing the geometry of the bikes would be sufficient to solve users' concern on finding the right fit. Through reviewing research data, I found that further design was needed in order to address this issue. From this mistake, I have learned to always refer back to gathered data and personas to check off every box.