How might we improve the checkout flow for high end bike e-commerce sites?
Kickstand began as a design challenge based on the prompt to help improve the checkout flow of a biking e-commerce site.
This was a capstone project for Springboard’s UX/UI certificate.
Problem
Data from a biking e-commerce site shows:
- 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart.
- Additionally, 70% of users who place an item in the cart do not purchase.
- Data shows that users abandon the cart at the registration page.
How can I improve this flow and retain more customers?
Solution
To solve the problem of users opening many product pages and then abandoning the site:
- I included a compare chart within the flow where users can add products as they shop. Then quickly compare specs to choose the best one for them.
To solve the problem of users abandoning carts:
- I included a guest and express checkout in the user flow.
Tools
- Miro
- Figma
- Figjam
Team
- 1 UX designer
- 1 project manager
My Role
- UX design
- UX research
- User test facilitator
Timeline
- Overall: 3+ weeks
- Discovery & Research: 1+ weeks
- Design & testing: 2+ weeks
My Design Process
REsearch
For this project, I began research with an assessment of industry leaders; Target, Amazon, and Trek Bikes. Once I got a feel for the industry standard for bike checkout flows, I interviewed users to learn what these industry leaders might be missing.
Interviews
During the ideation phase of the project, I conducted user interviews to build new personas and to inform the design. I prepared an interview script with 15 open-ended questions, focusing on our target audiences’ values, motivations, and past experience buying bikes. In 3 days, I recruited and interviewed 5 users remotely over zoom. I referenced the user interview findings throughout the entire design process.
Affinity map stickies grouped into common themes found during user research.
Sythesis
Based on user interviews, I created an affinity map to assess users needs, wants, and pain points. The data gained from interviews gave important insight to the design. Including that; our hypothesis was not entirely correct.
The PM hypothesized that the reason people abandoned the cart at registration was because they would prefer a guest checkout option. However, nearly all of our interviewees said that if they were buying an expensive item, such as a high end bike, they would like a “relationship” between them and the company. Because of this insight, I included a remember this information for faster checkout checkbox so users can quickly checkout through guest checkout but then also feel secure in their purchase and their relationship with the shop.
Personas
I created 2 personas based on findings of users’ goals, needs, experiences, and behaviors. Personas were especially important when designing the hi fidelity mockup as it helped me keep in mind the varying user bike knowledge base and the want for a visual “in person bike shop” feel when shopping for a nice bike.
I made two personas, Jack and Steve to encapsulate the bikers I interviewed.
Site Map
With the business goal in mind, we make sure that our users reach the checkout screen without any issues. So, I sketched a site map to identify opportunities for improvement. In the existing flow, users must put in their name, phone number, email, and password before they can even begin the checkout process. My goal was to simplify this flow and bring users quickly to the end of the checkout process before they abandon their cart.
Wireframes
I began the design process with low-fidelity wireframes in Figma to accelerate decision-making through visualization without losing time. My wireframes were based on the initial user interviews, the business goal, and the site map.
They each pointed to the fact that:
- the checkout process could be more streamlined
- users needed a better way to compare bikes.
I came back to these first iterations throughout the entire design process to make sure that I didn’t lose sight of my primary goals and ideas.
Usability Testing
I created a fully-functional, high-fidelity prototype of the flows using Figma. At the same time, I started recruiting subjects for the test who fit our criteria. I completed 5 usability tests in the first round using the wireframes and 5 after iterating on the issues that I identified:
issue 01
Users were unable to find the compare products page. Nearly every user I tested had this issue.
solution 01
I played with a few solutions from adding a compare button to the menu to adding one on each product card. From a quick survey from user’s tested, I found there was a clear preference for a bottom bar button on each page.
Next Steps
The brief specified a mobile web user experience, but from my user research I found most users feel more comfortable buying an expensive purchase like a bike on a computer. Therefore I would make a desktop site in the future for this brand.
More case studies
