Harvey Nichols - Checkout

Project introduction

The Harvey Nichols checkout project involved a complete redesign of the checkout process for both the website and the native app. The project focused on enhancing the user interface (UI) and user experience (UX) by streamlining navigation, simplifying the steps involved, integrating modern payment options like Apple Pay and PayPal, and ensuring consistency across platforms.

Key aspects of the update included:

Data Gathering and Analysis
Identified pain points using Google Analytics and ContentSquare.
Conducted user interviews to gather feedback.
Mapped out a simple user journey to document issues and set priorities.

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.

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.

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.

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.

Click on the images for details.

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.