Sainsbury'siOS App

The Challenge

Joining the newly formed Digital experience department at Sainsbury’s HQ, I was one of the first UI designer’s to be hired. Amongst many design challenges and tasks, a main role of mine was the creation of their first mobile app and new digital vision SmartShop.

The SmartShop app enables shoppers to scan and build digital shopping lists at home before visiting the store. It also consists of a map of the store that highlights the products they want to buy, and finally enabling customers to check out through their mobile phone.

Sainsburys Cover Image
The Solution

The project started with vast amount of research, looking at competitor analysis, user feedback, user stories, user flows, and numerous brainstorming and conceptualising sessions. We also invited various Sainsbury’s customers of different demographics to the studio to take part in these sessions to get a better understanding of what the customer required in a shopping app.

After frequent workshops, I had gathered enough information to make formal decisions as to what SmartShop needed to be and so began conceptualising and sketching wireframes and user flows. I created hundreds of low fidelity wireframes and flows which were then transformed into prototypes, which were then internally tested with a variety of user groups.

User testing and prototype workshops confirmed my flows, features and layouts for SmartShop and worked perfectly. Feedback indicated that the experience was easy to navigate, and an intuitive format for creating shopping lists, shopping in store and paying for items with the phone.

Sainsbury's Wireframe 01
Sainsbury's Wireframe 02
Sainsbury's Wireframe 03
Sainsbury's Wireframe 04
Sainsbury's Wireframe 05
Sainsbury's Wireframe 06
Sainsbury's Wireframe 07
Sainsbury's Wireframe 08
Sainsbury's Wireframe 09
Design system

Although Sainsbury’s is an incredibly established brand throughout the UK, it lacked digital guidelines, and their current system only supported print.
As a result, working amongst a small team of designers and creative director we transformed the existing guidelines into a new digital format, including grid systems, colour palette, typefaces and iconography.

Following the completion of digital guidelines, I then started work on flexible mobile grid system which could be used for multiple platforms including iOS, Android and Windows Phones.
I finalised the grid system along with a baseline grid, and focused my efforts on defining iconography for the app as Sainsbury’s current iconography was fragmented, and inconsistent.

Sainsbury’s uses a custom typeface called Mary Ann (John Sainsbury’s Wife) throughout the entirety of the brand, and after testing this typeface and its legibility it was decided that it would work for mobile devices too.

The colour palette was already defined in the guidelines, but after transforming this to digital we actually increased the saturation slightly of all the colours, as we wanted all digital products to appear fresh, confident and fearless.

Grid System
9 columns | 25px width | 15px Gutter, Margin | 8px Baseline
Sainsbury's Columns
Sainsbury's Baseline
All colours used for the project
Sainsbury's Primary Colours
Sainsbury's Secondary Colours
All typefaces used for the project
Sainsbury's Typography 01
Sainsbury's Typography 02
Sainsbury's Typography 03
Sainsbury's Typography 04
24px grid system, 2px outline
Sainsbury's Iconography 01
Sainsbury's Iconography 02
Sainsbury's Iconography 03
UI Components
Atomic design system
Sainsbury's UI Components
Sainsbury's Device 01
Final UI

The final app is a bold, vivid and current in design, which is easy to use and enhances the shopping experience. This app was a big step for Sainsbury’s as it was their first fully featured app which works in conjunction with in store technology.

The app is simple to use, allowing Sainsbury’s large target audience to use the app. It was in my interest to ensure the app worked for all ages, but also accessibility was a vital requirement. Sainsbury’s has a lot of visually impaired customers and so this enforced certain elements within the app, and at all times I had to ensure it was universal.

Sainsbury's Device 02
Sainsbury's screen 01
Sainsbury's screen 02
Sainsbury's screen 03
Sainsbury's screen 04
Sainsbury's screen 05
Sainsbury's screen 06
Sainsbury's screen 07
Sainsbury's screen 08
Sainsbury's screen 09
Sainsbury's screen 10
Sainsbury's screen 11
Sainsbury's screen 12
Sainsbury's screen 13
Sainsbury's screen 14
Sainsbury's screen 15