In January 2017 we released our digital design manual. Now, 18 months later, the design manual has evolved into a design system.
Although it’s been live for months, it’s still (and always will be) a work in progress. We’re sharing it now in line with one of our design principles: ‘we design in the open’.
You can see the Co-op Digital design system at coop.co.uk/designsystem
Evolution of the design manual
The aim of the design manual was to help teams release things faster so they could focus on user needs rather than on making basic design decisions. We iterated and added new pages as and when there was a need, for example, we added guidance on forms, guidance on tables and our secondary colour palette.
But a year after its release, we were at a point where more of our digital services were going live, so we revisited the design manual and asked if it could be more useful.
What we learnt from our users
We asked our design, content design and user research community how well they felt the guidance in the design manual was serving its purpose. Feedback was mixed but most people felt that it didn’t quite cover enough.
A workshop made it clear that users wanted:
- example-driven patterns
- guidance on when to use specific design and content patterns
- examples of ‘experimental’ patterns
- all guidance in one place
Afterwards, we dedicated time to making some major changes to the content as well as the navigation and layout.
Design system – nice for what?
We found lots of excellent examples of design systems in our research but good, solid design systems are good and solid because they’re unique to the organisation or business they belong to – they meet the needs of designers, content designers and researchers who work there.
The Co-op Digital design system includes our:
- pattern library
- content style guide
- guidance on our design thinking
- design, user research and content design principles
- tools (front-end and prototyping kits)
- resources (Sketch files and brand assets)
Most importantly it’s a living document. Like all good design systems, ours will never really be ‘finished’ but it’ll evolve as our teams and services do. Over the past 6 months we’ve established processes that allow our team members to contribute to the system.
We audited our existing design work and looked for similarities and opportunities to create familiarity. We’ve also spent a lot of time building the foundations for a stronger and more collaborative team through workshops, design crits and making sure we design in the open.
Familiarity over consistency
The Co-op is an organisation with very distinct businesses which all need to communicate with Co-op members, customers and users in an appropriate and relevant way. For example, the way we communicate with a customer in a food store is likely to be very different to how we speak to a customer in a funeral home.
So it’s likely that our services might feel different. And that’s ok, as long they feel familiar.
A design system lets us create this familiarity. It should lead to a much more unified experience when they interact with different Co-op services.
Pattern library
We’ve started creating a library of design patterns – this is the most significant addition to our previous guidance. It doesn’t replace our design guidelines, it just pulls out the useful stuff we learnt designers look for when they’re designing a service.
Each pattern will have:
- an example, ie, a visual example of the pattern
- an associated user need
- design guidance, ie, how you use it
- accessibility guidance
Our colour palette pattern is a good example.
The library will be the de facto standard for how we display certain types of information.
Anyone at Co-op can contribute by submitting their pattern to the design community. They can do this by filling in a form justifying why users outside their service might benefit from this pattern or, why what they have created is an improvement on a current one.
Evolution of the design system
We want to continuously improve the guidance designers are looking for. To help us do this we’ll speak to more of the external teams that work with us and invite our colleagues in the Brand and Marketing teams to contribute their own guidance. We’ll also put the system to the test with teams as they build more Co-op services.
Watch this space.
