Overview

Bike shop is an online platform where users can shop for a variety of bikes to fit their biking needs.

• Role: UX / UI

• Timeline: 6 weeks

The Problem

The product manager of Bike Shop has found that user’s will put a bike into their cart, and then abandon it. There is no guest check out option, which the project manager suspects might be a large part of the issue.

Preview the Prototype:

Industry Leader Evaluation

Target, Amazon, and Trekbikes.com are some of the top industries that sell bikes online. I compared these apps/sites to gain understanding of necessary features within each product. I was especially interested to observe how the user would add a bike to their cart and check out.

Define

The project manager made an assumption about users not completing purchases because of no guest check out. I did user research to see if this was an accurate assumption.

5 participants viewed the following 2 sketches to confirm that adding a guest check out page would be necessary.

5/5 users chose guest checkout for their checkout process.

Majority said they would not create an account because buying a bike is not a regular purchase.

Finding A Solution Through Responsive Design

I started my wireframes with a mobile first approach. After the mobile design was completed, I was able to start my desktop screens.

Quiz to guide user to their purchase?

Quiz vs Filters

While researching other bike websites, I saw a quiz option. Because our users were abandoning their cart, I wanted to test a quiz to see if that would help users to buy a bike with confidence.

I conducted my first round of usability testing (5 participants) with a bike quiz. I tested my second round of users (5 more participants) with filters in the place of a quiz. With filters, there were less steps. This led to less confusion and a smoother check out process.

Confirmation Page

On my first confirmation screen, users reported that because their purchase details were still visible, it did not feel like their purchase was complete.

The iteration on the right was tested with my second round of users. The majority of them commented postively or exclaimed when they saw this screen.

Watch the Prototype Below:

Key Learnings

Varying design methods will work for each, individual design project. This being my third design project, I was able to combine methods I learned to use in my first capstone and my design sprint. I have gained the skills I need to decide what research and design methods would work best given a certain scenario.

The first solution is not always the best solution. I thought the quiz for this e-commerce site was the strongest solution. The results of my user testing was that not only would filters accomplish the same thing, but they would create a smoother, and more intuitive experience for the user. Trying multiple solutions lead me to the best solution.