Ryan Wichtendahl
Slipstream: A Superior Shopping Experience for Cyclists
Introduction
​
How might we tailor an e-commerce platform for a specific type of product? A company that sells bikes was looking to improve the usability of the browsing and checkout experiences on its mobile site. I worked with users over two rounds of prototyping and testing to create Slipstream, an efficient way for cyclists to purchase their ideal bike. The site utilizes familiar interactions from online stores as well as strategies unique to bikes and accessories. As the designer, I sought to increase Slipstream’s sales by making an intuitive shopping experience for experienced and novice cyclists alike.
Empathize: Precedent Study
​
The product management team recommended I begin my research by examining the shopping flow of three competitors: Amazon, Target, and TrekBikes. Amazon and Target sell a variety of products including bikes, and both do a great job at streamlining the browsing to checkout experience as well as recommending additional products. However, their product specifications and customization options are kept general so they can be used for any type of item. TrekBikes only sells bikes and accessories, so it contains features much more tailored to cycling, but the shopping experience is less straightforward. The right product should be able to strike a balance between efficiency and customization.
Familiar layout with option to bypass checkout
Intuitive layout with recommended item popups
Cycling-specific filters and option for guest checkout
Empathize: Heuristic Evaluation
​
To gain a deeper understanding of usability issues with mobile bike sales, I conducted a heuristic evaluation of five key factors impacting the browsing, shopping, and checkout experiences. I examined TrekBikes as well as two leading online cycling retailers, BikesOnline and JensonUSA.
Wisconsin-based bike manufacturer that offers its own line of cycles and accessories
Specialty retailer that sells directly from manufacturers exclusively online
Online retailer that offers bikes, components, apparel, and accessories with customization
A theme between the three sites was that they appeared to be designed as desktop interfaces and adapted to mobile with minimal intervention. Principles such as margins and hierarchy could be improved, and this affected some of the usability issues I encountered.
All three sites struggled with letting users move back and forth between pages. I had to use my phone's back button, losing progress.
The desktop to mobile conversion resulted in tight margins and hierarchy issues. There was also irrelevant information on some screens that couldn't be hidden.
It was pretty clear how to fix an error once it was encountered. Red text or banners would appear next to incorrect fields, or buttons would be untappable if information had not been entered.
All three sites struggled with letting users move back and forth between pages. I had to use my phone's back button, losing progress.
Define: Persona
​
The product management team explained that the site's user base is a majority men in their 20s and 30s with a relatively high income and extensive cycling experience. They take bikes very seriously, and want to invest in the perfect ride for their unique lifestyle.
Define: Problem Statements
​
I was also provided with some key insights about user pain points. About half of users abandoned the site without adding an item to their cart, suggesting they weren't able to find the right bike or customize one to their liking. Nearly 70% of users who did add something to their cart did not end up purchasing it, and left the site when they encountered a signup page. The primary goal of the product management team was to improve conversion from browsing to completion of sales. This included adding a guest checkout feature in addition to improving usability. Based on the results of my competitive analysis, I understood that I needed to make a mobile-friendly site that offered the proper balance of efficiency and customization.
Ideate: User Flows
​
I began the ideation process by creating three user flows beginning at the point where a user has selected an item to view. The first flow, adding an item to the cart, contains the most options for customization and interaction. The shopping cart and checkout flows focus on providing an efficient path towards a sale.
Several customization options allow users to create their perfect bike
Site prompts users to add extra items and provides options for editing items from the cart
Ability to use other accounts to streamline form filling
Several customization options allow users to create their perfect bike
Ideate: Wireframes
​
When designing the site's low fidelity prototype, I sought to provide a familiar experience. The item page was set up with a full-width photo gallery at the top, followed by important labeling information. Below that were expandable customization options, allowing users to create their perfect bike or hide lengthy text fields for faster scrolling. The cart page suggested adding related items, and the checkout page included a guest checkout feature to improve completion rates.
Familiar layout with expandable menus
Popup windows to reduce cognitive load
User can edit any part of their purchase during the review phase
Familiar layout with expandable menus
Test: Low-Fidelity Prototype
​
I brought the low-fidelity prototype to four users for testing. Two of the tests were conducted remotely, and two in-person. I guided participants through the task of purchasing a bike, but did not provide a concrete set of steps. I intended this round of testing as a conversation about what features were needed and how usability could be improved. I came away from the tests with three major findings.
Issue 1: Customize option hidden
The ability to customize a bike is a primary feature of the site. My focus on allowing information to expand and collapse had led me to hide the customize option behind a dropdown menu.
Issue 2: Name should be recorded
By trying to reduce the number of steps in the checkout experience, I had removed the requirement for first and last name from the form fields. These are integral verifying address and payment info.
Issue 3: Unnecessary card graphic
The payment information screen included a large graphic intended to help users identify key numbers on their credit card. The scale of this image was too large, and was made unnecessary by providing example text in the form fields.
Prototype: Brand Development
​
The product management team asked me to brand the site in addition to improving its usability. They wanted something that was "savvy, focused, serious, and dependable," and expert in the field who is knowledgeable about the latest cycling trends. I chose to call the site Slipstream, a term for the draft created by a passing cyclist. I kept the logo, color scheme, and typography minimal to evoke a sleek, expensive feel.
Prototype: High Fidelity
​
Utilizing the feedback I gained from user testing, I improved the wireframes into high fidelity screens. A primary change was moving the customize button outside of the collapsible product specs menu. I removed the floating add to cart button and placed it at the bottom of the page, grayed out until the user had made each required selection. I also added two rows of horizontally scrolling products at the bottom of the page, which users could add to their cart with a single tap.
Expandable fields for greater customization
Dropdown menus for each option
Reminds users what email to expect a receipt at and prompts them to shop again
Expandable fields for greater customization
Test: High Fidelity Prototype
​
I found four more participants to test the high fidelity prototypes. This round of testing featured a highly controlled list of tasks. I told each participant exactly what aspects of the bike they should customize, in order to evaluate the usability of key interfaces. Users commented that the site was overall easy to use due to its familiar structure. As with the first round of testing, I came away with three key insights.
Issue 1: Confusing delivery options
Some users questioned why they needed to choose a delivery option and enter their ZIP code before adding an item to the cart. Adding to the confusion was the checkout screen, which asked them to enter their ZIP code again as part of the shipping address.
Issue 2: Customization Redundancy
The customize button brought a popup of product specifications. Users had to tap on the specification, view a dropdown menu, tap what they wanted, and tap confirm to leave the popup.
Issue 3: Popups are too small
The popup menus for selecting a bike size for customizing were smaller than they could have been, making their text difficult to read or tap.
Prototype: Revised High-Fidelity
​
Utilizing the feedback from my second round of testing, I made edits to many of my high fidelity screens. First, I removed the delivery options from the item information screen. Next, I streamlined the customization feature by making each product specification its own popup without a separate button for confirming. I also made each popup closer to the full width of the phone screen to increase the size of text and buttons. Other minor changes included changing the color selector from a white circle to a thick outline, adding section labels to the checkout flow, and improving the tap area of icons.
Each specification is directly editable. The delivery method option has also been removed.
Size increased, and confirmation button removed. Popup disappears when user selects an option.
Each specification is directly editable. The delivery method option has also been removed.
Analyze: Results
​
The improved mobile site for Slipstream is a step towards accomplishing the product management team’s goal of increasing sales. Its browsing and checkout flows have been streamlined, including the addition of a seamless guest checkout experience. Users were able to easily purchase a bike and add accessories to their carts, edit items without losing progress, and complete the purchase without the extra effort of creating an account. Experienced and novice users alike should be able to understand Slipstream and enjoy shopping with it.
Analyze: Future Development
​
To further improve the site, I would add levels of visual detail such as diagrams or videos, which would help users better understand the products in context. I would also like to add a payment breakdown and estimated delivery date to the purchase review screen, as this is an important feature found on other sites. Beyond the scope of the prototype, it would be important to design and test features such as comparing items, searching, and filtering results. I worked on only a small part of the overall shopping flow, so there are still many opportunities for setting Slipstream apart from other cycling shops.
Conclusion
I was tasked with creating a trustworthy shopping experience for cyclists. Slipstream needed to improve its browsing and checkout flows in order to encourage more users to complete their purchase. I examined competitors to gain a deeper understanding of how this could be done, then worked directly with users through multiple rounds of design and testing. The current result is easy to use and efficient, with familiar interfaces and features unique to bike sales. Slipstream aligns the needs of both business and customer to create a superior shopping experience for the next generation of riders.