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.

This project was particularly urgent due to a significant challenge faced after the company re-platformed from Magento to BigCommerce, resulting in a 40% drop in conversion rates. This impact created a strong push from the entire business to expedite the redesign and recover the lost revenue. Following the update, the redesigned checkout experience helped recover nearly 90% of the lost conversion rate, demonstrating the value of thoughtful and user-centred design in driving substantial business results.

Key aspects of the update included:

Data Gathering and Analysis
Gathering quantitative research using Google Analytics and ContentSquare tools.
Mapped out a simple user journey to document issues and set priorities.
Conducted user interviews to gather qualitative research.

Competitor Analysis
Analysed 26 e-commerce sites to benchmark best practices.
Documented both mobile and desktop experiences for a comprehensive understanding.

Checkout Review
Conducted an in-depth review using ContentSquare to identify pain points and bottlenecks.
Created a summary document to guide the redesign efforts.

Wireframes and Prototypes
Developed low-fidelity wireframes based on user insights.
Created four personas to represent different user journeys, including common and complex scenarios.
Designed high-fidelity prototypes for testing with target users.

A/B Testing
The 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.

Outcome: The redesigned checkout process is faster, more efficient, and enjoyable, ultimately improving conversion rates and customer satisfaction. The new design features a simplified interface, streamlined steps, autofill features, guest checkout options, and clear progress indicators.

Identify biggest vulnerability

After the re-platform, we noticed a significant drop in conversion rates and other key metrics across the website. Given that our primary goal as an e-commerce platform is to drive conversions, I mapped out the simplest user journey and documented it.

Using basic data collected from Google Analytics and ContentSquare, I identified the main issues and defined basic priorities.

Following a quick review with my team and prioritising data-driven decisions, we identified the 'Checkout' process as the major pain point. Consequently, it became our top priority for improvement.

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

Conducted Interviews

Conducting interviews with users was crucial for understanding their needs, behaviors, and pain points. The process began with selecting four 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.

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.

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.

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)

Prototypes

After designing and considering every wireframe, I decided to create four personas representing different user journeys.
These include the two most common journeys and two more complex ones.
These journeys are detailed in the tabs below.

In the screenshot attached, you can see the number of screens required for these four prototypes.
As a quick reference legend: yellow components represent text fields or selectors, while red components signify CTAs (Calls to Action).

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 user-centred design approach was crucial in overcoming the challenges posed by a 40% drop in conversion rates following the re-platforming from Magento to BigCommerce. Through extensive quantitative and qualitative research, we validated our design choices and created a checkout process that was faster, more intuitive, and consistent across both web and mobile platforms.

This redesign successfully recovered nearly 90% of the lost conversion rate, providing a significant boost to business performance. Following the initial recovery, we maintained focus on monitoring key metrics, iterating on the design, and educating users on the improved checkout process. This continuous refinement not only stabilised conversion rates but also fostered further enhancements, ensuring long-term growth and improved user satisfaction.