Retail checkout

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.

Business objectives

• 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

Front-end architecture

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.

Front-end goals

For such a high impact project I wanted to push for excellence in three main areas of the UI whilst development was ongoing.

Accessibility

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

Micro interactions

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.

Performance

New Relic, Lighthouse

Development practises

pair programming & code reviews (grads, mid weight, seniors)

testing (some team members opting for a test first tdd style)

- enzyme to rtl

- wdio cucumber to cypress cucumber

i18n for cross brand locales

styled components for themes