Today we’ve released coop.co.uk/designmanual. The digital design manual is the new version of the ‘Co-op style guide’. In June 2016 I wrote about our progress with how we design digital services at Co-op. Since then, we’ve fixed the basics, taken a fresh look at what the design manual is for, and we’re now providing a stronger baseline for future Co-op services to be built on.
There are actually 3 things that help us design digitally:
- Design manual: our guidelines on digital design.
- Front-end toolkit: the Sass (CSS) that gives the design manual and our services their base look and feel.
- Prototyping kit: that allows designers and developers to quickly test and iterate services.
The design manual can help if you:
- design or build digital services at the Co-op
- write digital content for the Co-op
- are checking if a service meets the standards, matches our design principles and the Co-op’s values
We want the design manual to:
- help teams release faster and focus on user needs rather than spending time on the basics
- help document what we learn from research so we apply it in our work
- be a collaborative document that is widely and regularly contributed too
The design manual isn’t a set of rules, it’s a strong backbone for our digital services. It will change in line with learnings from user research, the changing business landscape or new technology. The design manual and its assets are the starting point for designers to design, not paint by numbers.
What we’ve done
Reworked our basic design system
We’ve actually removed quite a lot from the style guide. At least for now anyway. It’s ok if a service still uses these things but we want evidence of how they’re working for users before we add them back in.
Some of the changes we’ve made are:
We reworked our typography
What we had worked well for our printed material. But, it needed to be bolder and more flexible so it’d be suitable for different devices and have a better vertical rhythm (the vertical spacing we use between text and other page elements) to make it more easily legible on screen.
We added guidelines for writing for Co-op
Writing for digital is different to writing for other mediums. It’s about finding and doing things quickly — getting maximum meaning into minimum content.
We looked at how we approach accessibility
Equality and equity sit at the heart of the Co-op’s values so it’s important to us that anyone can use Co-op digital services. Becky Arrowsmith recently wrote about how we’ve been improving accessibility in the Co-op wills service.
We created some design principles
Our principles help to align ourselves around some central ideas that will guide our future design decisions. We’ll be writing more about these soon.
We’ve given it a new name
It’s now called the ‘design manual’.
This signifies a move away from ‘rules’ about design elements, to evidence-based advice on how design patterns are used in combination to create compelling digital services. This advice will evolve as we learn more about what works for the people who use our services.
What does this mean for our current services?
As a favourite quote of mine from information architect Abby Covert says:
‘Perfection isn’t possible, but progress is.’
Abby Covert – How to make sense of any Mess
You’ll start to see more of Co-op’s digital services sharing this updated design language creating consistent experience across the wills service, Membership, co-operative.coop and coop.co.uk. We don’t expect every service to suddenly shift all of their design work over to match the updated design language though. Instead, you’ll see a more gradual iteration as services adopt the updated styles – something many of our designers are already doing.
What’s next?
Most importantly we want to iterate and release much more often. This is an extra part of everyone’s job so keeping this momentum up is always the challenge.
We will:
- create a more visible backlog of upcoming improvements based on user research and live services
- put in place a clear way for colleagues to feed into the design manual
- look at what our shared design language for more complex design elements should be
- communicate changes to the design manual effectively and widely
- add more guidance about writing for Co-op
- find a way to host and link to user research from design elements
- develop the user journeys and information architecture for users of the design manual
- link to live examples of design patterns in use
- create a more simple HTML and CSS template for developers
- continue to refactor and improve the front-end tool-kit
- do ‘show and tells’ on each release
Finally, a thank you
Creating and maintaining a strong design system is not easy. It requires a lot of buy-in from an organisation and a lot of extra work from its contributors. With cooperation being at the heart of what we do it’s no surprise that I’ve had this from all the service teams, business units and senior leadership I’ve worked with as well, of course, from the design team. Thank you to everyone – too many to mention – who has been involved so far.
The design manual will continue to grow and evolve as our services do. You mark my words.
Matt Tyas
Interaction designer