Velo Vibe

Making purchase decisions easier for cyclists

This is a capstone project for Springboard

Process Overview

INTRODUCTION

CONTEXT

Velo Vibe is an e-commerce bike store that caters towards serious cyclists. Recent data shows users encounter frustration during the purchasing process.

50% of users open an average of 7 product pages, then abandon the site without adding anything to cart. Internal research shows that users are unable to determine which bike they want.

PROBLEM

How might we make choosing a bike to purchase easier and smoother?

SOLUTION

I designed two features to assist users in making easier decisions: a bike finder features that recommends bikes based off user input and a comparison feature.

MY ROLE

I was the sole designer on this project, completing all research, wireframing, and usability testing.

RESEARCH

First, I analyzed 5 direct competitors in order to answer some questions.

Do competitor’s also have this problem?

Yes. Bicycles have an abnormal amount of specifications that are listed on product pages, making deciding between bikes an arduous process if pages are not designed with this in mind.

Showing everything from the angles of the handlebars to the size of the brake rotors, it is clear that serious cyclists care about every aspect of their gear.

What are common solutions that competitors offer to make decisions easier for users?

Click to enlarge!

Each website I analyzed provided several ways to make decisions simpler.

What are competitors doing well? Where can they improve?

What is done well

Analyzing these competitors gave me a sense of great solutions designed to make purchasing easier. Some mitigate the excess of information by breaking down into collapsible modules, while others use a comparison feature to make decisions easier. These will be useful to keep in my mind as I design my solutions.

What can be improved

The most common usability issue I saw with all the competitors was exceedingly long pages, which means more scrolling and more time for the users to feel overwhelmed.

Additionally, some features that were meant to assist users were hidden and could only be accessed from certain subpages.

Recommendations

Based off this competitive analysis, my recommendation is to design at least two solutions, then test and iterate on these before designing more. This allows the judgment of whether features like these would lead to less site abandonment.

Persona

In order to make sure that I am designing for the right user, I created a persona based off the data and demographics given to me of our target user.

IDEATION

I then decided on two features to design.

Bike Quiz Feature

Comparison Feature

What: Provides user with recommendations based off questions related to personal preferences and requirements.

Why: This takes the mental load off of researching which bikes a user might want to view in the first place.

What: Allows users to select bikes to view and compare specifications side by side.

Why: This lets users to easily compare bikes without having to go through the extra steps of opening several tabs.

In order to determine which pages I would need to design for each feature, I created user flows for each.

LOFI PROTOTYPE

The layout of ecommerce websites is standard and I wanted users to feel that the site is familiar. So, I jumped right into wireframing using this standard layout, sketching certain pages when I got stuck.

LOFI TESTING

To test for any major usability issues, I conducted 5 usability tests.

I led participants through a 15-20 minute usability test, where they were asked to complete 2 tasks each.

ISSUE #1
Participants had trouble locating the bike finder/quiz.

3/5 participants had trouble locating the bike quiz page.
Participants either missed the link due to it being styled similarly to the product categories or did not think that the “bike finder” was useful for completing the task.

Solution: Change the label for the page to something that is clearer. Additionally, either change the style of the bike finder label to differentiate it from the other options in the menu and/or move it to the homepage instead to make it more visible.

ISSUE #2
Participants had difficulty finding the products on the product page.

Since the bikes were not the first thing on the “Mountain Bikes” page, 60% of participants voiced confusion on what the page was for. Some navigated away from the page, despite it being the page they were looking for, since the purpose of the page was not readily apparent.

Solution: Remove the elements that are between the header and products.

HIFI PROTOTYPE

With these testing results in mind, I made these changes as I brought it into high fidelity.

HIFI TESTING

I conducted another round of usability testing to see whether the changes to the design were effective, and if any other usability issues had cropped up with these changes.

Each usability test was 15-20 minutes, where they were asked to complete 2 tasks each.

ISSUE #1
Participants were confused by the layout of the quiz page.

4/5 participants expressed an initial confusion when viewing the quiz results. The separate section for the bike specifications and components looked like a section for separate products, rather than being related to the bikes in each column.

Solution: Have a sticky header/label for each column, or create differentiation between the columns through colors, lines, or spacing.

ISSUE #2
Participants tried to add bikes directly from the compare element.

Users expressed the desire to be able to interact with the comparison element at the bottom of the page to add bikes, rather than having to look through the bikes manually.

Solution: Allow searching for bikes within the search element.

FINAL VERSION

NEXT STEPS & TAKEAWAYS

Next steps

Ideally, I would continue to iterate on the design with more testing. Once these solutions go live, the rate of website and cart abandonment should be monitored to see if these features are useful to users and they are actually making purchase decisions and checking out.

Takeaways

Learn your tool: The prototypes for this project, like my first 2 projects, were created in Figma. To be honest, my first project was a pain to prototype and design, since I did not bother to learn how to prototype efficiently. I jumped right in with just the very basics down. This time, I took my time with the process, learning more efficient ways to use Figma, such as using auto layout and component variants, which resulted in a faster and less messy process.