Harvey Nichols - Checkout (Web/App)

Project introduction

The Harvey Nichols checkout project was a comprehensive redesign of the checkout process for both the website and the native app. The goal was to enhance the user interface (UI) and user experience (UX) by streamlining navigation, reducing the steps required to complete a purchase, integrating modern payment methods such as Apple Pay and PayPal, and ensuring design consistency across platforms. The process aimed to create a seamless checkout experience, driven by qualitative and quantitative research, competitor analysis, and data-driven solutions to inform decisions and meet user needs.

Following the update, the improved checkout experience led to a significant increase in conversion rates, rising from 2.1% to 2.48%—an 18% uplift. By optimising usability and enhancing payment flexibility, the redesign not only improved customer satisfaction but also drove measurable business impact, reinforcing the value of thoughtful, user-centred design. UX design process followed is explained below.

DISCOVERY AND ANALYSIS

• Quantitative Research: Review analytics, user behaviour, and pain points in the current checkout, basically gathering quantitative research using Google Analytics and ContentSquare tools to set priorities.
• Competitor Analysis: Analysed 26 e-commerce sites to benchmark best practices, documenting both mobile and desktop experiences for a comprehensive understanding. I examined a range of sites, from high street and award-winning e-commerce platforms to luxury retailers, aiming to capture the broader industry trends and direction.
• Checkout Review: Conducted an in-depth analysis using ContentSquare to identify pain points and bottlenecks. Created a summary document to guide the redesign efforts, presenting current findings supported by quantitative research and offering potential solutions. Click rates, click density, heatmaps, and recordings were the primary metrics used in this review.

USER RESEARCH

• Qualitative Research: Conducted 17 one-on-one interviews to understand user needs, behaviours, and pain points. Insights were transcribed, analysed across eight steps, and compiled into a report, highlighting key themes and opportunities to improve the checkout experience.
• A/B Testing: Prototypes and static designs were tested with the Harvey Nichols User Testing Group (comprised of 72 participants), providing additional quantitative data that helped identify potential solutions.

INFORMATION ARCHITECTURE AND FLOWS

This phase involved extensive offline work, including long meetings, in-depth discussions, and collaborative workshops. Using post-its, whiteboards, and brainstorming sessions, we mapped out key information flows, restructured the checkout process, and ensured a seamless user journey. This hands-on approach allowed us to align on priorities, resolve complexities, and create a clear, intuitive structure for the redesign.

WIREFRAMES AND PROTOTYPES

• Wireframes: Wireframes simplified the checkout process from eight to four steps, focusing on layout, structure, and core functionality. They covered all identified scenarios, providing a clear foundation for the visual design and ensuring a streamlined, intuitive user experience.
• Prototypes: Created four personas to represent different user journeys, including the three most common (based on data from GA) and one more complex journey. These prototypes were shared with the User Testing Group and discussed within my team for further feedback.

DISCOVERY AND ANALYSIS

Quantitative Research

As an e-commerce platform, it was crucial to set clear priorities for the update. To guide this, I mapped out the simplest user journey and reviewed key data collected from Google Analytics and ContentSquare. This analysis allowed me to identify the most critical issues and establish initial priorities for improvement.After a quick review with my team and prioritising data-driven decisions, we identified the 'Checkout' process as the primary focus for enhancement.

Attached below you'll see 'Simplest Journey Review'
Click on the image for details.

DISCOVERY AND ANALYSIS

Competitor Analysis

After mapping out the initial simple user journey and establishing clear priorities, I conducted an extensive competitor analysis. This analysis was thorough and detailed, documenting each step with screenshots. I focused on the same user journey across 26 selected e-commerce sites, chosen for their status as potential competitors or their success in the industry.

The analysis was divided into two comprehensive files: one focused on mobile experiences and the other on desktop experiences. This dual focus ensured that we captured a complete picture of the competitive landscape, highlighting best practices and potential improvements for our own checkout process. By benchmarking against these successful websites, we aimed to refine and enhance our own user experience, driving higher conversions and user satisfaction.

Attached below you'll see 'Checkout Desktop Competitor Analysis'.
Click on the image for details.

DISCOVERY AND ANALYSIS

Checkout Review

