Project Overview
My first project at Sainsbury's was to lead the front-end development team on the long-awaited checkout migration for all their sub-brands (Argos, Habitat, Tu Clothing). With much of the checkout experience still powered by dated IBM WebSphere software and an even more dated UX/UI, our goal was to completely modernise the bottom-of-funnel flow.
The Challenge
The primary aim was to deliver a fast, straightforward checkout experience that delights customers. We focused on providing reassurance for placed orders and clear communication of key information. Additionally, the project involved migrating to AWS microservice infrastructure and launching a newly designed React-based front-end. Users were enabled to view previously saved addresses, add and edit addresses, apply Argos and Flexecash gift cards, and apply Nectar points to orders.
The Solution
With the top-of-funnel ecosystem recently adopting micro frontends, our app followed suit. We used a Node.js-powered Express application to render our React UI, along with a custom-built, route-based server-side data fetching pattern (similar to Next.js's getInitialProps). The UI communicates with a checkout API microservice "snapshot," representing the current user's journey within the checkout flow. Frequent interaction with the snapshot ensures the front-end and back-end remain aligned.
Results & Impact
The new checkout delivered a 5% increase in conversion across multiple channels and sub-brands, an 8% uplift in conversion rate, reduced critical error rate from 7% to 1.5%, achieved payment page completion times under 3 minutes, and enabled the successful onboarding of credit and monthly payment plans.
Accessibility
Inclusive design was a key focus. I aimed not just for a passable experience, but a delightful one. Argos design system components were rebuilt or enhanced to meet industry standards, benefiting both our project and the wider Argos website. Key improvements included enhanced screen reader UI labelling for text and iconography, fully functional keyboard-only navigation, focus state retention when opening and closing modals, relative font scaling respecting user zoom and browser defaults, and meeting color contrast standards for all components.
Micro Interactions
Animation was used to convey meaning and provide context throughout the checkout journey. We maximised micro-interactions to communicate with users at every stage, including asynchronous button animations, themable place order animation, view, add, and edit address modals, payment merchant iframe loading, and payment accordion steps.
Testing
Improving TDD standards was a key objective, aiming to boost developer experience and test confidence. I introduced React Testing Library to modernise UI testing, moving away from Jest and Enzyme. RTL's user-centric testing philosophy improved test confidence and made refactoring easier. Additionally, we migrated from WebDriver.io to Cypress.io, improving developer experience and reducing E2E test flakiness. Using the cypress-cucumber-preprocessor plugin, we seamlessly migrated existing Cucumber-based tests with minimal changes.