Let experience always be your passion.

About the Project

Ride is a company that sells bikes on their mobile-web experience. They needed to enhance their browsing and checkout flow to greatly improve their e-commerce website usability. The goal was to improve the conversion from browse to completion of checkout in an effort to increase revenue.

The Problem

Ride was having difficulties creating successful conversions (from browsing the products to completion at the checkout) by their users. Ride would like to increase the revenue generated by the product’s mobile-web experience.

Analytics has shown that 50% of the users, on average, open 7 product pages and then simply abandon the site altogether without even adding anything to the shopping cart.

Ride hypothesized that users were unable to determine which bike is best suited for them, based on relative features. Ride’s website was missing any kind of product comparison feature, which is commonly found on other competitive websites.

Moreover, 70% of users who place an item in the cart do not complete the purchase process. Analytics also show that users appear to be abandoning the cart at the registration page. Ride’s website requires the user to create an account in order to complete the purchase.

Ride would like to allow for a guest checkout process feature, while still requiring an email capture component during the process.

The Solution

Ride already had a few solutions in mind and wanted to test their efficacy.

Guest Checkout: Design and demonstrate a user flow that shows how a user could purchase a product and proceed through to the guest checkout, and complete the process, without having to sign up for an account.
Comparison Tool/Feature: Design a mobile optimized product comparison tool, and corresponding user flow, that demonstrates how a user would use this tool to compare two or more different products, allowing them to determine which product is best suited to them, based on relative features.

The Process

The approach was to empathize with the potential users, research the problem, synthesize that research to help ideate a possible solution, and finally validate the efficacy of the solution through testing and refinement.

Gaining Insight & Increasing Empathy

A true understanding of the problems people were facing and a deeper empathetic perspective of their situation was required. Since Ride was experiencing problems that were common in their industry, secondary research was conducted to find out what other companies and organizations discovered through usability testing of existing guest checkouts and comparison tools.

Research Insights

Comparison Tool

Users tend to leave if they can’t find enough information about the product in the first place, or it is not complete, consistent, and harmonized. Thus, most importantly data integrity, availability and accessibility, etc, are essential requirements for being able to build a successful comparison tool that won’t cause any kind of user confusion. Even before attempting to build the tool itself.
A poorly implemented comparison tool is more harmful to the user experience than not having the feature at all. (Since users can still compare products on their own without a dedicated tool).
Highlighting product specification differences allows users to quickly see where the compared products differ, saving them the time and effort required to do it themselves.
Product specifications, especially for new users, can often be too technical or simply unfamiliar, so having some kind of inline help feature that describes the specification is extremely helpful.

Guest Checkout

Baymard Institute’s testing and analysis has revealed that forced account creation – that is, not having a “Guest Checkout” option – is a direct cause for checkout abandonment.

24% of US internet shoppers have abandoned one or more shopping carts during the past quarter solely due to forced account creation (4,329 respondents, US adults, 2021) - Baymard Institute
Users’ prior web experience with creating accounts on sites have set a strong mental model of “Account = Newsletter”. This expectation is not completely unfounded, as Baymard previously found that of the top 50 US e-commerce sites 26% silently auto-subscribe all customers to their newsletter once placing an order.
60% of test subjects had severe issues identifying, seeing, and selecting the “Guest Checkout” option at the account-selection step during checkout. Multiple times the misunderstandings led subjects to believe registration was required, despite being optional.

Empathy Maps

To help really get into the shoes of Ride’s users, empathy maps were created. Synthesizing the information gained from all the research helped create a fairly accurate representation of the kinds of users Ride had. The research revealed particular needs and concerns the users had while going through a typical online experience, and in particular how they felt during the checkout and product comparison phase.

Shopper - Loves Biking, Looking to get into Mountain Biking

Heuristics - Evaluating Competition

Direct competition was evaluated for their competitive similarities and features. The Heuristic Analysis was based on the Nielsen Norman Group’s Heuristics for User Interface Design.

Certain informative strengths and weaknesses were identified within a few chosen platforms: Trek Bikes and Devinci Cycles.

The results were quite useful in that they identified problems and revealed features that could prove useful to the Ride mobile-web experience.

Trek Bikes

Trek Bikes, considered an industry leader in bicycle and bike related product manufacturing and research. Two separate flows were taken throughout their website:

1) Basic Checkout Flow - From homepage to checkout and payment.
2) Product Comparison - Take two different bike models and compare their features to make the best possible purchase decision within context of personal preferences and budget.

