Design systems at Sainsbury’s
Our bigger and better Design Systems team has been up and running for a few months now, so it feels like a good time to start to share what we’ve working on. We’ll be sharing more as we work through the roadmap to solve some of our challenges.
Design systems vision
Our vision is to create a connected, coherent ecosystem to support all brands and products at Sainsbury’s, with common design, content and accessibility principles baked into everything we release.
We use a model to help bring this to life for our stakeholders. With our multi-brand guidelines site launched, and design tokens in place, we can start to bring consistency into our Figma kits and component libraries to support multiple brands and platforms.
By connecting everything together, we can drive more efficiency and consistency and better usability for the design systems team, our product teams and our customers.
It’s going to be a huge amount of work, but with our vision in place we can get cracking on making it happen.
Since its launch in January 2022 our analytics tell us:
- We’ve had over 6,000 visitors to the site so far.
- The most visited component page is ‘Button’ with over 2.4K views.
- The Resources and Getting Started pages are in the top 10 most visited.
- We’ve had visitors from all over the world — 15% are from the USA and 5% from India.
As we collect this data we’ll be iterating the site to best suit our users’ needs.
The site’s also helping us attract great talent. Candidates tell us it shows we have a mature design system that will make their lives easier when they join.
Getting serious with design tokens
We’ve had design tokens in place for a while but now we’re working to maximise their value and make them the ultimate source of truth for both designers and engineers.
We’re starting to use the Figma Tokens plugin to bring in our design tokens from Github so we’re aligning design and code. With a global component set and the power of tokens, we can easily switch between brands. This will massively streamline the process for designing new components and make our designers lives’ easier too. It will also make creating dark mode for all our brands much more efficient.
We’re also working with our native app teams to output tokens for iOS and Android to drive a more consistent experience for our customers shopping across our websites and apps.
Anyone who’s worked on a design system knows the that work will never be done. It’s a constant iteration and evolution based on the needs of its consumers and the business.
But it’s crucial we demonstrate the value we’re delivering, so getting measurement in place across our guidelines site, UI kits and code libraries is key to us achieving our outcomes.
Over the coming months we are going to develop a reporting dashboard that will measure how our design systems is being used. It will give us crucial insights that will inform how we move forward, making sure that everything we do is useful, effective and impactful. Watch this space.