E-Commerce Experience Concept Design
Client
Breakaway Bikes
Enhancing the mobile experience for guest browsing and product purchasing
Overview
Role
Breakaway Bikes is an e-commerce company focused on providing the best products to cyclists of all spectrums. Their mobile-web experience needs an overhaul. Improving the browsing and checkout experience will increase their product's usability
Research, Information Architecture, Interaction, Visual Design
Problem
Users are unable to determine which bike is best, leading to site abandonment and poor conversion rates
Goals
-
Provide product guidance to users browsing Breakaway Bikes
-
Customize the browsing experience to encourage confidence in user's decision to purchase products
Discovery
An analysis of the current state of Breakaway Bikes revealed noticeable issues within the site
-
The current home page does not offer any direction or cue to which bike is the best fit for the user
-
Reviews and ratings are not utilized to help users understand which products are best
-
Users are forced to sign up for an account if they wish to purchase a product. A guest checkout option should be included to navigate around this potential barrier
Discovery
Competitive Analysis of Trek, Amazon and REI - The industry leaders in cycling reveals the pain points and actionable features for the biking industry
Noticeable Key Features
-
Review system with star rankings gives users a better perspective of the product they are attemping to purchase
-
Email is captured at guest checkout instead of forcing the user to sign up as a member
Actionable Features
-
Highlighting the button activation to confirm a product has been selected
-
Implementing a star system ranking to help users refine their search
-
Optional guest checkout for users ready to purchase their selection
Discovery
User stories were created to help identify the key features for our users and Breakaway Bikes
1
-
Fully customizable bike experience for users to select every part of the bike
-
Virtual fitting for bicycle
-
Instructional and Educational videos
High priority features were divided into two colored subunits, to guide a user through a new feature to purchasing the product
2
Accessory features most commonly found in e-commerce experiences and necessary design elements to aid users
3
Experiences to be implemented in future updates
-
Guiding a user to build a bike
-
Guest checkout to avoid hesitation from the user
-
Review system to show product value from other users
-
Picking up your purchase from a product expert to help with questions
-
Crisp images to showcase products
-
Open layout to minimize overcrowding of product images
Design
Identifying the best user flow from the home page to final purchase
By utilizing a questionnaire, bike results will be user curated based on personal responses
Design
Creating lo-fi wireframes to identify pain points within the user flow and interface
-
Users will notice the Find My Bike button. This feature will guide the user to a product resulting from their responses from the questionnaire
-
Curated results appear by answering questions based on the users biking lifestyle
-
Review ratings provide the user with personal experiences from other users
-
Search results can be sorted according to the users needs
-
Simplifying guest checkout will let users purchase products without having to become a member of the site
Design
Hi-fidelity wireframes were created. We were ready to validate our research through usability testing
-
A sorting system lets the user narrow down the product they need in multiple views
-
The button for Find My Bike is yellow, bold and centered to attract users to utilize the feature if they need to find a bike
-
Find my bike questions are curated for cyclists of all levels
-
A questonaire delivers bike results to the user based on their answers. Offering a personalized experience to help the user find the best bicycle
-
Bike results are displayed with reviews and ratings to help guide the user in the best direction of finding the best bike
Validation & Usability Testing
Utilizing a hi-fidelity prototype to test with users
-
Guest checkout gives users an opportunity to purchase without opening an account
-
Minimal information creates a quick guest checkout experience
-
In-store pickup is an option to introduce users to local bike mechanics and have the bike assembled for them
-
Details are provided prior to the user purchasing their product
-
Minimal information creates a quick guest checkout experience
Design
Style Guide & Elements
Typography
Headline H1
Family: Roboto
Size: 24px
Weight: Bold
Color: #000505
Headline H2
Family: Roboto
Size: 10px
Weight: Semi-bold
Color Palette
Primary
Background
Accent
Accent
Button
Headline H3
Family: Roboto
Size: 12px
Weight: Medium
Breakaway Bikes
Breakway is a cycling term. It occurs when one or a small group of cyclists out in front of the peloton are attempting to distance themselves from the pursuing group
Design
Validation, Usability Testing & Findings
Usability Testing
-
5 Participants
-
Ages 30 - 68
-
Remote & In person interviews
-
Bike enthusiasts to non-riders
Findings
-
Personalizing the bike search experience with FIND MY BIKE, aids with presenting a viable product match for the user
-
Guest checkout is a valuable option to purchase a product without creating an account
-
Limiting the search results helps avoid scrolling fatigue
-
Product rating system helps users identify specific products
Results
The prototype offers an inside look at key additions
Lessons Learned
-
Find my bike guides users through a personelized product experience to help find the best fit for the user’s needs
-
Rating and review systems give users personal insight into products, encouraging purchase
-
Rating and review systems give users personal insight into products, encouraging purchase
Next Steps
-
Fully customizable bike shopping experience to offer complete control to the user
-
Virtual bike fitting to further enhance the personal experience of bike buying
-
Educational and instructional videos for adults and children
