Rift Riders eCommerce
A streamlined compare feature and guest checkout
Rift Riders is a bike eCommerce site. The product manager found that people were opening several product pages only to never add bikes to cart. They think implementing a compare feature will help users decide on a bike. We found a more streamlined way to display and compare product features for high-end bikes.
They also found people were abandoning their carts when they were required to create an account
Overview
My Role
Ideation
Sketching and wire framing
Brand platform and design system
UI design
Prototyping and usability testing
Project Timeline
December 18th, 2023–January 12th, 2024
Adobe XD - wireframes + prototyping
Concepts iPad app - sketching
Mural - ideation + user flows
Design Tools
Brand Platform
Discovery
secondary online research
synthesize research
two rounds of Iterated design and testing
design user flows and sketch experience
design low-fidelity wireframes
test wireframes
design high-fidelity prototype
test high-fidelity prototype
iterate on high-fidelity prototype
Design Process
Scope and Constraints
Improve the conversion rates going from browsing products to completion of checkout.
Reduce the amount of abandoned carts during checkout.
Business Objectives
Your PM has shared data that shows 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. Your PM’s hypothesis is that users are unable to determine which bike is best based on relative features.
Additionally, 70% of users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase. Your PM wants you to design a guest checkout to solve for this. The guest checkout must capture email.
Info from product manager
User Persona
24-38 years old
user base 72% men
high income earners
They take biking very seriously. They will spend a lot of money on this investment so are very picky and do their research
Company Brand
Brand personality
An expert in the field who is always knowledgeable about the very latest trends and best products related to biking.
Brand attributes
Savvy
Focused
Serious
Dependable
What I did
Brand Platform
Discovery
Design and Iterated Testing
Design user flows and experience map
Design wireframes
Test wire frames
Design high fidelity prototype
Test high-fidelity prototype
Iterate on high fidelity prototype
Brand Platform
Brand Identity
Brand Personality: Expert, knowledgeable, trend-aware, best-product purveyor.
Brand Attributes: Savvy, Focused, Serious, Dependable.
Target User Persona: 24-38 years old, 72% men, high income earners, serious bikers, research-driven, high investment in gear.
User Persona
Mood Board
Brand Guidelines
Slate Blue (60%): Evokes dependability, expertise, and authority, aligning with the brand's seriousness and focus. The cool undertone hints at cutting-edge trends and knowledge.
Terracotta (30%): Adds a touch of boldness and confidence, appealing to the user's willingness to invest and highlighting the brand's savviness in offering unique products.
Eucalyptus (10%): Connects to nature and subtly injects sophistication, resonating with the user's outdoor focus and high standards.
Color Choices
Color Guidelines
Website layout
Background: Predominantly Slate Blue for a professional and trustworthy feel.
Sections: Utilize Terracotta to visually guide users to key areas like new arrivals or promotions.
Accents: Eucalyptus for text overlays, subtle details, or decorative elements within sections.
Buttons
Primary CTA (Call to Action): Terracotta with white text for maximum visibility and action.
Secondary Buttons: Gray with Slate Blue text for less emphasis and secondary functions.
Imagery
Product Images: High-quality photos on a Slate Blue background for professionalism and focus.
Lifestyle Images: Incorporate Terracotta in bikes, accessories, or natural elements for subtle brand association. Eucalyptus can subtly appear in outdoor scenery.
Navigation
Main Menu: Slate Blue with white text for clarity and focus.
Hover Effects: Subtle Terracotta on menu items for visual interest and interaction.
Dropdown Menus: White background with darker Slate Blue text for readability.
Text and Fonts
Body Text: Dark gray or black for readability and seriousness.
Headings & Accents: Bold fonts with Terracotta or white for emphasis and hierarchy.
Discovery
Research Objectives
Evaluate different layouts and functionalities for comparing bikes side-by-side.
Analyze data selection and presentation within the compare feature.
Identify best practices for highlighting key differences and specifications.
Understand user interaction patterns and engagement with the compare tool
Compare Feature
Evaluate different layouts and functionalities for comparing bikes side-by-side.
Analyze data selection and presentation within the compare feature.
Identify best practices for highlighting key differences and specifications.
Understand user interaction patterns and engagement with the compare tool
Guest Checkout
Perform secondary research into product compare and guest checkout features by researching white papers from industry leaders and examining implementation methods found on bike and other high-end e-commerce sites.
Methodology
Website Analysis Report: A comprehensive report summarizing key findings, including screenshots, user journeys, pain points, and potential solutions.
Research Summary & Recommendations: A document summarizing key learnings, insights, and actionable recommendations for designing our own compare feature and guest checkout.
Research Deliverables
Secondary Research was helpful for understanding the technical aspects of how to implement a compare table and guest checkout. It enabled me to get something in front of our target user quickly. It failed to tell me what our target user persona expected to see.
I had several surprises during our first round of usability testing. My initial assumption that compare tables had too much information and the user wanted it simplified was wrong. It's true, current compare tables are an eyesore. But the target persona wants to see all those details. I'm glad we caught this. Read on to see how users responded.
Research Conclusion
Design
Wireframes
Wireframes were based on my own assumptions without talking to our users directly. This is were things started to go wrong. Luckily, I was able to test the wire frames with our target user and correct things.
Additionally, I thought the user might want a guide to decide what type of bike : road, gravel, mountain and then was price point they should shop.
Compare Table
Image from Santa Cruz showing industry standard compare.
When looking at competitor's implementation, I saw all the part numbers and was like, what does all this mean? I thought the user might want a simplification of what the different bike configurations meant.
For example, I thought the user might want to know a 1x12 drive train was versatile and offered simple shifting.
Bike Shopping Guide
All these would be fine if our target persona were novice bike riders. As you'll see in the first round of usability testing, our expert users want to see all the details and more.
I thought it would be helpful. But it wasn't.
I know the suspense is getting to you. Let's get on with it and see what our target users had to say about my initial design.
Wireframes Conclusion
First Round of usability testing and design changes
In this section I show you the insights gained in the first round of usability testing. I’ll show you the findings and how this feedback influenced the hight fidelity prototype
Major Issue #1 - Compare table not detailed enough
“This is going to sound hash but I find the over simplification insulting.” - Karen
“The simple description obscured the detail. I want to see all the part numbers” - Adam
“I'm not going to trust someone else's judgement of what is important to me. Show me all the information and let me make my own decisions” - Ron
People want to compare line by line every part of the bike. The compare table should enable this.
I still think my initial assumption that the details are too much for a compare table. There needs to be some simplification of the compare process that doesn't sacrifice detail.
Where bikes are the same, only show one text and merge compare cells.
Where a subtle difference in the text exists, highlight the different or added text.
When new text is added highlight the additional text.
Different color highlight for any differences. Example NX one color, GX another color
Actions
The new compare table vs. the industry standard
Major Issue #2 - checkout page confusing
Guest checkout expected an email - add email
It looked like bike shop selection and express checkout were a group even though choosing a bike shop is required.
Would have like to see a step-by-step process in the checkout page and a progress bar.
Wasn’t sure if delivery was free or shipping costs would be added.
Move guest checkout to another page
Add email field
Change delivery from $0.00 to free
Number steps 1-3
Actions
Major Issue #3 - purchase confirmation confusing
Wasn't clear the order completed.
Not sure why? But this is why we test.
Change the look and feel of the confirmation page from the checkout page.
Change some of colors to differentiate from the cart pages.
Update the text wording to indicate the order was completed.
Actions
Second round of usability testing and design changes
Major Issue #1 - Order confirmation page
Would like to see confirmation that the order summary was sent to an email address
Add text letting them know a copy of the order summary was sent to an email address.
Actions
Major Issue #2- no clue about an estimated delivery date
Would like to see an estimated delivery when looking at the product page.
Would like to see an estimated delivery at order checkout.
Would like to see confirmation that the order summary was sent to an email address.
Add estimated delivery date throughout the checkout process - product page, checkout, order confirmation.
Actions
Major Issue #3- Checkout Page still a little confusing
Shipping details drop down was confusing. It conflicted with choose a shop for local pick up.
Remove shipping and return policy drop-downs.
Just list the return policy.
Actions
Major Issue #4 - Compare Tab
Wasn't clear how to open and close the compare tab
Wasn't clear they could click on the compare tab.
Not clear anything happened when the compare tab was clicked.
Wasn't clear that she should compare all bikes.
Not clear that the compare tab pops in and out.
Not clear that the size of the bike was populated into the compare tab.
Add icons indicating they can click on the compare tab to pull it out and in.
Change the style and wording of compare button so it doesn't match the add to cart button.
Pop out the compare tab when the user adds a bike to the compare tab.
Actions
Project Conclusion
My assumptions were correct, existing compare tables are an eyesore. The tables need cleaning up but not through simplification. Our user persona wants the details. They want to compare every part number.
I did just that. I designed a compare box that helps users see the differences while maintaining detail. I hope this new design becomes that industry standard, helping reduce cognitive loads when compare specification of high end bikes.
Please take a look at the final prototype here.