Sainsbury's

iOS 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.

Timeline
April 2015 - April 2016
Role
Mid Weight UI Designer
Project Type
iOS App

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.

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

10 columns | 25px width | 15px Gutter, Margin | 8px Baseline

375

375

10 Columns

8 Pixel Baseline

Typography

Sainsbury's custom typeface Mary Ann

Mary Ann Regular

Mary Ann Bold

Colour

Iconoic Sainsbury's primary colour palette

#FB8800

#BE0051

#303030

#9B9B9B

Iconography

Custom iconset designed at 24px, 2px outline

UI Components

Atomic design components

Simple Navigation

Due to the nature of how Smartshop was going to be used, it was vital that navigation was simple and easy to access. After numerous iterations and tests with Tab bars and Hamburger menu systems the hamburger proved to be far more superior.

Search for products

We wanted to ensure the experience was streamline and intuitive. Therefore we wanted to include as many search functions as possible such as free type, hand writing recognition and camera image / barcode recognition.

Final Screens

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.