RoadRunner's User Journey
Sophia Huang
Sr. UX/UI Designer
RoadRunner
It Never Gets Easier, You Just Go Faster.
About this project
The client company sells high-end bikes mostly on their web experience. They need to enhance their browsing and checkout experience to greatly improve their product’s usability.
Challenge:
Improve the conversion from browse to completion of checkout to increase revenue on the product’s mobile-web experience.
Target User:
24 - 48 years old
The user base is 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.
My role:
End to end Lead Product Designer and focus on the shopping experience.
Rebranding strategy
Product strategy
User research & Analysis
Persona creation
MVP definition
Wireframes
UI Design & Prototyping
Brand development/ Style Guide
Usability Testing
Sprint Planning
Timeline:
Two Sprints.
Tools:
Sketch, InVision, Adobe Photoshop, Adobe Illustrator, Figma
Discover
Competitive Research
I studied industry leaders and did the analysis from all three competitions.
Findings:
- Hard to navigate if you are a beginner
- No detailed explanation of the sizing
- Can’t tell the differences between the different bikes
- Some site lacking online shopping experience and only link you to the stores
- Not enough detail photos and specs
Surveys
After study the industry leaders, I wanted to gather feedback from cyclists to understand their needs. I set up an online survey and asked them to fill it out. I recruited people from survey swap websites and cyclist groups on social media.
Findings
The most important things for bike shopping experience from the users’ insights:
- Quality
- Durability
- Price
- Review
- Value
- Heights
- Photos
- Measurements
The frustrations for bike shopping experience from the users’ insights:
- Limited options
- No compare option
- Not able to see it in person
- Not enough specs
- No detail measurements
- Feel pressure to decide right away.
Interviews
At the discovery phase of my project, I conducted user interviews in order to get a better understanding of the problem. I interviewed five cyclists online using Skype and Zoom.
Key insights from interviews
“ Give us average height and sizes for bike sizes.”
“ The biggest thing I see is not enough pictures showing the detail of the product.”
“ I would say more directions about what bikes are made for. For example, some are meant for mountains while others for long-distance on a flat surface. Also more safety and comfortable options. For example, customizing for a better seat with more padding and a description of why it’s better and benefits.”
“ Make products comparable on one screen.”
“ Probably some sort of try-at-home function.”
“It will be great to have a Size diagram for height. I always forget my size frame.”
“And I won’t make decisions online before I see the bike in person.”
Define
Affinity Map
After the interviews, I created an affinity map by distilling, categorizing, and prioritizing the research findings.
Empathy Map
Before creating personas, I made the empathy maps to visualize the user's attitudes and behaviors. What they say, think, do, and feel could vary, and it was critical to identify those differences.
Personas
Based on the empathy map and affinity map I set up persona. We referred to them throughout the entire product development process.
I created two personas. One for the beginner level and another one for the more experienced cyclists.
Beginner biker: Jason is willing to invest in good quality bikes and he spent a lot of time doing researches. He wants to test ride bikes first before he made the decisions for purchases.
Experienced cyclist: Ben is an experienced rider and he wants to know the detail specs so it can save the research time for him and comparison tool is an important feature for him to save time on the researches.
He enjoys ride mountain bikes over the weekend and joins local cyclist groups and events and be able to buy it online.
MVP & User Stories
I regularly check back with the user research and user personas to develop sets of user stories based on the features that users may want to see while using the app. The MVP was defined as the following:
- shopping
- test ride/fitments
- comparison
- customer support
User Journey
I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product.
Customer Journey
To understand how customers find and interact with the service we created a Customer Journey Map. And focused on the parts when they feel upset and anxious. These could be a chance for me to figure out how to improve their experiences.
Mapping Information Architecture
I used card sort exercise to allow users to identify the naming of the app’s main navigation menu. There are too many different ways to name the navigation, but there’s only one way for RoadRunner's target users to name it the way they want it. The result of this card sort is to improve readability, usability, and legibility of the navigation. I use Optimal Sort for this activity.
Based on the MVP provided, I used the user stories to create the cards that need to be sorted by the users. There are a total of 20 cards that covers the area of Discover, Shop, Test Ride, Shopping Cart, and Account.
Once the areas are identified, is the users’ job to group all the relevant cards and create an understandable and easy to use navigation.
Card sort result
The entire activity was done remotely using Optimal Sort from Optimal Workshop. I sent the card sort link to the 6 participants that participated in the user survey and interview. Since they are the identified target audience, no one is more suitable than they are to conduct this exercise.
Due to the scope of the cards expanded, there was some confusion during the exercise where users had trouble grouping them into only five groups. I moved the local events to discover based on the result of card sortings.
Treejack test
I created sets of user tasks and asked the users to conduct a series of the test using Optimal Treejack to verify if my user-flow works as expected. Treejack is extremely useful in this case because I could see exactly how to use goes through each step. Based on the results that local events and test ride events could be a little too similar so I changed “ local events” to “ RoadRunner Tour” to avoid confusion.
Ideate
Sitemap
Once the key content was organized by card sorting results, I continued to create a detailed sitemap to serve as the guidance to design user flow.
User flow 1: Account
scenario 1: existing user accidentally deleted the app and would like to log in with the reset app.
scenario 2: the first time the user wants to register.
scenario 3: user wants to go straight to shop without login or register.
Note: Users are given the option to login/ register using a social media account. They will be redirected to the social media page for authentication.
User flow 2: Purchase
scenario 1: user wants to test ride the bikes before making shopping decisions.
scenario 2: user wants to check on the specs before add items to the cart.
scenario 3: user wants to compare different bikes before adding to the cart.
User flow 3: Check out
scenario 1: existing user wants to add items to shopping cart and checkout.
scenario 2: new user wants to add items to the shopping cart and checkout as a guest.
scenario 3: new user wants to checkout without adding items to the cart as a guest.
Note: 1. If users click” Buy Now” or “Add to Cart” without choosing an option (ie: color, size, etc.), they will be prompted to do so before proceeding to checkout. 2. After the order is placed, guest users are given another chance to register in the order thank you page using the personal information entered in the checkout process.
User flow 4: Support
scenario 1: encounter problems while trying to buy a product
scenario 2: encounter problems in shopping cart
scenario 3: encounter order related issues
Note: 1. The app allows users to get help from four different areas: Product page, Shopping car, Account page, and Order/Return section. 2. Users can call customer service directly from the phone or send an email.
Prototyping
Sketches
With all the supporting data presented, I started to create iterations and iterations of hand-drawn sketches before diving into wire-framing and prototyping. These hand-drawn sketches are helpful to keep me from getting too detail into the visuals.
Wireframes
I moved on to creating wireframes in Sketch. I usually start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.
To save time and maximize productivity. I used wireframe UI kits to develop low-fidelity wireframes rapidly. This allowed me to create tons of clean wireframes in just minutes and get ready for user testing.
Validation
User Testing
I use Invision to create prototypes. It allows me to create interactive prototypes in seconds. Once the prototypes were deployed, I sent the links to the user to get a feel of the actual app for quick user testing.
Introduction
I have 4 people to try the prototype on Skype and Zoom. Participants are 30 years old male, 38 years old male, 38 years old male, and 33 years old female. I separate a few scenarios for users to test:
- Pick a bike from the home page and schedule a test ride
- Go over the beginner guide and compare bikes on the product page
- Go to the cart and ready to check out
- Register and check out
Interface design
Moodboard
I initial the style ideas from the mood board to gather the ideas for the RoadRunner.
Initial Design System
After organizing the thoughts from the brand platform, I made the brand style guide to ensure that these standards are consistent and uniform across platforms, including websites, mobile apps, and marketing collateral.
In the first step, I did a quick A/B test for the color scheme for the same interviewee group for bright and dark versions. And 85% of the people vote for the darker scheme.
UI Design
In the first step, I did a quick A/B test for the color scheme for the same group of the interviewee for bright and dark versions. And 85% of the people vote for the darker scheme.
I made the high fidelity mockup based on the style guide and brand platform. And the RoadRunner website is getting ready for final testings!
Validation
User Testing 02
At the beginning of the test, I briefly introduced the e-commerce site as a new high bike website and we would like to improve the user experience. There are no wrong answers.
After this, a test-scenario and a set of tasks, formed from our initial research and hypotheses, were read and assigned to users during the test. Total session set to be 15 minutes. Some of them are taking around 15-25 minutes with questions and feedback.
The tasks were as follows:
1. Find a TR series bike and add to cart
Find a mountain bike and go to the product page. And schedule a test ride on the product page.
2. Compare bikes on the shop page
Find the beginner guide and go over to the bike product page. And compare bikes on the product page.
3. Schedule a test ride
You want to feel the bike before you decide. Schedule a test ride of the store near you.
4. Go to the cart and check out
It’s time to check out. Go to your cart and ready to get your bike. And choose your preferred way to check out.
Any questions during the process?
Iterations
01 Navigation on the Shop page
Add a sub-tab indicator on the category page for easy navigation.
02 Sizing on product page
- Add a new dropdown selection for sizing selections.
- For returning customers the system will remember your size for the different series of bikes and generate a recommended size for you. E.g. "Recommended size will be LG."
- And size notes from product reviews so customers can easily tell if the product is in standard sizing.
03 Customer videos
Some of the users mentioned that the review video is really powerful. And they trust the honest reviews from other customers. So I added a customer's review videos section between Test ride and specs.
04 You might also like
Cross sale accessories and parts before customer check out. And save their time to go back and forth to look for items.
80
Iterations
32
Screens
21
cups of coffee
Features
Flawless shopping experience
Let us do the hard liftings and the researches for you! Highlights of the important features, sizing, recommended sizes, and specs. And you can even customize the parts and colors that will only be exclusive to you!
Test ride and Roadrunner tours
Customers will be able to feel and test the bikes before they decide to make the purchase! And meet others from RoadRunner community events.
Explore
The page for cyclist to find different guidelines for their needs. And you will be able to learn more about customers form the Roadrunner family!
What I've learned
The use of a user-centered design process gave me the ability to discover the motives, emotions, and needs of the target audience. The research helped me understand that beginner and the experienced cyclist has different needs and decision-making process while making the purchase decisions. So it's important to know different types of customers and solve the frustrations based on their needs.
Thank you very much for your attention and time!