After outlining a simple priorities list and gaining a clear understanding of competitor strategies through an extensive analysis, I conducted a deeper review of our checkout process using ContentSquare. This in-depth analysis involved identifying pain points and bottlenecks, and documenting actual user behaviours.

The attached file contains a comprehensive summary of current issues along with data-driven insights and potential solutions. This document served as a foundational guide to inform and drive our redesign efforts, ensuring that our checkout process would be significantly improved and aligned with user needs.

Attached below, you'll find screenshots detailing the entire checkout process. These images highlight current issues and offer potential solutions. The goal is to provide a clear visual representation of the checkout experience, pinpointing areas for improvement and suggesting actionable changes to enhance user satisfaction and drive higher conversion rates. This documentation is a crucial step in our ongoing efforts to refine and perfect the Harvey Nichols transactional journey.
Click on the images for details.

USER RESEARCH

Qualitative Research

Conducting interviews with users was crucial for understanding their needs, behaviours, and pain points. The process began with selecting 17 random users to represent the target audience. Each participant was scheduled for a one-on-one interview session in a quiet environment where recordings were made with their consent.

Interviews started with introductions and an explanation of the interview's purpose, ensuring participants were comfortable with recording. An interview guide with open-ended questions explored topics relevant to research goals, encouraging participants to discuss their experiences and challenges.

Afterward, interviews were transcribed for analysis on the different steps (step 1 to step 8). Common themes and pain points from participants were identified, forming the basis for a summary document. This document highlighted recurring issues and unique perspectives, which were then compiled into a comprehensive report. Insights and recommendations reflected as an overview of these interviews were presented to stakeholders, supported by visuals to effectively communicate key findings.

On the image below, we can observe the checkout process transcriptions for four distinct user profiles. This analysis was part of a broader study where the same treatment was applied to 17 users in total. Each transcription allowed us to identify patterns, pain points, and opportunities for improvement, ensuring our redesign addressed real user behaviours and needs effectively.
Click on the images for details.

USER RESEARCH

A / B Testing

The prototypes and static designs were tested with the Harvey Nichols User Testing Group (comprised of 72 participants), providing valuable quantitative insights that helped refine potential solutions.

To ensure comprehensive coverage of real user behaviours, I created four distinct personas—one per prototype. Three of these personas were based on the most common conversion journeys identified through Google Analytics, reflecting typical user paths on the website. The fourth persona was designed around the most complex journey, ensuring that even edge cases were thoroughly tested. This approach allowed us to validate design decisions across a broad range of scenarios, optimising the checkout experience for all user types.
Click on the images for details.

INFORMATION ARCHITECTURE AND FLOWS

Information Architecture and Flows

This phase was highly collaborative and required extensive offline work to refine the checkout’s information architecture and user flows. Through long meetings, in-depth discussions, and multiple workshop sessions, we carefully mapped out the structure to ensure clarity and efficiency.

A key part of this process involved using post-its, whiteboards, and other visual tools to break down each step of the journey, reorganising elements based on usability principles and business goals. During this stage, we made critical decisions about the checkout process, including reducing the number of steps from eight to four to streamline the experience. Additionally, we identified the need for a refined UI to improve usability and consistency across platforms.

By working through different scenarios, edge cases, and decision points, we aligned on a structured, intuitive flow that minimised friction and enhanced the overall user experience. These sessions were crucial in defining the logic behind the checkout redesign, ensuring every interaction felt seamless and purposeful.

WIREFRAMES AND PROTOTYPES

Wireframes

The next step involves the comprehensive creation of low-fidelity wireframes. These wireframes are informed by critical decisions based on previously gathered data, reflecting insights derived from user interviews and feedback. Each wireframe iteration will encapsulate different scenarios, focusing on four distinct steps rather than the previous eight, streamlining the process for clarity and efficiency.

These wireframes serve as a visual representation of the user interface, mapping out the layout, structure, and basic functionalities of the product or service. By condensing the design into fewer steps, we aim to simplify and enhance the user experience, aligning with the insights and priorities identified during the research phase.

In the upcoming module, we will examine these wireframes across various scenarios, highlighting their evolution and how they address user needs and pain points uncovered during the interview process. This iterative approach ensures that our design decisions are grounded in user-centric principles, ultimately leading to a more intuitive and effective final product.

