Sainsbury's

CLIENT

Sainsbury's

ROLE
Head of design
AGENCY
AllofUs
YEAR
2016

Sainsbury's visual language

The beautiful everyday

PART 1 of 2 – SAINSBURY'S DIGITAL EXPERIENCE FRAMEWORK*

Sainsbury’s needed to unify their digital design approach to create a consistent brand experience for customers across multiple touchpoints. The business identified that a Digital Experience Framework was required. To achieve this a fresh, consolidated visual direction and a structured design system would need to be developed to support all future work.

 

*NOTE

This project is split into two case studies:

Sainsbury’s visual language
– The project page you’re currently on outlines the discovery phase, design process, and visual design exploration.

LUNA Design System – the design system framework and guidelines that formed the foundation of Sainsbury’s design programme that continues today. This can be viewed as a separate project presentation.

Project-Luna-Discovery-Hero_1
Project background

The Sainsbury’s digital design landscape was extremely fragmented – inconsistencies between online products and services undermined the trusted grocery brand.

AllofUs was brought into the Sainsbury’s Digital Experience (DX) team as a consultancy to help with their ambition to create a Digital Experience Framework. As a relatively new department, they had strong UX, research, and copy teams but needed an agency partner to provide creative leadership and visual design direction. Creating consistency across touchpoints would improve customer experience and strengthen brand identity. 

During our partnership, we were to develop and cultivate a richer understanding of the visual design process within the Sainsbury’s team. 

The project was divided into three distinct stages
The first two phases set out to establish a visual language and are demonstrated in this project case study. The Discovery phase involved analysis, exploration, setting design principles, and art direction. During the Concept phase, we applied this in detail to real products across different channels – essentially bringing the design to life.

The Guidelines phase encompassed distilling everything we had created into concise design system guidelines to provide the framework for all future Sainsbury’s digital work.

Along the course of our engagement with Sainsbury's, this evolved to become known as project LUNA and is what the system is still called today. The LUNA design system guidelines can be viewed as a separate case study.

Working with UX

The Sainsbury’s User Experience team had significant data, research and insights to help our team with productive collaboration. Their ambition to create the best customer-centric shopping experience was a reassuring compliment to our design system aspiration.

Sainsbury’s already owned other offerings beyond groceries, including Sainsbury’s Bank and Tu clothing but the business sought expansion into even more diverse products. The design experience had to be flexible enough to work across multiple channels. 

The strategy was to focus on the customer experience across groceries and fashion for responsive web and native apps. This would allow us to stress-test our design system for different product categories and aesthetics while ensuring a sustainable and consistent user experience.

 

Project-Luna-Discovery-Hero_2

Art direction and design principles

Overview

To establish a visual language, it’s important to begin with what you already have. The team scrutinised Sainsbury’s existing digital landscape and sought inspiration from the brand’s design - past and present.

Taking Sainsbury’s core value of “Live Well For Less” gave birth to principles that would be the foundation of the UI and UX design approach.

Sainsburys_existing_landscape_edit_01
Existing landscape 

After performing an extensive design audit it was apparent that Sainsbury’s digital landscape had no cohesive experience design nor visual uniformity. We discovered points that needed to be addressed:

  • A lack of consistency across all touchpoints
  • No clear, strong identity within and across products
  • Interaction and motion were not part of existing design thinking
Brand inspiration

Our design team trawled through Sainsbury’s rich history of visual design for inspiration, including examples of great digital design projects of recent times.

P_IMG_sainsburys_M_brand_01

Design principles

The Sainsbury’s brand proposition of “Live well for less” and the four subcategories needed to be simplified into pragmatic qualities that could be applied by visual and experience designers. We wanted a set of clear principles that we could measure our ambitions against.

A distinctive collection of values was established, specifically for visual design and experience design so that the entire team was working towards the same goal, always with Sainsbury’s commitment at the heart of our work. 

Art direction

Art direction manifesto

As we evolve the way we design for the digital age, we want to keep the idea of Live Well for Less right at the heart of everything we do. So how do we translate this idea into a design framework? Live Well for Less is about enjoying the little pleasures in life. It’s about caring for the tiny details of everyday life that go unnoticed to everyone else, but never to you. Our job as designers is to observe and help. It’s to inspire and surprise. Our job is to notice those little moments and make them a little bit more special. A little bit better.
A little bit easier. Every single day.

As designers, our job is never done, it’s constantly changing, adapting, and evolving. Just like the people we’re designing for.

Everything we do must be beautiful. Everything we make must feel just right.

Our job is to make The Beautiful Everyday.

Design principles in practise

Our design principles provided a sounding board for the art direction. Decisions made during the visual design process would constantly be measured against these criteria, including the mood boards below*.

Friendly & Warm
Simple & Intuitive
Flexible & Personal
Inspiring & Bold
Looks Good & Works Great

Art_Direction_Moodboard___01
Art_Direction_Moodboard___02
Art_Direction_Moodboard___03
*Art direction moodboards. Copyright lies with original creators.
sainsburys-design-007

Look and feel

Our goal was to create a unifying visual language across all digital touchpoints that would reflect Sainsbury’s brand values. Based on the Art direction and Design principles we endeavoured to create a visual language that could not only be distinctive to Sainsbury’s but flexible to products and brands in their own right.


We brought this to life for two categories and their ecosystems - Sainsbury’s grocery products and TU clothing products.

Sainsbury's groceries - home page
sainsburys-design-008
Sainsbury's groceries - product listing
sainsburys-design-009
Sainsbury's groceries - product quick-view
sainsburys-design-010
Sainsbury's groceries - product detail
sainsburys-design-011
Sainsbury's groceries - Recipes
sainsburys-design-012
Sainsbury's groceries - Mobile app
sainsburys-design-014
sainsburys-design-014
sainsburys-design-013
Tu clothing - home page
sainsburys-design-016
Tu clothing - product listing
sainsburys-design-017
Tu clothing - product detail
sainsburys-design-018
Tu clothing - Mobile app
sainsburys-design-020
sainsburys-design-019
SEE OTHER PROJECTS