Overview.
The Luna design system brings guidelines, tools and documentation together to help you create inclusive experiences for any Sainsbury’s brand.
Creating a multi-brand design system.
Luna has predominately been associated as the design system for Sainsbury's, but as the company grew so did the brands including Argos, Tu, Habitat and Nectar. Making the switch from Sketch to Figma gave us the opportunity to review our library and incentive on how to cut duplication and increase value for the business.

LunaKit Sketch library and document.

Design foundations.
We wanted each brand to stay unique, but also to share things where consistent standards and approaches will create better experiences for users. This idea applies to everything that we do.

Shape Styles library hosts each brands own styles and interaction states.

We built our foundation shape styles for each brand and these would be used to design and build our components. There are UI design kits for all five Sainsbury’s brands, containing a full suite of themed colours, typography, icons, and components.
We’ve kept up to date with Figma’s feature launches by rolling out Variants, which streamlines the workflow for designers.

Establishing properties for each component set.

Figma Community.
Sainsbury's Community is a public space where you can find our published branded libraries, making it easier for anyone to discover the work and projects. Our 5 branded libraries are available to duplicate (download), it's great to see how many users are making use our resources.

https://www.figma.com/@sainsburys

Opening up the data.
Figma introduced analytics for libraries which was a game changer and provided us with library usage trends, compare libraries, and component usage.

Supporting 70+ designers, we were able to find and make ongoing improvements with quantitative feedback. I took it upon myself to pull the data from Figma into a Google Data Studio dashboard, which we plated back quarterly to our Product Owner and Stakeholders in the business.
Guidelines site redesign.
As the single source of truth for designers, developers, and external agencies. However, as our existing website was branded as a Sainsbury’s experience, Luna was perceived as being a Sainsbury’s only product. So we needed to change that.
Sainsbury's colours
Sainsbury's colours
Components overview
Components overview
Button component
Button component
Homepage
Homepage
What we did.
We wanted to multiply our value by building something to a high standard once and then allowing it to be reused over and over by all our brands. Exploring new look and feel from our design foundations, avoiding the need to create a new "brand".
Revised navigation
As we planned to add new content to the website it gave us the opportunity to relook at the IA of the site and revisit the user experience of our current navigation.

Updated IA in Miro.

Identifying our new top-level navigation items we were able to create some alternate layout options to improve the user experience on our site.
We sent out a poll to the wider Experience Design team who use our site day-to-day to find out which two explorations were favoured. We then created two prototypes; a top-level and a side navigation, and ran testing with 20 colleagues to gather further insight on.
User testing revealed that prototype 5 (side navigation) was preferred, with many users highlighting these findings:
• The hierarchy is much easier to digest like a file system
• Very intuitive
• Clear navigation reading left to right
 Final execution

Final navigation execution, designed mobile first and scaled to desktop.

Accessible design
Accessibility is always at the forefront when designing for Luna, so we make sure every design that needs building covers the basics; from headings, image tags or labels, we make sure it's covered.
What we achieved.
The new, brand-agnostic design of our guidelines site reflects our position as a system that underpins experiences for all five brands.

Homepage

Getting started for Designers.

Sainsbury's colour overview.

Habitat x Luna overview.
Bolt is a themeable collection of accessible styles, reusable components and functional widgets for Argos and Habitat. I was tasked to visualise Habitat consuming Luna's foundational elements whilst retaining Bolt legacy components on top.
Luna's foundation elements.
Luna's foundations consists of typography, grid, layout and global colour palettes. We needed to review these elements and identify comparisons between the both Luna and Bolt.
• 11 font styles vs 13 font styles
• 16px/24px vs 16px/32px spacing
• 4/8/12 columns
• 8px vs 5px baseline grid
• 16px component spacing
• 5 colours for text, key-lines, and surfaces

Habitat before: Using Bolt design principles

Luna's foundations visualised 

Habitat after: Applying Luna design principles

PROS
• a11y monochrome palette
• Flexible vertical spacing in units of 4
• Wider grid allows for content to flow and allow more white space
• No visual change
CONS
• Look at the analytics to see if it would impact conversions

You may also like

Back to Top