As a quick reference legend: yellow components represent text fields or selectors, while red components signify CTAs (Calls to Action).

Step 1 – Customer
Step 2 – Shipping
Step 3 – Rewards
Step 4 – Payment
Order Confirmation

Step 1 – Customer

In this step, we distinguish between Guest users and Registered users. Account creation will be offered on the Order Confirmation page after the user completes the checkout process.

The size of these modules represents only the module itself, independent of screen size. This allows us to focus on the essential components we need to present to the user.

Above each step, a state is indicated as a subtitle, including 'Pressing' states designed with the prototype creation in mind, simplifying the process and saving time.

The modules on the far right represent the closed state of this step, featuring an 'Edit' button and collapsed for enhanced user focus on the next task or step. This approach provides the primary information without requiring a click.
Click on the image for details.

Below you'll find a list of bullet points with crucial decisions taken based on the previous work on this project and needed for these wireframes realisation.

– Remove 'Reset your password' option as it is impersonal and can cause unnecessary friction.
– The 'Reset your password' process currently redirects users to a new page where they enter their email and receive a reset link via email. To streamline this process, we will integrate it into the order confirmation page after users complete their order.
– Use direct, action-oriented copy for CTAs.
– To maintain user focus, we will remove the 'create an account' option during checkout, clearly indicating that users can create an account later. They will now choose between two options instead of three, simplifying the process and reducing form length.
– After completing each step, we will highlight whether the email provided belongs to a guest or registered user.

Step 2 – Shipping

Shipping is arguably the most complex step in the entire checkout process, for several reasons. Firstly, we cater to two distinct user roles, where registered users may have saved addresses, adding a layer of variability. Secondly, there are currently two different shipping methods available, which adds to the complexity.

Managing these complexities is further compounded by product-specific limitations and the challenges that arise when users have a mix of different products in their cart. Each product may have unique shipping requirements, necessitating careful consideration and adaptation in our design.

Moreover, we need to accommodate various shipping options based on each individual product in the user's cart. This requires us to meticulously map out every possible scenario, ensuring our concept is robust and capable of handling diverse user needs seamlessly.

By addressing these intricacies head-on, we aim to create a shipping interface that is not only user-friendly but also resilient—a system that provides clear choices and accommodates the nuanced shipping requirements of our users, ultimately enhancing their overall checkout experience.
Click on the images for details.

Below you'll find a list of bullet points with crucial decisions taken based on the previous work on this project and needed for these wireframes realisation.

– We are consolidating Shipping Method, Shipping Option, and Billing Address into a single step. The first option will always be preselected for ease of use.
– We will use radio buttons instead of dropdowns when there are three options or fewer.
– There will be no pop-ups during the process.
–   Only the current step (and previously completed steps) will be displayed on the screen, not the next one.
–   The viewport will focus on the ongoing step rather than the top of the page, as it currently does.
–   We will not offer gifting options.
–   When a user adds a hamper, BC will automatically prompt for multiple address delivery.

Step 3 – Rewards

The Rewards step in our checkout process is designed to enhance the shopping experience for both Loyalty users and non-Loyalty users. In this step, users are segmented into two distinct roles:

Loyalty Users: These are registered users who are members of our Rewards program.

Non-Loyalty Users: This group includes both guest users and registered users who have not joined our Rewards program.

In this step, Loyalty users will encounter two independent modules which could be combined too:

1. Cash Rewards Redemption
Loyalty users can redeem their accumulated cash rewards, which will be applied as a discount on their current order. This module allows users to see their available cash rewards balance and decide how much they want to redeem.

2. Benefits Application
Loyalty users can apply any eligible benefits to their order. These benefits might include promotional discounts, special offers, or other incentives that enhance the value of their purchase. Each benefit is tailored to the user's specific eligibility and can significantly reduce the overall cost.

Non-Loyalty users will not have access to either the Cash Rewards Redemption or Benefits Application modules.

By clearly separating these modules, we ensure that Loyalty users can easily understand and use the rewards and benefits available to them, making the checkout process more rewarding and personalised. Non-Loyalty users will proceed through the checkout process without these additional steps, ensuring a streamlined experience for all users.
Click on the images for details.

Below you'll find a list of bullet points with crucial decisions taken based on the previous work on this project and needed for these wireframes realisation.

