top of page
Sainsburys Mockup.png

Sainsbury's
Self Checkout Interface

I completed this project in the role of a UI designer as part of my CPD certification accredited by the School of UX.

Background
Sainsbury's is a historic British grocery store, found in 1869. They are the second largest chain of grocery stores in the UK. Recognizing the fast-paced life in London, Sainsbury's is looking at developing a new self-checkout interface that eliminates the need for vegetable and fruit weighing at the kiosks, freeing up valuable time for busy customers.

My Responsibilities
I was tasked to design a self-checkout interface. The main goal was to streamline the checkout process, resulting in the increased number of checkouts per minute.

bcvsTUJ.jpg

Design Review

To gather initial data on the current self-checkout experience, I personally tested the system to observe what works and potential pain points.

What Works
 

  • Clear categorisation of products in the search menu

​

  • ​A clearly labeled button for requesting assistance, positioned at an easily accessible location on the screen

​

  • A visual identity that ensures immediate brand recognition  (although looks quite busy and outdated)

What Could Be Improved
 

  • User needs to touch on the screen to start checking out, they should be able to instantly scan an item

 

  • Users have to weigh each individual fruit and veg which prolongs their shopping experience

​

  • Once an item has been scanned, there is no option to change quantities directly from the scanned list

User Journey Mapping

After reviewing the current interface, I created a user journey map outlining every interaction a customer would take in order to complete a self-checkout transaction.

Sainsbury's - User Journey.png

Style Guide

I ensured the design adhered to Sainsbury's established brand guidelines by utilising their design system website, Luna. Within this framework, I carefully curated a style guide that would create an optimal grocery store self-checkout experience.

Colours

#8B0000

#8523FA

#F47320

#F4F4F4

#FFFFFF

Typography

Fonts.png

Grid System

Seda - Sainsbury Grid.png

Body
Column: 12
Margin: 24
Gutter: 24

Components

Header

Header.png

Footer

Footer.png

Navigation Menu

Item Search.png

Product Tile

Product Tile.png

Product Tile (search mode)

ID Modal

ID Modal.png

Quantity & Price Variants

Quantity.png
Price.png

High-Fidelity Prototyping

I used my design review and system to construct a high-fidelity prototype on Figma with fully integrated interactions. This process unified all my designed components and allowed me to create a seamless, intuitive user experience.

High-Fidelity Interactions.png

Project Insights

As a frequent Sainsbury's shopper, I have firsthand experience with the challenges of using their self-checkout machines. By focusing on these issues and the user's perspective, I was able to develop an understanding of the necessary changes. This knowledge was then applied to the design of new interface elements and visual components


Next Steps
Following the completion of the high-fidelity prototype, I would conduct usability testing to verify an intuitive user experience. This would allow me to refine the design as needed before it's fully developed and released.

Sainsburys Mockup.png
bottom of page