Selfridges

Selfridges

Selfridges

This famous London retailer wanted to develop a new checkout experience. 

Lead UX
Lead UX
Lead UX
UI
UI
UI

Research

Working very closely with the Selfridges UX Research Team, I set about rethinking how their checkout should be improved. The goal was to discover and correct issues with their current checkout as well as shortening the overall process. New payment methods were to be shortly released, so ways of leveraging the power of these new systems to try to get as close as possible to a 1 click checkout.

Creating a wireframe prototype for users to complete a moderated usability test showed some interesting results as well as some unexpected hits with users.

Research

Working very closely with the Selfridges UX Research Team, I set about rethinking how their checkout should be improved. The goal was to discover and correct issues with their current checkout as well as shortening the overall process. New payment methods were to be shortly released, so ways of leveraging the power of these new systems to try to get as close as possible to a 1 click checkout.

Creating a wireframe prototype for users to complete a moderated usability test showed some interesting results as well as some unexpected hits with users.

Research

Working very closely with the Selfridges UX Research Team, I set about rethinking how their checkout should be improved. The goal was to discover and correct issues with their current checkout as well as shortening the overall process. New payment methods were to be shortly released, so ways of leveraging the power of these new systems to try to get as close as possible to a 1 click checkout.

Creating a wireframe prototype for users to complete a moderated usability test showed some interesting results as well as some unexpected hits with users.

UX of usability test prototype made in Figma
UX of usability test prototype made in Figma
UX of usability test prototype made in Figma
Miro usability test results
Miro usability test results
Miro usability test results

Results

By utilising a drawer to allow users to add or edit saved details (such as delivery addresses and cards stored within their account) kept the interface clean which users really liked.

I introduced the concept of allowing users to edit their shopping bag directly in a drawer within checkout which was a surprising success with users. They absolutely loved it.

Pre-filling options for registered users allowed me to create a true 1 click checkout whilst allowing full control to switch, or add, saved addresses and cards very easily.

Changed the flow from 4 separate pages, to 1 page with 3 sections as well as simplifying the UI to reduce clutter, confusion and leakage.

Ensured the shopping bag showed the contents clearly in a panel at all times together with shipping costs and a total cost that updated depending on their chosen options.

Design

The approach to the designs was closely matched to the delivery iterations. Each iteration would be tested and analysed before further refinement to get to the final design. This would also coincide with planned new payment methods that could be further leveraged to shorten the checkout even further for new customers.

Working with an existing design system and patterns to ensure a consistent feel throughout the entire checkout process.

Using Apple Pay to bypass checkout
Using Apple Pay to bypass checkout
Using Apple Pay to bypass checkout
Allow users to edit their basket during checkout
Allow users to edit their basket during checkout
Allow users to edit their basket during checkout
karate lewis 3D
karate lewis 3D
Available July 2024
Available July 2024