ElectroBikes

Overview

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.

Solution

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).  

Research

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:‍

• What are the contributing factors to abandoning a site when making purchases online?
• What relative features do users look at to decide which bike to buy?
• What would make users feel comfortable and secure about submitting their personal information such as emails?

Synthesis

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

• Concerned about sizing & fit.
• Frustrated about not having assistant tools to compare different bikes on a website.
• Abandoning sites that are poorly organized or lack information.
• Had no issues with providing emails.

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.

Wireframes

Red route 1 - Comparing bikes

Red route 2 - Purchasing a bike

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.

Takeaways:

• Users were satisfied with the experience overall and thought the “Compare” feature was the most helpful and necessary.
• “Compare” button on the item page was not obvious enough causing users to overlook it.
  Design solution: Put “compare” in a higher hierarchy when creating hi-fi by increasing the size of the button or using a different color.
  
• Users were confused about where to check what items have been added to the compare rack as the “Compare” window title bar in the bottom of the page was missing.
  Design solution: Be sure to add that when creating hi-fi mockups.

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.

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.

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.

Final Design

Compare bikes

Find your size

Guest checkout

Reflection

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.