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.
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.
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
Grid System
Body
Column: 12
Margin: 24
Gutter: 24
Components
Header
Footer
Navigation Menu
Product Tile
Product Tile (search mode)
ID Modal
Quantity & Price Variants
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.
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.
