Sainsbury's past, present & future - telling the brand story

 
 
 
ulrichboulon - case study
 
 

STARTING POINT

A striking thing about Sainsbury’s history are the many parallels between the ideas it has adopted in the past and the zeitgeist of today, and in many ways how it applies to the future as articulated in the future.

WHAT WE DID

The team at beyond created a narrative framework to drive the design of a living platform, where strands of content are added over time to extend the story. Such a brilliant idea! All the teams have been involved in the project, creating a skills synergy where  copyright, insight, design, ux, engineers, product managers and stakeholders had a significant input at each stage of the project.

 
 
People with a stronger sense of nostalgia are more likely to take a positive view of life. People with a stronger sense of their roots feel more socially connected and more securely attached, leading to a greater appreciation of the meaning of life.
— research conducted by Constantine Sedikides, University of Southampton
 
 

THE NARRATIVE FRAMEWORK: CONTENT & EDITORIAL STRATEGY

How bring to live 150 years of archives? That was the BIG UX challenge to face on this project.

Therefore, we had to start somewhere and we produced a narrative framework where Sainsbury's could periodically create seasonal campaigns to bring a bunch of related archives to live. Here is how the framework looks like: 

How this works? Each year seasonal campaigns are taking place on the website. Each campaign showcases a serie of stories. And each story contains audio, image, video archives related to the period of time. And over the time the majority of the archives will be digitalise and accessible online through rich, beautiful and real stories. 

That was it! Now, where do I fit into this?!

 
 
 

HERE'S WHAT I DID AND HOW I DID IT

DAY 1 & 2: DEFINING THE INTERACTIVE MAP

When I knew that we would be using stories to bring to live the archives, I instantly wanted to map everything out; stories and interactive assets (animations, videos, audio files, images). I was obsessed of having a good balance between the amount of content for each stories. Indeed, I recommended to keep the amount of content as even as possible. Meaning if one story has 2 videos the other stories should at least have one video or other assets to keep the amount of time spend on each page even. 

However, sometimes stories didn't have enough related archives to balance the editorial strategy, so I added interactive elements to translate text, dates, numbers into playful digital interactions: interactive slider, dynamic diagram or an advanced lightbox. Here is one of the map - the first eight stories around "Christmas" for launch - including content, assets and "interactive benchmark":

Click to enlarge

Click to enlarge

 
 
 

DAY 3: NAIL DOWN THE USER JOURNEYS 

To put everything in context and moving forward, "campaigns" as introduced earlier are labelled "collections" of stories and "archives", "assets". You can see below the initial draft of the core acquisition journey: 

Sainsbury's Living Archive - UX Approach

Today, I reckon that I could optimised this core acquisition journey based on the traffic. Indeed, we've seen decreasing the amount of unique visitors on the homepage but increasing on stories. One of the main reason is that each time a new campaign is released, the entry points (social network and headlines) drive the users straight to the related content. But to increase retention we have introduced sign-postings cueing towards "the next related story/campaign" at the end of each story to streamline the journey. Where topics tags support a browsing and cherry picking experience.

 
 
 

DAY 4: SHAPING THE FOUNDATION

When I started the Information Architecture, I mainly focus on the navigation and the article structure using a card sorting in collaboration with the content team. For the homepage, the firebox.com-like grid is based on a custom version of Masonry framework developped by my friend and talented javascript developper Ryan Marchock.

On the other hand the designers and front-end guys wanted to have an clear overview of how the fluid story layout would work across devices to manage scope and expectations:

Low-fidelity layout to define the breakpoints helped the team with the responsiveness of the design.

Click on the image to enlarge

 

 

High-fidelity mockups of the 3-up (320px, 768px, 1024 and more) resolution.

768up.png
 
 
 

DAY 6: BRINGING THE INTERACTION DESIGN TO LIVE

At this stage the challenge is to find the best interactive modules that sits in each story and matches the the content planning.

Therefore, based on the content planning here is the list of final interactive modules suggested and integrated:

 

ANIMATED DIAGRAM

The dynamic diagram is designed to put numbers, scalings within a visual context.

Click to enlarge the specs A

Click to enlarge  specs B

 
 

 
 

Click to enlarge specs

ASSETS VIEWER

The images needed a way to be viewed, zoomed in , described and shared. So, I replicated a model that we've designed at Bynd before for Google Cultural Institute. The user will be inform that the viewer is available when the "info" icon will be visible at the top right corner of  asset.

 
 

 
 

Click to enlarge the specifications 

COMPARISON SLIDER

Often, within the scanned archives we found images from the past and present.

A pleasant way to display and interact with both at the same time is to use a slider which helps the user to see at a glance the before and present. The handle being  center-aligned to ease the understanding and the motion.

 
 

 
 

Click to enlarge the specifications 

HOVER-STATES ON DESKTOP ONLY

Hover states are delightful - when well done -  and play a key role to support the visual design, appeal the eyes and engage the click. The speed consistency is also a key parameter to carry through all animations, often by putting the same speed to start and same speed to end. All animations have been using linear transition. I really like spring animations, probably something to look at on another project. 

 
 
 

NAVIGATION BEHAVIOUR

We tried to create a navigation as simple as ubiquitous, meaning that if you need to reach a campaign or a story you can do it as quick as possible with a two-level top navigation. Otherwise, tags and signposting are available to encourage a browsing experience. 

 
 Top navigation behaviour

Top navigation behaviour

 Signpost towards the next campaign related story

Signpost towards the next campaign related story

 
 

 
 

AND MORE WITH TACTILE AND PARALLAX BEHAVIOUR FOR MOBILE

 
 

AND OF COURSE WE TOOK CARE OF THE CMS PART TOO

I had the chance to suggest an sophisticated approach to the CMS. An adapted version to ease the collaboration and the publications workflow and the collaboration between editors.

 

 

CMS PROFILES' WORKFLOWS

 
 

 
 

SUPER ADMIN FLOW

 
 

 
 

USER INTERFACE

 
 

Hope you enjoyed reading Sainsbury's Living Archive case study.

More will come soon. Just watch the space and enjoy the show...

 
 

 
 

FEEDBACKS

Now would you be able to tell the brand story throughout our next Phone Shop by Sainsbury’s?!
— Sainsbury's
 

SHOWCASE TIME

CLIENT

Sainsbury's

ROLE

UX Designer