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