BikeGenius
Landing page design for a bike company intends to enhance their browsing and checkout experience to greatly improve their product’s usability.
UI.UX
Alice Liu
Role:
Student Project
Date:
Nov 2021
Duration:
2 Weeks
Overview
BikeGenius is a E-commerce website that manufactures, design, and market bicycles and cycling product. The company intends to enhance their browsing and checkout experience to greatly improve their product’s usability.
50% of users open on average 7 item pages and then abandon the site without moving any items into the cart.Hypothesis: users are unable to determine which bike is best based on relative features. Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase.
The goal of my project is to improve the conversion from browse to completion of checkout to increase revenue on the product’s website and mobile-web experience.
Design Process
I utilized design thinking, a user-centered design methodology that offers a hands-on approach for analyzing complex problems to come up with innovative solutions to the problems.
Empathise
Competitor Analysis
By identifying and analyzing industrial leaders such as Specialized, Trek Bikes, and the Giant, I was able to understand their practices in solving similar problems.
User Interviews
I interviewed five participants, aged 24 to 38, to understand their shopping habits and preferences. Sample questions include: How do you determine the features you need in a bike? How do you feel about account registration before check out?
Persona
I developed two personas to identify the target users: Eddie enjoys riding and keeps up with news about the bikes; David, on the other hand, knows little about bike features. Personas helped me recognize different kinds of users, their goals, ambitions, and frustrations. The product is designed to satisfy all types of target users, regardless of their differences.
User Flow
I created the user flow to identify users' interactions with the product, especially when they interact with functions that intend to solve the discussed problems. It tremendously helped me understand the users' progress in completing a task using the website.
Style Guide
Identifying the brand attribute and brand personality is essential for creating a style guide. BikeGenius has a brand attribute of Savvy, Serious, Dependable, and Focused. I chose navy blue and utilized different shades of it to make the product feel dependable and savvy.
Need help finding the right bike for you?
Problem: Users get lost in browsing different categories and relative features.
Solution: The “Bike Finder” is available on multiple screens for users who cannot decide which bike or feature is the best for them. Users get an expert recommendation on the top-matched bike and a detailed introduction of it by answering a few simple questions.
Which bike should I choose?
Problem: Users are unable to determine between products they browsed.
Solution: The “Compare” function allows users to see technical specifications of up to four products on the same screen. In addition, the product page offers a detailed introduction, including a video showing the bike in action and highlighted features.
"Guest Checkout would be great"
Problem: Users prefer the option of a guest checkout method. An Email must be captured.
Solution: Adding a guest checkout option on the checkout screen gives users more options. Users still need to enter an email to receive purchase confirmation. In addition, there is a “quick registration” step after checkout that allows the user to create a password for the email, therefore creating an account.
Summary
The second round of usability testing showed that 100% of users experienced no friction using the guest or login checkout methods. Users with less knowledge of bikes tended to use the "bike finder" function to seek professional recommendations. Users with more understanding of features tend to enjoy the "compare" functions.
Interview showed that my designed successfully improved the conversion from browse to completion of checkout to increase revenue on the product’s website and mobile-web experience.