– If the user does not have any eligible benefits for the current order, we will not display any benefits.
– If the user has no remaining Cash Rewards available, we will hide the Cash Rewards feature.
– If the user has neither Cash Rewards nor eligible benefits for the order, we will omit the Rewards step. – – When the user redeems Cash Rewards, it will be reflected in the Order Summary under a specific row labeled ‘Cash Reward -£0.00’.
– The user will have the option to remove the Cash Reward directly from the Order Summary.
– If Cash Rewards have already been redeemed, any subsequent attempts to redeem more will overwrite the previous value.
– Additional information about benefits will only be visible before application; once applied, the ‘show more’ hyperlink will be hidden.
– When the user lands on the Rewards step without any rewards applied or redeemed, the copy on the ‘continue’ button will be: ‘Skip this step’.
– The ‘Available/Benefit applied’ tag has been removed as it should dynamically show the remaining uses, which it does not.
– In 'My Account > Loyalty', we will emphasise that only eligible benefits will be displayed during the checkout process.
– In 'My Account > Loyalty', we will emphasise that only remaining Cash Rewards will be displayed during the checkout process.

Step 4 – Payment

The image illustrates the Payment section of the checkout process, detailing the steps for both Registered Users with saved cards and Guest Users. This section is designed to streamline and simplify the payment experience, ensuring users can easily complete their purchases.

Registered Users (with saved cards)
Initial Selection: Registered users are presented with their saved cards upon entering the payment section.
Card Management: They have the option to manage their saved cards, add a new card, or use an existing one.
Payment Confirmation: After selecting or adding a card, users proceed to confirm their payment details and complete the purchase.

Guest Users
Initial Selection: Guest users are prompted to enter their payment details as they do not have saved cards.
Payment Details: They can input their card information directly on the payment page.
Payment Confirmation: Once the payment details are entered, guest users confirm their payment to finalise the order.

Both user flows ensure a secure and efficient payment process, tailored to the needs of registered and guest users. The design prioritises ease of use, minimising steps and focusing on essential actions to reduce friction during checkout.
Click on the image for details.

Below you'll find a list of bullet points with crucial decisions taken based on the previous work on this project and needed for these wireframes realisation.

– The current payment step, which displays payment methods in an accordion format, will be replaced. Now, when the user selects a payment method, we will hide the others and provide a backlink for navigation.
– This change aims to reduce distractions and keep the user's focus on active components.
– If the user has a saved card, we will remove the ‘Use as a default card’ checkbox (as it is intuitive).
– When the user has saved cards, the placeholder value in the dropdown menu will be ‘Saved cards’ (currently: ‘Use a different card’).
– If the user has a saved default card and wishes to add a new one, they will find the ‘Add a new card’ link within the saved cards dropdown menu.
– To manage saved cards, users will access the ‘Manage saved cards’ link within the saved cards dropdown menu (currently accessible via a ‘manage’ floating link).
– If a user taps on the dropdown menu containing the default saved card, the placeholder value will display ‘Saved cards’. Below, the selected/default card will be highlighted, followed by options for ‘Use a new card’ and ‘Manage saved cards’.

Order Confirmation

The two images illustrate the Order Confirmation wireframes for the checkout process, addressing various user roles and scenarios. These wireframes are designed to provide a seamless and informative final step in the checkout journey, ensuring users receive all necessary information about their purchase.

Image 1: User Roles
This image displays the Order Confirmation page for different user roles:

– Guest User with Account Creation Feature:Encourages account creation by highlighting potential rewards points gained from the order. Shows fields for setting up a password and creating an account directly on the confirmation page.
– Registered User Who Didn't Update Password:Prompts the user to update their password for security reasons. Provides a link to reset the password, keeping the user informed and up-to-date.
– Registered User with Updated Password:Standard order confirmation page with details about the purchase. Displays the order summary, delivery address, and rewards points gained.

Image 2: Product Limitations and Scenarios
This image illustrates various product combinations and their impact on the Order Confirmation page:

– Single Product:Shows a simple order with one product, including product details, shipping option, and order summary.
– Multiple Products: Displays scenarios with multiple products, including hampers, own bought products, and marketplace products. Reflects different shipping options and order summaries based on the product combinations.
– Complex Orders:Depicts more complex scenarios with multiple products across different categories and addresses. Ensures that each product's shipping details and the overall order summary are clearly presented.

