Bike Hero

A bicycle e-commerce website with a focus on the try before you buy mentality, even if that means you don't buy from us.

Project Overview

Conducted primary and secondary research, designed and built a clickable prototype for an e-commerce bicycle website that with a focus on allowing users to know if their bike of interest is available in stores near them so they may try before they buy.

Due to an amount of information and feature options in the purchasing of bicycles, customers can often be confused and overwhelmed by their options. This can lead to purchase indecision or a customer buying more/less than they need from a bicycle. Bike Hero aims to be a one stop shop for all a customer's bicycle needs, from background information on what features are necessary for them, to allowing customers to compare bikes, providing customers the chance to test ride their bike at local retailers before deciding to purchase. 

Competitor Analysis

While there are more website options than I could possibly examine for purchasing bicycles, based on Springboard's provided materials I focused my competitor analysis on Amazon, Target, and Trek Bicycles. As Trek was the only bicycle specific website of the bunch I focused the majority of my analysis on their pages, especially their homepage. Due to the breadth of products sold by Amazon and Target, I felt it best to focus my attention on them for their product list, and product description pages. 

This analysis is an important first step when considering the design and functionality in this new website. Taking the most popular features from a would-be site's competitors and altering them to provide a unique but proven effective experience will encourage return users. 


Potential User Surveying 

The first step is understanding what process users take to find bicycles to purchase. I started my research by conducting an online survey to discover what people's knowledge level was surrounding bicycles, what filters they found most useful when searching, whether it is important to people for a bicycle to be in stock, and whether they prefer to try out the bike before buying.

Screen Shot 2021-05-13 at 11.01.55

From the competitor analysis, I discovered there were a vast quantity of filters used to narrow down bicycle options. Taking the most commonly used filters I decided to list them on the product page in hierarchical order.

Screen Shot 2021-05-13 at 11.01.44

The vast majority of users described their own knowledge of bicycles as medium to low, meaning that the majority of people would benefit from detailed and easy to understand descriptions plus a visual style of presentation.

Screen Shot 2021-05-13 at 11.02.31
Screen Shot 2021-05-13 at 11.02.39

Being able to see which bikes were in stock was equally as popular with consumers as being able to compare different options side by side. This meant that both features would be downright essential to be prominently displayed on the site

Screen Shot 2021-05-13 at 11.02.20

Lastly, the majority of participants noted that being able to test ride, or at least "sit on" a bicycle was important before buying it. This means that users are unlikely to buy a bicycle from an online retailer unless they have previously been able to try it out. 

Red Route User Flow

From the potential user survey, I moved on to drawing up a user flow of the red route most users would take when searching for and buying a bicycle. Due to project time constraints and Covid safety protocols I had to forego the more detailed in depth User Interview process. Though the User Flow evolved a bit after prototyping began to include such options as favoriting products, and stopping the search process to go try the bike out before returning to buy, but this still serves as an excellent map of a user's basic journey through the bike search and buying process on Bike Hero. 

Shopping (2).png

Paper Prototyping

Once the background data was collected and the basic user flow established, the work on the website's visual design could finally begin. As with most projects, the easiest and most time/cost efficient way to start the design process is with a paper prototype. This allows for rough sketching and a basic form to be established, while leaving specific details for later iterations of the prototyping process. Some designers prefer to start even more basic with wireframes which lays out only the most basic features such as text boxes, picture locations, and buttons. However, while admittedly a bit more time consuming, I prefer to start with the slightly more detailed full paper prototype.  

Screen Shot 2021-05-13 at 11.24.21
Screen Shot 2021-05-13 at 11.24.33
Screen Shot 2021-05-13 at 11.24.42

Prototyping began utilizing the most popular elements seen on competitor websites. Including but not limited to the page spanning visual hero images from Trek, Target's display of what products and "In Stock" directly on the list page, circling back to Trek for their detailed and visually oriented product description page. The ordering of the filters came directly from participant responses to the survey as well as the addition of the check boxes to allow users to compare products side by side. 

Long Distance Usability Testing

Due to challenges of setting up in-person meetings due to Covid, I was forced to conduct long distance unsupervised usability. While this presented the added challenge of being unable physically witness a tester's every reaction to each prototype. It did allow for the added benefit of allowing a tester to use the prototype like they actually would a website, with no designer present to direct them down the "correct" path should they lose their way. 

Bike Types.png

The creation of this first round of High Fidelity designs lead to the realization that a page had been left out during the paper prototype stage, namely the Bike Type page. This page replaces the need to include bike type as yet another filter on the product list page, making the act of search a little more streamlined and ensuring customers don't lose track of what type of bike they are looking at as many models can seem similar. Testers were a a big fan of the design and layout of the home page leading to a first in my book, no suggestions for improvement. 

Usability Testing Round 2

Round two of Usability Testing also took place via a long distance approach as I was nearing a deadline and required feedback as soon as possible. While the design of the homepage was universally liked by all testers, the rest of the pages required a few major improvements. 

Bike Types.png
Road Bike Product Page.png
Road Bike 1 Page.png

Users noted the use of the blue background grew tiresome to the eyes very quickly. Therefore the color was dialed back for the second round of iterations, reserved almost exclusively for buttons and text. Other minor changed included the alteration of the compare check boxes, and the addition of the favorite heart icon in the website header. Since no sample text or images were included in the Feature/Specifications/etc box at the bottom of the product description page I could not accurately infer as to whether the use of a blue background there would have the same tiresome effect as it did on the other pages. However, I do believe that this would be the case, moving forward I will likely limit the use of blue to merely the tab and a border around the text box as a whole. 

Next Steps

Due to the unfortunate constraints of both time and Covid, I was forced to rush certain aspects of this project that I would otherwise have preferred to dive into in more depth. The lack of thorough User Interviews, more detailed secondary research than what was provided through the brief, and the opportunity to user test in person limited the results I was able to produce. That said, this project, while limited in scope still served to help me expand on several of my skills. I have spent the least amount of my experience working on e-commerce websites and the progress I made between my last attempt and this one really shows me the value of time and practice. Bike Hero is a project I will definitely be coming back to in the future when time allows so that I can implement several improvements I did not have the opportunity to yet, including:

  • Removing the unnecessary banner at the top of the Product Description Page

  • Replacing the blue background under the Features tab with a white background surrounded by a blue outline

  • Further exploring how the details under those tabs will be displayed

  • Exploring other details of the functionality of the website such as the filters, compare, and favorite options