The website’s overall design was fairly clean and modern, although some elements of the experience felt a little jarring.
- The buttons in hero image areas on product listing pages, say different things, but have the same actions, ex: “shop now” and “see bikes”, both take the user to the same location.
- Adding a bike to the card appears impossible. It unknown if they plan on adding bikes to their online shop. The add to cart buttons suggests they will, but you physically have to add quantity, and click “add to cart” only to find out they all eventually say “currently not available, order it in-store”.
Their product offering is quite robust, so it is understandable that some additional navigation would be required to browse their products.
Their guest checkout feature is useful here, and would help get more people through the purchase process, as they don’t need to sign up for an account.

One possible modification for improvement is that the email should be required later in the process. Having it as early as it currently is, leads users to believe they just want the email for marketing purposes, which for a lot of people will be a deterrent.
They have an interesting product comparison feature. Seeing products side by side felt intuitive, although the space was fairly tight. The mobile experience however felt overly tight and required a whole lot of scrolling. This could be improved.

Devinci Cycles

Divinci is also a widely and well known industry leader in bike manufacturing and design. They don’t have an online checkout, so that process was not included. Their product comparison feature flow was followed.

Product Comparison Flow - From homepage to bike browsing, to comparison chart.

The website (especially in mobile form), was a lot more organized, and easier to follow than Trek.
Product offering was not as robust, regardless, product navigation was a much smoother experience.
The comparison feature has a better layout, scrolling is a lot more obvious, and the columns aren’t compressed and squished into the screen.
Devinci took a slightly different approach, and compared the products with a focus at feature level and more comfortable horizontal scrolling experience. This is definitely something that can work better in a mobile experience.

User Flows

User flows helped focus the project by determining the most necessary features required for an MVP (minimum viable product). These user flows identified the critical paths users follow while using the Ride website.

In the interest of time and building a proof of concept, the flow routes specific to the guest checkout and comparison tool were chosen for demonstration. These help push the project into the next phases: wireframes, high fidelity mockups, prototyping, and finally user testing.

Wireframes

With the user flows complete, the next step was to visualize the flow and ideas with wireframes. Moderate fidelity wireframes were created to represent an accurate interface.

Features and solutions helpful to the user’s experience discovered in the competitive solutions during heuristic analysis, were included at this stage.

Usability Testing

An holistic approach was taken for testing the user flows, attempting to test the whole experience from product viewing to comparison, to adding to cart, to checkout completion.

Each participant was given a scenario and a goal with simple tasks to perform.

Ride required two major features to be tested. The first being a product comparison tool feature, and the second, a new guest checkout. The hope was to discover any major flaws, confusing UI areas, or usability issues.

The comparison tool had an interesting challenge in that typically, these types of tools are noted for their difficulty to properly implement. They aren’t typically used in mobile format either because of the inherent usability problems caused by the way the information tends to be naturally presented.

Testing was moderated online through the use of Zoom and Google Meet. Detailed notes were taken as the participants were observed making their way through the prototype. An open dialogue was encouraged as they performed the tasks and encountered difficult or rewarding situations.

Testing Results

There were no catastrophic issues, and only 1 moderate issue found during testing. All other issues were either minor, simple recommendations, or preferential in nature.

Example Issue

On the ‘comparison’ screen, there was no obvious ‘add to cart’ button per product. Instead there was a single “Add any of these” cart button, which proved to be a little confusing for users.

Solution

‘Add to cart’ buttons were added to each item line, so it was much clearer what items would be added to cart, as well as how one would go about adding the product to the cart.

High Fidelity Mockups & Prototyping

After ironing out the bugs and fixing the usability problems, the next step was to create High Fidelity Mockups and Prototypes. The fixes to the user experience were incorporated as well as the branding and visual identity.

During prototype testing almost no issues were found, aside from the occasional spelling error, and slight alignment issue.

Prototype

View Ride Prototype

Conclusion & Next Steps

I set out to create an engaging and enjoyable experience for Ride’s consumers. I wanted to help Ride increase their conversion rate by adding features that would help their users feel confident and secure in their product browsing and purchasing experience.

By adding a successful, innovative, and intuitive comparison tool, users were able to easily choose the right product based off of the features they were looking for. Users were also more likely to complete the checkout process with the addition of a guest checkout feature that promises confidentiality and a purchase experience without the worry of marketing / spam emails.

During research and learning some important lessons dealing with checkout flow and comparison tools, I was able to create excitement and positive experiences for Ride’s users.

With further user testing and placing the additional prototypes in front of many more people, I expect that Ride’s mobile-web user experience can further be focused and refined to be an even better shopping experience, and successful e-commerce solution.