The project
I was tasked to redesign the current checkout flow at Halfords, from the statistics provided by our UX research tools (GA analytics, Contentsquare and other data), we could see users were experiencing some issues when navigating the current interface before they reach the payment step.
The solution:
A redesign for the checkout journey to address known issues stopping users from checking out their orders
Research & Insights:
Contentsquare (Analytics on conversion)
I looked into some Contentsquare replay session, by targeting the part in the funnel journey where users need to go through.
Medallia: (feedback from post purchase surveys)
I searched for themes regarding checkout, frustration with payments and lack of clarity with the summary, some feedback was left in the last 30 days.
What is out there Analysis:
It was easy to look for some interesting design patterns on a checkout page, given how popular ecommerce websites in the same space exists on the Internet, I found some clothing brands to be quite user friendly , one theme that was very common , was to find your items in one column , and the summary on the other, with space for user options , (coupons, gift cards, home/collect in store delivery etc…)
Key themes found across many websites:
- Progress tabs for each step
- A summary column on the left or right side (desktop view) while a summary below on the mobile view
- Inputs being validated following the form flow
Mapping user pain points and design opportunities:
I mapped on a figjam file the checkout journey and the pain points I have seen in the videos from session replays, also the bugs and improvements that could be made after going through the journey myself on a test environment.
Design opportunities:
- Difficulty to fill the initial details form:
- Users were receiving error when filling their details, these error were flagged when the user presses ‘Submit’ at the end, instead of per field, which leads to a disappointment feeling at the end if something is missing
- Finding their address was not always working, and users seems frustrated when entering their address manually
- Unclear info in the summary:
- Users were reporting to be unsure what items are in their basket, the overall total, and whether discounts had been applied (Order summary)
- Login and Signup issues:
- As reported by some users and by looking at internal logs, users were experiencing a block to proceed when trying to login, or trying to create an account which already exists. An existing user would try to use their registered email as guests however the current system would not allow this as the account already exists, so we allowed users to use their email as a guest.
- Also, some users mention they use social logins sometimes.
- Overall cleaner layout
Technical feasibility
After a few initial ideas, I met with the engineering team to validate my solutions from a tech perspective.
Proposed user flow
Key Features for the prototype:
- Inline validation in fields as the user fills the form.
- Order summary interactive element.
- 3rd party logins methods as an alternative to our own (Apple, Google, Facebook)
User Testing & Feedback
Usability Testing:
For testing I used Userzoom, the goal for the test was to see if participants would manage to get to the confirmation page easily, given a variety of mixed scenarios, or mixed basket contents.
I set up a usability study where you can watch participants go through your prototype , and listen to feedback as they go along.
Halfords have a few options for their customers, such as click and collect vs home delivery and also some users may want to include gift cards or discounts before paying.
It was reported during the usability test that users expect the order summary to be clear and visible with any discounts or coupons applied.
Outcomes:
- Participants reported to be a straightforward experience
- Feedback was positive regarding the tabbed approached
- Users like the summary concept for mobile
- Some participants reported inline validation made the process quicker
Some of the work:
These are some screens showing the steps a user will see after adding a product to their basket, as it is often seen in many e-commerce websites, the user will need to input their details before payment, select a few key elements on the product and choose their delivery method.
Screenshots for mobile:
Screenshots for desktop:
Team feedback and share
A common practice in my process is to share with the rest of the team for a round of internal feedback in case I have missed important details outside my sphere of competence.
Conclusion
Users reported positive feedback regarding the experience when looking for the summary items
an A/B test was launched with Webtrends on the live site during 30 days, it increased conversion significantly by around 36% percent.
Overall the project was a learning experience like many others.