Tools
-
Figma
-
Miro
My Role
-
UX Design
-
UX Research
-
Wireframing
-
Testing
-
Iteration
Timeline
-
5 Weeks
Problem
Breakaway came with specific data points they wanted to address in order to improve customer experience on their mobile site. Current company data indicates:
50%
Abandon site without moving items to the cart
70%
Abandon cart at the registration page
Solution
The Breakaway PM speculated that users were unable to decide which bike was best and that they were unwilling to make accounts in order to complete their purchases.
​
With these problems in mind, I set out to design an in-app comparison feature and a guest checkout option.
My Design Process
Discover
Design
Validate
Prototype
Discover
Competitive Analysis
I decided it was best to explore what other large online sellers were doing to assist users in comparing products and how they handled guest checkout. For this, I compared Trekbikes, Amazon, and Target.
​
Below is a breakdown of each company's best features.
Trekbikes
-
The ‘compare’ button to select different bikes and see them compared side-by-side
-
The option to get help choosing a bike based on rider needs and preferences
-
Checkout page included the option to checkout as a guest
Amazon
-
Search filters by chips at the top of the screen
-
The rating stars from previous buyers - adds a sense of credibility/confidence to the purchase
-
The ‘best seller’ flag
-
‘You might also like’ section at the bottom of a product page
-
The CTA button on the cart page stays on page when user scrolls
Target
-
The ability to search for bikes by type
-
The filter chips on main search page
-
Product protection option
Interviews
After hearing the problems and solutions Breakaway presented, I felt it essential to speak to potential users in order to understand what they needed and wanted from a site like Breakaway Cyclery.
I interviewed five people who cycle regularly for fun and/or for their work commute. Once I collected their insights, I used an affinity map to visualize their thoughts and to group them into like categories.
Aaron
I think I would be willing to buy a bike online if I had the option of testing it for a few days and returning it.
Joe
I don't know if I could accurately compare bike frames online.
Scott
I want to be able to speak to someone who is more knowledgeable than me.
Research Synopsis
I was interested to learn that for all of my prospective users, one of the biggest hurdles to purchasing a bike online was the inability to adequately compare bikes and their features. This supports Breakaway's assumption that users abandon the site without moving products to the cart because they can't decide which bike is best.
​
I also discovered that speaking to knowledgable individuals within the cycling community is an important component in the bike selection process.
User Persona
With a clearer understanding of the needs and wants of Breakaway’s users and the online shopping options available, I decided to create a user persona. This would allow me to keep the user at the center of my design process. Meet John!
Design
User Flow
It was now time to focus on crafting a smooth user experience. To do this, I created a user flow. The user flow allowed me to map out each step of the John's path on the site to ensure a seamless and enjoyable user experience.
As a user, I want to easily compare bikes I'm interested in.
Wireframing
Having completed the user flow, the next step was to build a rough skeleton of what the future prototype would be. For this, I chose to create wireframes in Figma.
Keeping the wireframes low fidelity allowed me the space to make quick design decisions that would be easy to adjust once the initial round of testing was complete.
-
Homepage breaks bikes into categories for easy navigation and selection.
-
Users can set aside products to easily compare them.
-
Side-by-side comparison page allows users to make informed product choices.
Validate
Guerrilla Testing
Before moving on to creating a prototype, I felt it wise to conduct a round of guerrilla usability tests before becoming fully invested in a layout or structure.
​
Users were presented with three tasks to complete:
#1 Find and compare three bicycles on the app
#2 Select one bicycle and add it to the shopping cart
#3 Purchase the bicycle without creating an account
User Quotes
I like the side-by-side comparison to help me pick a bike.
I think I added it to my cart.
The comparison tab is blocking my view of the page. Can it be somewhere else?
User Feedback
Feedback from testers was summarized into notes and entered into a prioritization matrix. The matrix contains the following categories:
-
Critical (impacting 4-5 users)
-
Major (impacting 3 users)
-
Minor (impacting 2 users)
-
Normal (impacting 1 user)
​To prioritize my changes, I chose to only make adjustments on issues categorized as Critical and Major.
​CRITICAL
-
5 out of 5 users unaware that the 3rd bike they set aside would be visible by scrolling horizontally.
-
"I thought my third bike didn't get included in the comparison. There should be a scroll indicator." - Kim​
-
-
SOLUTION: Add a scroll arrow or have the 3rd image peeking out.
​CRITICAL
-
4 out of 5 testers felt the product comparison feature blocks the 'Add to Cart' button.
-
"I cant' really click the continue shopping button because it's blocked. Can this disappear now?" -Annie
-
-
SOLUTION: Minimize feature once a product is selected.
​MAJOR
-
3 out of 5 testers weren't sure which category was associated with which picture.
-
"I can't tell which picture goes with which category. Put more space between items." -Patrick
-
-
SOLUTION: Increase spacing on homepage.
​MAJOR
-
3 out of 5 testers didn't notice that their product was added to cart.
-
"I didn't notice the cart icon changed. I'd like it if the cart was at the botom of the screen where I'm already looking." -Sloane
-
-
SOLUTION: Move the shopping cart to a bottom navigation bar.
Branding
To prepare for the next stages of design, I created a style guide that fit with Breakaway's brand attributes: savvy, focused, serious, and dependable.
Style Tile
Color Scheme
Primary Color
Space Cadet
To inspire a sense of knowledge, authority, and reliability
#19204E
Secondary Color
Selective Yellow
To instill feelings of optimism and energy
#FCB300
Neutrals
Seasalt
To invoke feelings of simplicity
#F9F8F8
Gray
To instill feelings of wisdom and balance
#F7F7F7
Pure White
For subtle visual differentiation
#FFFFFF
Eerie Black
To signify wealth and power
#222222
Semantic Colors
Crimson
Error/Required Content
#DF183F
Pigment Green
Success
#2AA952
Building the logo
The Components
Cambridge Dictionary Definition and Meaning
breakaway noun
SPORTS
: in the sport of cycle racing (= racing on bicycles), a rider or a small group of riders that goes ahead of the main group and tries to keep at a distance from it
Breakaway
-
Avid cyclers will be familiar with the term 'breakaway' and its significance. Using it in the logo will evoke a sense of breaking away from the norm in shopping for bikes.
-
The shadow gives the impression of movement.
-
The circular shape resembles a tire on a bike. The fact that it is broken acts as a visual representation of a rider breaking away from a group of riders or a break from the status quo in shopping for bikes.
Final Design
Breakaway
Prototype
It was finally time to create a high fidelity prototype of the Breakaway site. I incorporated user feedback from the guerrilla usability tests to make the design more user friendly.
The specific changes I made are indicated below:​
Before:
After:
-
Sizing of product comparison columns changed to indicate the page has a horizontal scroll function.
-
Bottom navigation created for ease of use and to house shopping cart and comparison feature.
Before:
After:
-
'Add to cart' button changes to 'Added' to act as another visual indicator that the user's action was successful.
Testing & Feedback
To ensure I had the most user-friendly designs, I conducted a set of usability tests. For this round of testing, I returned to my target audience - 72% male, aged 24-38, take cycling seriously.​
​
Following the same testing and analysis process during the guerrilla tests, I created a series of notes based on the tests and input feedback into a prioritization matrix. I then focused on fixing the issues categorized as Critical, Major, and Minor and used this feedback to iterate on my prototype.
Before:
​MINOR
-
2 out of 5 users wanted the color they selected to be listed.
​CRITICAL
-
4 out of 5 users didn't know they needed to select a size before adding the bike to their cart.
​MAJOR
-
3 out of 5 testers wanted the size button to change color once selected to make it stand out more.
After:
-
SOLUTION: Size selection elevated on screen and red asterisk placed next to it to indicate it is required information
-
SOLUTION: Size button changes to a filled button once selected
-
SOLUTION: Name of selected color included.
Before:
​MINOR
-
2 out of 5 users suggested the 'Compare' button be more eye-catching.
After:
-
SOLUTION: 'Compare' changed to a filled button to make it more obvious.
Next Steps
Creating an easy to use comparison feature that would assist users in narrowing down their options was an essential task established by the Project Manager at Breakaway, as was creating a guest checkout feature. The prototype I created and its focus was intended to meet the goals of the business while remaining user focused.
That said, future iterations would address the following:​
#1 During the interview stage, every individual stated that talking to friends/experts is an essential part of the buying process. In order to convert in-person buyers to online buyers, a mobile site should include
-
Speak to an Owner: Include an option to connect with a current owner
-
Chat with an Expert: Include a FAB that connects buyers with an expert
#2 Interviewees mentioned they prefer to shop for bikes on desktop because of the larger screen
-
Build a desktop site with the same features
Reflection
Working with specific business goals was helpful in that it focused the scope of my work. However, it was simultaneously stifling since I felt compelled to focus singularly on tasks that were predetermined by the company. However, these constraints pushed me to practice creative discipline in merging client goals with consumer needs.
Check out more of my work
Level Up
TinyTales
BoardSpace