Checkout
Optimisation
This project involved designers from multiple fascias (brands) across Frasers Group, where I acted as a design advocate for FLANNELS.
Optimising the checkout UX boosts conversion rates, reduces cart abandonment, builds trust, and increases customer satisfaction and profits.
Team
4x Design Team members
4x CRO Team members
Stakeholders across the buisness
Timescale
Overall: 1 month
Discovery & Research: 2 weeks
Design & testing: 2 weeks
Tools Used
Figma
Content Square
User Testing platform
Design Process
01
Discover
-
Gathered data on Content Square
-
Competitor analysis
-
User interviews
-
Stakeholder workship
02
Define
-
Crafted problem statements and hypotheses
-
Prioritised features based on user and business needs
03
Design
-
Developed high-fidelity prototypes
-
Wireframed potential solutions
-
Created user flows
-
Conducted design reviews and iterating on ideas
04
Develop
-
Collaboration between designers, developers, and stakeholders
-
Quality assurance (QA) and usability testing
-
Tested multiple outcomes with CRO team
05
Deliver
-
Monitored user feedback, performance, and analytics
-
Planed for future iterations and updates based on user data
Discovery Phase
Before the workshops, we gathered data from Content Square and User Testing, reviewed the current user experience, and formulated hypotheses and problem statements. During the workshop, we presented our findings to key stakeholders, helping to focus the design process on solving the most critical issues. We concluded the day with test ideas and quick-win action points.
Problem Statement 1:
Users are trying to use the checkout flow in a non-linear fashion.
Insights and Observations
By adding areas that users are tapping on clickable, then users will be able to navigate more effectively, reducing frustration and potentially increasing transaction completion rates.
Problem Statement 2:
How might we make it easier for users to view their orders?
Insights and Observations
If we make the action to view the contents of the bag clearer, then users will engage more effectively with their cart, because competitors with clearer actions see better user interactions.
Competitor Research
At this stage in the process we didnt want to solutionise too much, but to keep design options open.
Problem
Statement 3:
Visitors who are 'logged in' to the site transact at a greater rate.
Insights and Observations
By adding earlier prompts and 'quick' sign-in options, more users will log in earlier in the buying process, which will increase conversion rates, because logged-in users are more likely to complete purchases.
Competitor Research
Here are some options to show how our competitors make it easier for a user to check out while logged in.
Quantitative data has been provided by the CRO team but it informs my later deisgns
Day Of The Workshop
1. CRO & UX Lightning Talks
We divided into groups from various areas of the business and presented the data mentioned above. In total, there were eight problem statements.
2. Crazy 8 Sketches & Dot Voting
We formed teams, sketched out our ideas, and voted on our favourites. (In the next session, we did this in Figma to save paper.)
3. Group Presentations
Everone shared their favourite design with the team and received feedback.
Designing
Problem Statement 1:
Users are trying to use the checkout flow in a non-linear fashion.
Test - Horizontal Progress Bar
Hypothesis
Based on the data around high click reoccurrence on un-clickable elements (delivery, payment), we believe that adding a progress bar to the top of the checkout will cause a decrease in rage clicks.
We will know that this test is successful when we see an increase in transaction rate or a reduction in time spent at checkout. This will be good for customers and our business because more customers will convert.
Problem Statement 2:
Visitors who are logged in transact at a greater rate.
Test - Product Carousel at Checkout
Hypothesis
Based on the high click re-occurrence on the basket accordion, we believe that if we amended the mini-bag accordion to a carousel, displayed within an accordion at the top of each checkout step, the customer will be able to view and amend their basket more easily.
This will cause a decrease in the checkout exit rate. We will know this is successful when conversion per click and overall CR increases. This will be good for customers and our business because we will decrease abandonment in checkout.
Problem Statement 3:
How might we make it easier for users to view their orders?
Test - Log in VS Guest CTA
Hypothesis
We believe that by clearly differentiating the login options and introducing different certification authorities for guest checkout and returning users, we can clarify the two user journeys and ensure the appropriate selection is being made.
We will confirm this when we observe a higher checkout completion rate and a reduction in drop-offs during the login process.
Next Steps
Our next steps involve implementing these designs and conducting an A/B, in which 50% of users will experience the new design while the other 50% interact with the existing version. This will allow us to measure the impact of our changes and ensure data-driven improvements.
Planned Enhancements:
• Redesigning the mini-bag experience to make it more intuitive and reduce cart abandonment.
• Introducing a clear progress indicator to improve transparency and reduce user frustration.
• Refining the login flow to create a smoother experience for both guest and returning users.
Through these enhancements we aim to create a more seamless and user-friendly checkout experience that drives higher engagement and conversion rates.
View More Case Studies
At FLANNELS, we are constantly improving the website. Here are a few highlights.
Hub for discovering events hosted in the FLANNELS Oxford Street London store.
Designing a platform for landowners to discover and enrol in carbon offsetting projects.
Hub for discovering events hosted in the FLANNELS Oxford Street London store.
Design Passion project- Providing a platform for users to make, organise and schedule events.
Hub for discovering events hosted in the FLANNELS Oxford Street London store.