PROJECT: RoadRunner Bicycles eCommerce Mobile Website

MY ROLE: User Experience Research and User Interface Design

OBJECTIVE: RoadRunner sells bikes through their mobile web application. Seeing low sales, they need to enhance their browsing and checkout experience to improve the application’s usability.

THE PROBLEM: Improve the conversion of browse-to-purchase during the checkout process.

PROCESS: Discover and research the problem space; design in low fidelity; validate through testing; design in high fidelity; validate through testing; and iterate to high fidelity.

IMPACT: To improve the overall bike buying experience for RoadRunner customers while simultaneously increasing the browse-to-purchase conversion rate.

PROJECT OVERVIEW

RoadRunner is an eCommerce brand that sells bikes through their mobile web application. Seeing low sales, they need to enhance their browsing and checkout experience to improve the application’s usability.

The Project Manager (PM) sees that there are two primary problems with the end-to-end shopping experience. First, they believe that users are unable to determine which bike is best for them based on relative features.

Second, based on their own data, most users who place a bicycle in their shopping cart abandon the transaction at the site registration page; currently, users are required to create an account to complete the purchase. The PM would like to integrate a guest checkout process that captures email addresses.

The primary goal of this project is to improve the conversion of browse-to-purchase during the checkout process.

To begin, I completed an Industry Study to understand patterns utilized by direct and indirect competitors, then dove deeper into a Competitor Analysis to fully understand the online bike-buying marketplace. To continue Primary Research I employed a Google Forms survey to gain direct feedback from users based on the Industry Study and Competitor Analysis, and concluded with a Card Sort to establish the importance of certain categories as well as their hierarchy.

Once I had a baseline of understanding of the problem space I devised an MVP and defined core User Flows to influence the initial Screen Sketches. Following Sketches, I Wireframed the screens and built a prototype in order to conduct usability testing.

After testing the Wireframe prototype I designed a Style Guide and continued to produce Hi-Fidelity screens based on feedback from the Wireframe User Testing. Once Hi-Fidelity screens were completed I designed a Hi-Fidelity prototype and testing plan, then iterated the findings into a Final Iteration ready for Implementation.

This project took approximately six weeks and addressed Primary Research, Secondary Research, Information Architecture, Wireframing, Hi Fidelity Design, Prototyping, and User Testing.

RESEARCH

The Research methods I utilized in the discovery stage of this project were:

Industry Study & Competitor Analysis
User Survey
Card Sort

Quick sketch of how the research methods lead to the MVP

The Industry Study and Competitor Analysis followed the same research structure and aimed to determine patterns, avoidances, and elements that could be implemented into RoadRunner.

The indirect competitor companies studied were Amazon, Target, Brooks Running, eBay, and REI.

For direct competitors I studied Trek Bicycles, Specialized Bicycles, Canyon Bicycles, and Surly Bikes.

Key takeaways from this process were to avoid using too much text, ensure visual consistency between content areas, the incorporation of a bike fit feature, and to maintain consistency in touchpoint implementation.

Next I implemented a Google Forms Survey to better understand the buying habits of cyclists. I asked a series of questions focusing on purchasing habits, retail sources, cycling habits, and purchase history.

Key takeaways from the survey:

Research is very important to users
Brand loyalty is common
Lifestyle branding and tone of copy is very important to the user
Respondents didn’t just ride bikes; they enjoy a broad range of outdoor activities

As the last part of my discovery phase I employed a Closed Card Sort using Optimal Workshop. I also used a screener to make sure all participants met the persona of an individual who had purchased a bike valued at more than $1000 in the last five years.

The purpose of using a Card Sort is to clarify the users’ perception of site hierarchy in both content areas and categories.

Card sorts tend to be a relatively minimal ask of participants and they are invaluable in establishing the Information Architecture of a product.

INFORMATION ARCHITECTURE

MVP

RoadRunner Bicycles is an eCommerce application that aims to improve the overall research-to-purchase experience of discerning bicycle consumers. To accomplish this goal we will incorporate high quality imagery coupled with descriptive and informative information about our bike models. To increase the browse-to-purchase conversion rate the checkout process will initially capture the users email address rather than first prompting user account creation.

User Flows

User flows are a visual representation of a specific route a user might take through a website or application in order to achieve a goal. In the case of Roadrunner Bicycle Company two user flows are necessary to increase our user conversion rate, that of researching the bicycles we sell and then the process of actually completing the sale.

The primary focus of the User Experience User Flows is to inform the design process and to dictate what user paths are necessary to achieve our goal. Our user flows are informed by the research that has been conducted thus far, including a survey of users who suited the persona, a competitor analysis of six companies, and a closed card sort.

First, the Product User Flow acts as an exemplar of the steps a user might take while they were choosing a specific bicycle model to purchase.

Key steps include:

• Selecting the “Bikes” tab from the header

• Choosing a particular type of bicycle which is a “Gravel Bike” in our scenario

• Selecting a specific bike model

• Engaging in the resources and information for that model

• Deciding on a size then color of the bicycle

• And lastly, adding to the cart, navigating to the cart page, and finally checkout.

The Checkout User Flow depicts the process a user might take if they did not have an account with Roadrunner, as this is one of the main concerns and potential problems with research-to-purchase conversion.

When continuing to checkout users are now first asked for their email address then given prompts to either enter their login information, create an account, or in the case of this user flow, to continue as a guest.

Sketches & Sketching Process

Crazy 8 sketching is a fun…and fast…way to ideate quickly and effectively without getting caught in the details. The challenge is to draw eight ideas in eight minutes, exciting!

The sketching process for RoadRunner was rapid and exploratory.

