Tandem
The Problem
Tandem is a company which sells bikes and related accessories on their desktop site. Based on their research, Tandem needs a redesign of their browsing experience as well as their checkout flow.
The product manager says 50% of users open an average of 7 pages and then abandon the site, without moving any items to the cart. Tandem hypothesises that users are unable to determine which bike is best based on relative features. They also noted that 70% of users who place an item in the cart do not purchase. Currently, a user must make an account in order to check out, causing users to abandon the site without checking out.
Goals
Conduct research in order to understand how to improve Tandems browsing experience
Create an effective guest checkout
Research
I began by conducting various kinds of research. This allowed me to understand how other companies currently address browse and checkout flows. I also researched companies currently selling bikes online to understand common trends.
Tandem’s target audience
24-38 years old
72% men
High income earners
Serious, discerning bikers
I made personas and user stories to continue to understand my target users experience, and an affinity map to determine commonalities between users.
Research Insights
Users want a tool that will allow them to compare multiple bikes at once
Users want a simple guest checkout experience
The Design
Based on my research insights, I began to sketch possible concepts. I also made a list of possible features to include, and sketched some of those too. Quick sketches allowed me to evaluate hierarchy, scale and content efficiently.
Left: Home Screen which scrolls down to a compare feature.
Right: Individual item page, showing thumbnails, add to cart, another possible layout for compare page.
I continued to sketch both digitally using an iPad and using analog materials. Once I had determined which screens to build and their content I kept iterating. First making paper wireframes and then creating and refining them in Figma
Left to right, wireframe to final mockup
The Solution
I redesigned Tandem’s browse to checkout flow based on user research. This redesign allows users to compare bikes, and a simplified guest checkout and member sign in page.
Browse page. Compare option under categories.
Individual item page Shows item details, Banner prompting the user to compare bikes.
Compare page Key specs and all specs are compared side by side. Option to add more bikes to compare at the top.
Add to cart confirmation pop-up. Shows relevant, recently bought together products.
Sign in/guest checkout screen Option to sign in, or check out as a guest and make an account later (if the user wants).
The Results and Next Steps
Results
After completing the mockup of Tendem’s brows to checkout flow, I tested it with users. I had them complete tasks and took notes on their feedback. Users liked the navigation of the flow, but everyone mentioned wanting to see more photos of people with the bikes, or an emphasis on user reviews. Users said they felt like the site wasn’t as personable or friendly, as it could be.
This redesign successfully addressed stakeholder goals, and met user needs however there is always room for more iterating.
Next Steps
The site would benefit from more illustrations or graphics, as well as continued refining of the compare page (example below). I’d like to continue to reimagine the others based on user feedback.
A potential next iteration of the compare page, focusing on user reviews.