SECTION 01
What's wrong with
the current experience?
The existing site for Sainsbury's has a cluttered interface with many different buttons and menus. Product cards are overwhelming with lots of information, and there are too many pages to explore. Few sections allow you to discover new food in a fun and engaging way.
The website needs a complete overhaul with a responsive design that uses fresh, vibrant colours. Food imagary should be used to entice customers and recipes could be better integrated.
SECTION 02
Primary Research
​
I want to see what the food looks like, not see the packaging
They really sucked the magic out of discovering food
Going through all of the menus takes ages, and I always miss something
The cart at the end is always a long list and such a pain to go through
Millenials want a simplified, consistent experience that makes it easy to discover food and find new things to cook. It should feel light and vibrant with neat, fun animations.
SECTION 03
A new experience,
designed from the ground up
SECTION 04
The User Interface
There's strength in simplicity
The design is simple. The clutter has been moved out of the way so users can focus on what matters, the food!
The food is centre of attention
Where possible, food is taken out of the packaging, creating a rich experience through mouthwatering, high-definition photography
A flexible modular layout system
To help users discover new foods, stories and recipes, a modular and flexible system allows content to be continually updated.
Smart typography
The display font, Brown, creates a more natural, organic and less technical feel. Important information such as pricing and ratings are typeset in Graphik for increased legibility.
Icons lend a helping hand
Instead of long, endless menus, navigating is now simpler than ever. Icons help users quickly navigate through digital aisles.
Imagery tone of voice is key
Tone of voice guidelines ensure the site always looks great. Food needs to look so good, you want to reach into your screen and eat it.
SECTION 05
Now, let's explore the concept,
3 main sections and a notebook
The new site is made up of three key pages. The Dashboard, Groceries and Discover. As well as these key sections there is a smart notebook always accessible from the top menu to store shopping lists, save recipes and articles.
SECTION 06
The Dashboard
The Dashboard is the welcome screen, it gives you an overview of your orders, offers and favourites. It's where you change any account settings too. This space is unique to each user.
In the UK, online grocery sites contain some useful features; however, they are overshadowed by outdated user interface designs and complex menu systems.
SECTION 07
Menus
The menu system lets you quickly jump to the exact section you want. Food images and related articles appear as you hover over each section.
SECTION 07
Digital Aisles
Just like physical aisles, browse every aisle from fruit to snacks to dairy. Click the icons at the top to move between aisles and explore what's on each page. Digital Aisles are clean and simple. Find what you need and explore something new too. This brings a sense of food discovery to online shopping.
Categorised sliding panels make Aisles easy to navigate, and they contain related articles and recipes to help you get the most out of food.
SECTION 08
Product Results
When searching for an item or using the traditional menu, results are displayed in a beautiful, vibrant grid. Hover over an item to see more and add it to your basket or click on it to view the full product info.
SECTION 09
Discover Food
Food is such a big part of our lives that it should be fun and easy to discover new things to eat. That's what the Discover tab is for.
The Discover tab is also home to recipe pages that let you add the ingredients to your basket with one tap.
SECTION 10
Browse Articles
Sometimes its good to hear an expert opinion or get lost in a good read. Articles are tailored based on what you like and let you shop from within them. If an article mentions a food item, you can add it to your basket and continue reading.
SECTION 11
Viewing Orders
Orders let you see what you've purchased in an elegant, glanceable way. Items can be grouped by food type making it easier to check you've got everything.