First, the “Crazy 8” process was utilized to quickly establish what elements would be included in the next sketching stage.

Screen sketches focused on the initial landing (home page), page overlays, the bicycle product description pages, and the core elements of the checkout process.

Wireframing Process

Next in the design process is wireframing. To produce the wireframes for RoadRunner Bicycles we utilized Figma and a self-designed UI kit to make changes and iterations more streamlined.

RoadRunner’s wireframe UI kit included:

Logo
Active and pressed state buttons
Text input areas for address and credit card info
Screen Header
and numerous other elements to streamline the wireframing process.

The wireframe screen were scrollable and clickable, but maintained a lean appearance to allow the user to focus on key interactions based on the User Flows.

Visual of how the interactive prototype appears in process.

The end goal of the RoadRunner Bicycles wireframes was to produce an effective low fidelity prototype. In all there were 26 unique wireframe screens that included scrollable and clickable interactions.

Wireframe Testing

The objective of wireframe prototype testing is to further understand the assertions made during the initial design process. The results of the testing and interviews will influence the forthcoming high fidelity mockups and prototype.

Testing participants were chosen from individuals who both fit the persona and had participated in the initial survey and closed card sort. Five individuals were scheduled for 30 minute meetings wherein a series of questions were asked to help to better understand the problem space. Following the interview each participant was asked to complete the process of finding, selecting, and buying an entry level gravel bike as a guest user from the RoadRunner Bicycles web application.

Interviews occurred with five participants during the week of March 22nd. Each interview occurred as moderated/remote using Zoom video meetings.

Testing and interviews were effective and informative. Users appreciated the simplicity of the RoadRunner prototype and that they were able to easily navigate from browsing to purchase; with this in mind we intend to maintain the lean approach and minimalist aesthetic when entering the high fidelity design stage. No major changes will be made to the general interface of the application.

Key Takeaways

Maintain the lean aesthetic.
Testers did not like when they were inundated with ads and requests to join accounts or email lists.
Research and information need to be at the forefront of the design.
Detailed images are very important in the research stages of bike purchasing.
Avenues for seeing bikes in person are important to users; maintaining a connection with dealers is important for the credibility of the brand.
The incorporation of fitting guides, images, and measurements could increase users comfort with purchasing a big ticket item online.
Participants liked to feel like they were “part of the club.” Lifestyle images, branding, and “reader’s rides” are a good way to boost this image.

HI-FIDELITY DESIGN

Style Guide & Accessibility

The Style Guide for RoadRunner Bicycles established the main font color as International Orange (#C43131).

The primary font for the application is Montserrat, with styles ranging from ExtraBold to Regular and sizes from 36px for Header 1 (H1) to 14px for Body 3 (B3).

Colors included Black, Sage, Platinum, International Orange, Auburn, and Burnt Umber.

To ensure color accessibility we utilized an Eight Shapes Contrast Grid from Eightshapes.com.

Hi Fidelity Screens

Prior to beginning the initial High Fidelity Screens we established a UI Kit based on findings from the wireframe testing and the UI Kit used for the low fidelity designs.

Hi Fidelity Iteration 1

Iteration 1 of the High Fidelity screens were based on data gained in the wireframe testing interviews.

High Fidelity Testing

The objective of the Hi Fi prototype testing is to verify appearance, functionality, and accessibility decisions made during the progression from wireframe to high fidelity mockup. The results of the testing and interviews will influence changes made to the high fidelity screens prior to being prepared for development.

Testing participants are individuals who have been participating in testing during the duration of this project thus far.

Participants were initially chosen from individuals who both fit the persona and had participated in the initial survey and closed card sort. Five individuals were scheduled for 30 minute meetings wherein a series of questions were asked to help to better understand the problem space.

While the wireframe testing explored bike and online buying habits the high fidelity prototype testing focused primarily on the functionality and accessibility of the application.

Interviews occurred with five participants during the week of April 5th. Each interview took place as moderated/remote using Zoom video meetings.

Testing and interviews were effective and informative; participants appreciated the lean checkout process. There is some concern over the “length” of the scrollable area on the main and bike pages, which can be corrected by modifying the button appearance. Button appearance is somewhat confusing and will need to be addressed. Other minor changes will occur to aide in the simplicity of the web based application.

Hi Fidelity Iteration 2

Key Takeaways Implemented in v2:

Modify button style; single function button (as opposed to dual). This will also reduce overall “length” of the scrollable page.
Remove “Learn More” options throughout.
Add line under jump bar text to further identify current area. (4px line)
Address clickable text in footer.
Address button size/configuration in footer.

PROJECT SUMMARY

The online bicycle marketplace is a large and rapidly growing segment of the outdoor recreation industry, especially due to circumstances related to the COVID-19 pandemic and ensuing outdoor recreation boom. Traditionally, bicycle brand manufacturers have relied heavily on brick-and-mortar local bike shops (LBS) to maintain and fulfill the supply chain and this reliance on traditional retail shows heavily in the current marketplace as evidenced by our initial research and subsequent interviews.

The new RoadRunner Bikes eCommerce platform aims to build on the tradition and culture of traditional bike shops while at the same time removing the hesitation and stigma of buying a bike online and sight-unseen.

Next step for this project would include :

Live and in-house chat or phone support to alleviate buyer hesitation; informative and image-filled descriptions of bike styles and models
The ability to safely and securely check-out without creating a user account
The incorporation of a bicycle fit-finder to help users decide which bike is right for them
And easy…and free…returns if a purchased bike didn’t work out.

Thank you for reading! If you have any questions or would like to discuss this project further please don’t hesitate to reach out through email, LinkedIn, or through a video call below.