Problem:

Research:

Synthesis:

Timeline:

• February 2023 - April 2023

Pedal, an Ecommerce website for all your bicycle needs, is experiencing some low conversion rates with their browse to completion of checkout.

I have been tasked to design an experience that will enhance the user flows for browsing products and checking out to improve their product’s usability and increase the number of people completing their purchases.

The Product Manager’s hypothesis is that users are unable to determine which bike is best based on relative features.

Competitor Analysis

I started first with analyzing and studying the user flows and user interface of popular Ecommerce bike websites. I took myself through their browsing and checkout experiences, taking notes of things that I liked and disliked. I paid close attention to their information hierarchy and how they organized the different departments. I also made sure to add something to my cart and take note of how they guided their users all the way through checkout completion.

I also analyzed other popular Ecommerce websites outside of the bike industry. I wanted to make sure that I’m taking all features into account when it comes to an Ecommerce experience when I go to design Pedal’s website.

Secondary Research

Next, I conducted some secondary research with the goal of learning more about the bike industry and what specific things people are looking for when it comes time for a repair or they’re exploring purchasing an entirely new bike. If I know what is most important to users, I can provide them with helpful information direct them to the products they are looking for.

I also had a secondary research goal of learning more about the elements of a website that go into creating the perfect Ecommerce experience. In order to make sure I completed these goals, I wrote out 3 research questions to keep me focused:

1. What bike features are most important to customers?

2. At what point does somebody need a new bike?

3. What elements/features of a website do Ecommerce purchasers find valuable?

Next, it was time for me to synthesize the research I gathered and start developing out who my user is and what they say, think, do, and feel. I also needed to take the research and develop out some actionable insights to be the foundation for my designs.

I did this through creating an audience persona and empathy map.

After completing a competitor analysis, conducting secondary research, and creating an audience persona, I now had a full understanding of who my target user is and what they are looking for in my product.

In order to ensure that my designs and user experience meet the needs of my target user, I needed to redefine the problem into actionable insights. I did this by creating 3 “How Might We” statements.

User Flow:

Homescreen

I went with a familiar E-commerce style for my home page. My primary CTA that the user's eye is guided towards using the road in the picture is to shop current deals. Additionally, I present other avenues to view different products through “Featured Products” categorized by “Mountain”, “Road, and “City”.

On the second half of the page, the user can shop by part (Wheel/Tires/Tubes, Lights, Saddles, and Kickstands), as well as check out items that are on sale.

Each section of this homepage offers the user a different entry point to check out products and browse for what they need. This will solve the problem of users opening several pages without adding an item to their cart.

Lastly, I created a section for users to sign up for a newsletter where they can hear about limited edition products and sales, material innovations, and upcoming events. This is a great way to capture leads for site visitors and begin nurturing them towards a sale.

Redefine the problem:

High Fidelity Mockups:

Now that I had some actionable insights to serve the foundation of my designs, it was time for me to map out the complete user experience of a somebody purchasing a product from the website.

After I mapped out my user flows and had an understanding of the path in which users would take to complete certain tasks, I needed to flesh this out more and begin to map out what the screens would actually look like.

I did this by creating low-fidelity wireframes using Figma.

Product Page

The product page starts with a clean picture of the product on a white background. To the right of that picture, the user can see pricing, reviews, a short description, choose a color and sizing, and lastly (and most importantly) add the item to their cart. It is important to note here that the add to cart button is above the fold, so it is clearly visible when the user arrives on this page.

As the user scrolls down, a video of somebody using the product in a real world setting is presented to them. Some additional features are listed out as well to accompany the video.

On the second half of the page, a comparison feature is shown that compares the product they are viewing to a similar product. This allows the user to do a analysis of whether or not this is the best option available to them. This feature addresses the hypothesis that was provided by the Product Manager that the reason why users are not adding products to their cart is they are unable to to determine which bike is best based on relative features.

Wireframes:

Before I started developing out high fidelity mockups, I wanted to validate that my wireframes solved the problems I identified in the research phase. To do so, I set up virtual meetings with frequent E-commerce shoppers to make sure I was not missing any features that would help users navigate the experience and successfully add items to their cart and complete their purchases.

Through my discussions, I identified a few gaps in my design:

In order to validate the layout and design changes I made in my first round of user testing, I created an interactive prototype so users could go through red route flows and interact more in depth with my designs. As users went through these flows and completed tasks, I took notes on things they were saying and calling out.

Shopping Cart and Checkout

Immediately when a user adds an item to their cart, a side window pop ups that shows the item in their cart and gives them the option to checkout. Within this window, you can see an accurate estimate of final pricing. During one conversation I had when reviewing my wireframes, one of my participants called out that they get frustrated sometimes when the final price they pay after taxes, shipping, and other costs, is much higher than what is shown in their cart. I don’t want my users to abandon their cart when arrive at the final price. Lastly, users are also presented with items that “You might also like” to help increase the average order value.

If a user decides to checkout, they are brought to a page where they can choose the payment option of their choice. In my research, I found that in 2023 users expect to be able to pay using their preferred method. To meet this need, I offer an “Express checkout” that allows them to pay using a variety of different methods.

To make sure that I am capturing email information without users having to create an account, there is a required field to enter your email before moving onto the next step. If users are a returning customer and/or have an account, their is an option for them to log in.

Usability Testing:

User Feedback:

On sale items on the homescreen

A recurring piece of feedback I heard from my users when scanning the homescreen was that they like to quickly check what items that are on sale right when they arrive to the site.