My role
Research, analysis, prototypes, wireframes, product design, design systems, user-testing.
Methodologies
Usability testing, heuristic analysis, competitor research, user journey mapping.
Timeframe
March 2024 - May 2024
Introduction
Overview
A UX design brief, set by UX agency Foolproof, challenged students to address customer journey issues within the checkout process of a chosen online retail platform. Common problems in online checkout flows include hidden costs, confusing delivery options, unclear messaging, excessive steps, information overload or lack thereof, and a disconnect between the online and physical store experience.
This project focuses on "The Range," an online retailer whose website presented users with a challenging and confusing journey during the checkout process. The aim was to develop a user-centred solution that would implement a more streamlined process for each delivery method, thereby improving the overall user experience.
.jpg)
Problem
The Range website currently has an outdated checkout process with confusing delivery methods that are hindering the user experience. The delivery process which starts at the product page is prone to errors that are challenging to pinpoint and trace back, resulting in user frustration and confusion. These inefficiencies not only risk user abandonment of the website but also increase the likelihood of data loss or user errors.
Solution
The final product effectively enhances the existing user journey by implementing a more streamlined process for each delivery method. This organised flow makes it easier for users to complete their tasks and proceed to checkout smoothly, reducing the likelihood of errors along the way and giving the user control and freedom of their actions.
Stage 1
Research
In this project, I used heuristic analysis, usability testing, and competitor research to identify problem areas where users might encounter difficulties.
This comprehensive research approach revealed several critical issues within the customer checkout journey. The primary challenge centred around the placement and functionality of delivery options. Confusingly placed methods and error-prone execution created the risk of data loss and user frustration.
Out of stock problem
During heuristic evaluation, I identified an issue with the click and collect delivery method. If a user selected a store with an item out of stock, they could proceed without sufficient warning, except for a small red circle and tiny grey text indicating "out of stock".
This critical mistake which could be easily overlooked by the user might lead to confusion and frustration if they proceed through the checkout process unaware. It's worth noting that the delivery selection segment was only accessible in the basket view, with users unable to choose their delivery method on the checkout page.
Multiple items, different delivery methods
Another intriguing aspect I discovered was that the website provided different delivery methods within the same checkout journey, allowing users to have items delivered and collected in one flow. While researching competitors, I found that this approach was not commonly used.
An issue in this journey is that users cannot edit their delivery choices. This means that if a user initially selects collection instead of delivery, they would need to exit the checkout page and return to the basket view to make changes.
Stage 2
Designing
During the design stage, the primary focus was on resolving issues encountered throughout the user journey, from navigating the products page to completing the checkout process. In my redesign approach, I aimed to enhance the journey by assigning each page a distinct purpose and relocating delivery method options to the checkout page. Through iterative refinement, I also enhanced the overall visual appeal by implementing a straightforward design system consistently across all pages.
Addressing user journey problem
The problem with the original user journey to the checkout was that the delivery methods were introduced too early in the flow, making the user choose their delivery method before actually proceeding with their products to the checkout.
To tackle this issue, I decided to introduce delivery method options during the checkout stage. This allows users to compare their choices and make any edits they wish before finalising their checkout.
Outcome
The redesigned app addresses all previously identified user pain points while maintaining a consistent visual identity throughout the user journey. A key focus was streamlining the checkout process by improving the information architecture. This involved consolidating unnecessary pages, prioritising essential information during each step, and providing clear instructions for completion. Recognising the importance of real-world scenarios and offline functionality, I implemented features like in-store availability checks, empowering users to make informed decisions at each step.
Final usability test
User testing of the redesigned checkout flow yielded valuable insights. While overwhelmingly positive, it also sparked constructive conversations about common checkout pain points. Compared to the previous design, users expressed delight with the new process, describing it as straightforward, clear, and user-friendly.