Key Elements Highlighted

– Order Summary: Consistently provides a breakdown of the subtotal, delivery charges, cash rewards, promotions, gift card amounts, and the total order cost.
– Rewards Information: Highlights the rewards points gained from the purchase, encouraging user engagement with the loyalty program.
– Billing and Shipping Details: Clearly displays the delivery address and billing address to confirm the user's inputs.

These wireframes are crafted to cater to various user needs, providing a clear and organised summary of the order while encouraging further engagement with the platform through features like account creation and rewards points.
Click on the images for details.

Below you'll find a list of bullet points with crucial decisions taken based on the previous work on this project and needed for these wireframes realisation.

– Users will have the option to create an account during this step, with the number of rewards points earned from the order prominently displayed. This encourages them to join our Rewards program, emphasising the benefits of cash rewards.
– Currently, Gift messages are not displayed on the Order Confirmation page; this feature should be added.
– For registered users who haven't updated their password, we will include a 'reset my password' feature after the order has been processed.
– Rewards points earned will be shared with users.
– The Billing Address will also be shared.
– The Order Summary should include:
Subtotal (total amount for items purchased)
Delivery cost
Cash Reward (amount redeemed)
Promotion (savings based on discounts or benefits applied)
Gift card (amount deducted from total)

WIREFRAMES AND PROTOTYPES

Prototypes

After designing and considering every wireframe, I created four personas to represent different user journeys. These include the three most common journeys (based on data extracted from Google Analytics) and one more complex journey to ensure all scenarios were covered. The aim was to test a variety of user experiences and ensure the design would work across diverse customer behaviours.

These journeys are detailed in the tabs below, with each persona reflecting a unique path through the checkout process. The attached screenshot shows the number of screens required for each prototype, helping to visualise the flow and the key touchpoints for users.

As a quick reference legend, yellow components represent text fields or selectors, while red components signify CTAs (Calls to Action). This breakdown allowed for easy identification of key actions and elements in each prototype, streamlining the testing process with the User Testing Group and within my team.

Persona 1
Persona 2
Persona 3
Persona 4

Persona 1

User Role: Guest user
Shopping Bag content: Fashion product (Own bought HN product)
Shipping Method: Collect in Store (Store 2)
Payment method: Credit / Debit card
Click on the image and it will open the prototype in a new tab.

Persona 2

User Role: Registered user + Rewards member Applying a Benefit
Shopping Bag content: Fashion product (Own bought HN product) + Marketplace product
Shipping Method: Delivery (Saved address)
Payment method: Paypal
Click on the image and it will open the prototype in a new tab.

Persona 3

User Role: Guest user
Shopping Bag content: Hamper
Shipping Method: Name day Delivery
Payment method: Alipay
Click on the image and it will open the prototype in a new tab.

Persona 4

User Role: Registered user / Rewards member redeeming Cash Rewards
Shopping Bag content: Hamper (Name day Delivery) + Fashion product + Marketplace product
Shipping Method: Delivery - Multiple addresses Delivery (Saved addresses)
Payment method: Credit / Debit card (Saved card)
Click on the image and it will open the prototype in a new tab.

Key Improvements

Simplified Checkout Process
Reduced the steps from 8 to 4, with clear CTAs and forms optimised for speed. This helped decrease user frustration and drop-offs.

Enhanced Payment Flexibility
The addition of Apple Pay, PayPal, and guest checkout options offered users more flexibility, reducing the likelihood of abandonment.

Visual and Functional Clarity
Forms were redesigned for clarity, error messages were made user-friendly, and progress indicators were added, giving users a clear sense of how many steps remained.

Conclusion

The redesigned checkout process for Harvey Nichols successfully streamlined the user journey, reducing the steps from eight to four and improving both usability and efficiency. Through a combination of user interviews, competitor analysis, and data-driven insights, we were able to create a more intuitive experience that addressed key pain points. The resulting design not only enhanced customer satisfaction but also delivered a measurable business impact, with conversion rates increasing by 18%, from 2.1% to 2.48%. This project demonstrates the value of user-centred design in driving both positive user outcomes and business performance.