Five things I’ve learnt about design systems since I started this gig *
Getting a much-coveted five-year long service badge from Sainsbury’s this year prompted me reflect back on what I’ve learnt so far. Amongst the zillion things there’s been a biggie each year that I thought would be worth sharing.
* inspired by the excellent 5 things I wish I’d known before starting a design system at Spotify
1. Understand where your design system’s at
In my keenness to land the role at Sainsbury’s, I clearly forgot to ask the right questions at my interview. As I skipped through the doors of 33 Holborn on my first day knowing lots about visual identity guidelines and digital asset management systems but nothing about component libraries, I assumed a team was up and running and my role would be to drive adoption, evolve and evangelise.
Although amazing work had been done to get an agency-led art direction established, and a code framework up and running, the engineers were building components in their spare time and the designers weren’t feeling engaged.
It was clear it needed a strategy and dedicated team to move things forward. So year one became a whirlwind of stakeholder interviews, working groups, proposals and spreadsheets, pitching a business case and landing some funding to get going properly.
2. Get a scrum team on it
In my second year my learning curve went through the roof. Coming from a brand and visual identity background I hadn’t worked with product teams before.
With the help of a fabulous agile coach, we bought our awesome engineers together with a dedicated UI designer and a part-time accessibility specialist to form a long-lived team. We built a vision and roadmap together, created our team norms and culture and started on the backlog.
Getting a scrum team off the ground was a huge accelerator for our work in these early days and made sure design and build was aligned. We were able to publish a public guidelines website, release a comprehensive Sketch sticker sheet and get our coded components into the hands of multiple teams.
Our components started to get in front of millions of Sainsbury’s customers on our groceries website, and thousands of colleagues via our internal apps. We were cooking on gas.
3. Be ready for curveballs
Year three and a new corporate strategy was launched. The vision was to become a truly multi-brand business where customers could shop across our brands seamlessly.
The Sainsbury’s and Argos design teams were bought together. We now shared an office space, but we had different cultures, ways of working, tech stacks, component libraries and approaches to design.
Suddenly, our designers were working across all five brands — Sainsbury’s, Argos, Tu, Habitat and Nectar. As a design systems team we needed to step back into the world of design foundations, working with our brand teams to define digital colour palettes, type stacks and design principles and documenting it all in one place. This informed all of our design tokens work we use today.
4. Bring in the specialists
In 2020 I was able to bring an accessibility specialist and two UX writers onto the team. I’m a huge fan of both disciplines and now know the real value they can bring to a design system, working alongside designers and engineers.
Having a full time accessibility specialist meant we were baking accessibility into everything we were releasing. We got to understand the most common mistakes our product teams were making and published discipline-specific guidance for designing, engineering and testing.
Our UX writers challenged us to put our users first. They helped us understand how our design system was seen and used by the teams around us. They led on researching, testing and iterating an information architecture for a new brand-agnostic guidelines site. We created comprehensive copy guidelines to help product teams make better content decisions for millions of customers.
Getting solid guidance in place to help our teams self-serve meant our specialists were freed up to work on the biggest projects where they could add most value, while still supporting the design system.
5. Get behind a clear vision and architecture
Last year, a reorg in our tech division meant we were able to bring design systems engineers from Sainsbury’s and Argos together. Finally we were one team with the clear remit to support all brands and platforms and drive more efficiency for the business.
We took stock of where we were at.
- A set of guidelines and principles — but not adopted equally by all brands
- A set of Figma UI kits — well used but in need of streamlining to make them easier to support
- Two web component libraries — used by different parts of the business on different tech stacks
- Some coded components with no design or documentation at all
We worked on a new vision and architecture for a design system ecosystem. It means we’re committed to aligning with guidelines and using design tokens across everything we design and build, and consolidating component libraries where it makes sense.
Now labelled our ‘favourite slide’, we’re finding it really useful to show senior leaders how we intend to drive efficiency and product teams how we’re going to make their lives easier.
6. In retail, a design system needs to support more than just digital
There’s one more learning as I start another year at Sainsbury’s.
The Customer Experience team’s remit is growing. We’re setting out the vision for how our customers will be shopping with us in the future, and we’re designing more experiences across in store and online.
Our design system — like many of the best out there — only supports digital experiences. Our next big challenge will how we evolve it to evolve to meet the needs of the team and our customers going forwards.
If you’re working on a design system, particularly one that’s needing to stretch to support the design of physical experiences, I’d love to chat.
