Sport Direct
Checkout Process UI/UX refresh, 2025 UK
The project required reviewing and modernizing the Sport Direct website checkout process from both UI and UX perspectives. There were several aspects to consider: - The new layout should be neutral and adaptable across DS's sister companies, which belong to the House of Frase holding. - Considering the previous point, the new checkout process's look and feel can be quite distinct from DS's design system, but at the same time, the current user journey shouldn't be revolutionized. That's a tricky balance.Sport Direct's old user journey (full vertical extended)
As noted, the entire user interaction required was contained in a single, very large block, which made it uncomfortable to scroll through. The confirmation slide was quite flat and impersonal, with secondary information taking up a lot of space.
New wireframe sketch.
Excluding the login/sign-in section, the user journey is now divided into three sections:
1. Delivery method selection
2. Payment method selection
3. Purchase confirmation
My main focus was to make the content block (delivery and payment methods) more digestible by splitting it into different steps and hiding previous and next ones.
This allows the user to concentrate on the current step, while still providing a visual indication of progress via a dynamic graphic element like a progress bar and CTA button state.
New reusable components with variants and styles.
To implement the new wireframe effectively, I created a dedicated mini-design system with styles, variables, and reusable multi-variant components, such as the progress bar and delivery option block.
Figma working file
The new UI/UX look and feel now present a much cleaner and lighter user journey.
The time and effort needed for scrolling and accessing information have been significantly reduced.
In the confirmation slide, the most important information is grouped at the top to avoid unnecessary scrolling. Secondary details, like delivery info, are placed right below, creating a clear content hierarchy.
Final responsive layout, Devices Showcase
