My first project at Sainsbury's was to lead the front-end development team on the long awaited checkout migration project of all their sub brands (Argos, Habitat, Tu Clothing). With much of their checkout experiences still driven by dated IBM WebSphere software and an even more dated UX/UI experience, the aim was to completely modernise the bottom of funnel flow.
Fast, straightforward checkout experience that delights the customer
Reassurance of placed orders and clear communication of key information
Migrate to AWS microservice infrastructure
Newly designed React based front-end
With much of the existing top of funnel ecosystem recently adopting micro frontends our app would take the same approach. We use a NodeJS powered Express application to render our React UI along with a custom built route based server-side data fetching pattern, similar to Next's getInitialProps. Our UI communicates with a checkout API microservice "snapshot" which is a data representation of the current users journey within the checkout flow. The UI is in frequent interaction with the snapshot to ensure the front-end and back-end are aligned.
For such a high impact project I wanted to push for excellence in three main areas of the UI whilst development was ongoing.
Inclusive design was a key focus of mine during this project. I didn’t want to simply create a passable experience but instead I wanted to build a delightful one. Existing Argos design system components were re-built or enhanced to meet industry standards not only enhancing our project but the rest of the Argos website. Particular attention was focused on the following areas:
Enhancing screen reader UI labelling for text & iconography
Fully functional keyboard only navigation
Focus state retention when opening & closing modals
Relative font scaling respecting user controlled zoom & browser defaults
Meeting color contrast standards for both existing and new components
The use of animation to convey meaning within UIs is something I add to all of my projects. A subtle addition of animation can have a big impact and provide missing context. Given the significance of this part of the customer journey, we maximised this to communicate to the user at nearly all stages.
Improving upon existing TDD standards was an objective of mine during this project. The aim was to increase DX (Developer experience) and increase test confidence.
React Testing Library
With the rest of Sainsbury's & Argos deeply invested in Jest & Airbnb's Enzyme, I wanted to modernise our teams UI testing and opted for introducing RTL. RTL's testing philosophy of testing the software as the user experiences it was a welcome change by all and massively improved our test confidence and even more notable the ability to quickly refactor due to less implementation detail being tested.
Switching from WebDriver.io to Cypress.io was another welcome change, not only in developer experience but also reducing E2E test flakiness. As the migration to Cypress was mid project and our existing WD.IO e2e tests were written in Cucumber (Given/When/Then) syntax, we chose the Cypress cypress-cucumber-preprocessor plugin which enabled us to almost seamlessly migrate tests with very little changes to the underlying support files.