Performance Bicycle

E-commerce is a key element of a user's online experience. This project was about executing a full 2-week design process while applying fundamental UX skills to improve Performance Bicycle's e-commerce website.

Challenge

Redesign an existing e-commerce website, Performance Bicycle, to improve the user flow of buying a single product from start through to check out.

Solution

For this project, I chose one basic — yet essential — user flow to show how simple changes can be implemented throughout the site to improve its overall function. Specifically, I chose the user flow of buying a bicycle light to show these changes.

Tools

User Research

As this was a class project, we did not have access to analytics and data to identify the users' key pain points. Therefore the first step in developing an improved user flow was to survey users to see if I could identify who they actually are as well as any trends in their preferences. I focused both on bicycle lights as well as online shopping preferences.

Key Findings
  • 71% of respondents prefer shopping online
  • The same number rely mostly on online user reviews
  • 57% of respondents stated that their biggest problems with online shopping were that websites are difficult to use and do not feel secure
  • 86% of respondents do not want personalized shopping experience
  • Of those 86% of respondents who own or plan to buy a bike, 57% of them use bikes for recreation
  • 57% of respondents believe that owning a bike light is very important
  • When buying a bike light, 57% care about low cost and 71% focus on high quality

Task Analysis and Comparative/Competitive Analysis

As I was conducting the survey and interviews, I began analyzing the current Performance Bicycle website as well as other e-commerce websites to compare. I sat down with a user who had responded to my survey and interviewed him to gain some insight into the Performance Bicycle website. This interview also served to validate my own thoughts about the website's design and usability.

Performance Bicycle
  • The homepage is very cluttered and confusing.
  • The secondary navigation that appeared with hover is a plus, however the menu itself is very overwhelming.
  • Overall, the site is badly organized.
  • Specifically, the 'Lights and Accessories' section isn't very logical in terms of the items placed in that category.
  • The product detail page has a very standard, efficient layout, minus a few cluttered areas.
  • The checkout page is a disaster.
The Competitors: Sports Chalet & Apple
  • The homepage features large carousel images that are engaging and help to organize the navigation.
  • The "cascading" hover menus are easy to use and navigate.
  • The product detail page includes a somewhat useful "related items" tool, however its placement at the top overshadows the current product.
  • Customers have the option to log-in or check out as a guest, which my user prefers.
  • The checkout page is clean and well-organized.
  • Separating each step of the checkout process on a single page is much more engaging and helpful for the user.

Prototypes

Taking into consideration the user's needs as well as the key takeaways from the competitive/comparative analysis, I created basic wireframes through Balsamiq. These wireframes served to visualize my ideas and — after making these wireframes clickable — give my user a basic prototype to test.

Final prototype

Once I had tested the initial Balsamiq prototype with my user as well as several others, I created a medium fidelity prototype in InVision. This prototype included several changes from my user tests including:

  • More apparent user reviews
  • Redirecting certain links to specific pages
  • Cleaning up the checkout flow to be more user friendly

The final prototype shows how the user would navigate the specific user flow of buying a bicycle light. Click the image to view prototype.

Next Steps

Moving forward, there are steps to consider to further improve the Performance Bicycle redesign:

  • More user testing to improve functionality with the next iteration
  • Analyze data and KPIs to determine how to the redesign has been received by users
  • Expand functions including user reviews/ratings and the "Learning Center"
  • Encourage users to create accounts through improved security and purchasing convenience