Project Summary
This project simulates working with an E-commerce bicycle sales company to address various issues they have found in their web platform UX. For this project, I was provided information from a fictitious project manager about the industry, brand, and target users. I was asked to create a company name and logo, wireframes, high-fidelity, and complete multiple rounds of testing to validate the designs.
Duration
90 Hours - Feb 2023
Role
UX Researcher, UX/UI Designer
Tools
Figma, Maze.co
Project-Provided Information:
Data shows that 50% of users open an average of 7 item pages and then abandon the site without moving any items into the cart.
My Hypothesis: Users cannot determine which bike is best based on the current website features.70% of users who place an item in the cart do not purchase it. Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase.
My Hypothesis: Offering a guest checkout option would increase transaction rates.
Target User:
24-38 years old
The user base is 72% men
High-income earners
take biking seriously & will spend high amounts of money on this investment
Picky & do research
Brand Information:
Personality: Expert in the field, knowledgable about the latest trends and best products
Brand Attributes:
Savvy
Focused
Serious
Dependable
Information provided by project prompt (exception for hypothesis)*
Problem Statement
The customers of FKBikes struggle to know how to find their ideal bike online, often visiting several item pages without moving anything to the cart or abandoning the cart prior to checkout due to a lack of a guest checkout option. This poses a problem as it means lower sales and reduced revenue and when customers don’t meet the minimum criteria of setting up an account, the company loses valuable touchpoints and data collection.
Discovery & Research
After creating a research plan, I jumped into my secondary research. I chose to complete a competitive analysis and online research. For my research I had three questions to keep me grounded and focused:
Are there consistent patterns seen across other sites that might lead to higher conversion rates?
What are the top-selling retailers of bikes and what percentage of those sales are online?
What motivates people to take a leap and make a large purchase online?
Industry Leader Study
As part of my prep-work for this project, I completed an analysis of industry leaders. For this study, I was interested in looking at how various successful businesses solve problems, what works, what doesn’t, and any patterns that seemed to be specific to this industry.
Industry Leaders for Analysis
Trek Bikes
Trek is one of the most popular bike brands, selling bikes for a wide range of purposes and prices, and at varied retailers (from inexpensive chain stores to high-quality biking boutiques)REI
REI is an industry leader in outdoor supplies, including bikes, and has locations across the country. It is often viewed as a better option than other large chain stores specializing in the same area.Specialized
Specialized is another top bike brand focusing on high-performance bikes and geared toward knowledgeable and experienced customers.
Project Provided Examples
Trek Bikes
Amazon
Target
I chose to deviate from the provided industry examples because of the target user description. From my own personal knowledge of the biking community, most of the target users would look to a higher quality store rather than Target or Amazon. While these may provide good examples of popular E-Commerce sites, because we are dealing with picky customers it is more beneficial to look at specific, bike-industry leaders.
Key Takeaways:
Sites should balance the needs of both a knowledgeable biker and a novice
Help articles and clear links to assistance seem like a big part of these sites
Specific, in-depth filtering capabilities are a pattern
Many sites offer resources for seeing a bike in person
Offering “other bikes you might like” or something similar may be an important addition
Guest checkout is a standard
Competitive analysis
Since I had already completed an analysis of three leaders in E-Commerce bike sales, I decided to take a more analytical, data-driven approach. Using Similarweb (an analytics and tracking website) I captured data on seven bike sellers’ websites. I looked at visits per month, bounce rate, average pages per visit, and average visit duration.
Key Analytical Findings:
Users spend roughly 3 minutes on the websites
Insight: The average site has 3 minutes to complete a transaction/capture user attentionUsers visited an average of about 5 pages per visit
Insight: The average site has 5 pages in which to convince a user to make a purchase
Planning & Early Design
After the research phase came planning and organizing in preparation for designing the final product. Using the key findings from my research and the project-provided information, I narrowed my focus to two main functions of the website:
Bike-matching quiz
Guest checkout process
User Flows
Prior to sketching, I developed user flows for my two main functions of the updated website. These flows were the starting point and the map to help me stay on track and guide my designs.
Low Fidelity Designs
Prior to my first round of testing, I created both sketches and wireframes of my user flows. The sketches served as my initial attempt at a design and, after deciding I liked what I created, I transitioned to wireframes for my low-fidelity testing.
Testing on Low Fidelity Designs
For my first round of testing, I recruited 5 participants to walk through my prototype. Since I was testing the UX of my user flows, I did not try to recruit specific testers to meet the target audience. I wanted these designs to be universally intuitive and easy to use, not specific to any target audience.
Results Summary of Testing:
Each Tester had direct success on every task
The average test length was less than 3 minutes
Any issues that occurred were a result if the nature of the prototype
“I did not feel any task was difficult. The setup and instructions were perfect.”
- Tester feedback
High Fidelity Design & Testing
With my wireframes validated, I moved into designing my high-fidelity prototype. Here I focused on using component architecture, atomic design, and accessibility principles to make a scalable and universally usable design.
Company Name & Visual Style
Early on in the project, I was asked to create a company name and a UI style. I researched cycling jargon and used that as inspiration.
I ended up with FKBikes derived from F.K.T. which stands for fastest known time when referring to a course or race. Using a tie-in to this common term is meant to signal the brand's savviness as well as instill trust and the brand’s ability to offer fast, race-quality bikes.
I originally found color inspiration from earth tones. Biking, for many, brings people closer to nature. I wanted the colors to elicit trust while also having a pop of brightness to bring out feelings of excitement, speed, and other high-energy emotions that can come with racing.
Testing on High Fidelity Designs
For my second round of testing, I specifically asked participants who fit the target users’ description provided by the prompt. I asked 5 participants to complete 5 tasks and answer some follow-up questions via Maze.co.
The tasks were very similar to the first round, the main changes to this test were in the follow-up questions where I included some questions about the UI and overall look and feel of the prototype.
High-Fidelity Testing Results Summary:
Direct success on each task by every tester
Minimal time spent on each task
Positive feedback across the board
“The website looked great. Bike quiz worked well and had nice flow to it!”
“This experience is similar to other bicycle shopping experiences I have tried and it was very intuitive.”
*Emphasis mine
“It was straight forward, intuitive, and pleasing to look at. I had no problems completing the tasks.”
Final Thoughts
This project was interesting because, so far, it had the least criticism following each round of testing. The process was very smooth and the designs seemed to resonate with each tester. By using my research to follow popular and expected patterns, the users had an easy time navigating the website.
I had a lot of ideas I never got to include in my prototypes because of limiting the scope to the two primary user flows. Paring down all the potential features only served to make a clear, concise, easy process for the users.
See more:
-
CoPilot
Mobile App Design Internship
-
Alter Eco
Mobile App Design
-
CityPups
Design Sprint