Design Systems help modern innovative companies build new software quickly without waste and with a consistent look and feel. They are the single source of truth to allow the teams to design, realise and develop a product. From our work with Design Systems for Equal Experts' clients we have many learnings to share about benefits and risks and what needs to be overcome to get a system live and adopted. SPEAKER: David Hawdale. Product and UX person at Equal Experts. Contact www.equalexperts.com Contact David: david.hawdale@hawdale-associates.co.uk

1. Design Systems:
Designing out Waste,
Designing in Consistency
David Hawdale
13th January 2020 - Equal Experts, North, Leeds

2. Ideas and lean experiments,
behaviourally biased, customer-
centred

3. Agenda
● Design Systems - Background
● Design System - Case Study
● Learnings
● The Bigger Picture? DesignOps ...

4. They have been built by many, many
companies to help them design consistently
and with less waste

5. A component design explosion ...
In 2011, my UX team at The Times...
● … were each designing UI components - e.g. small forms - to their
own preference, afresh each time!
So much variation … so much waste … designing multiple times ...
● Colour, font, styling, label position, punctuation, input field shape, label in or out, label
naming, help, error cues, error handling patterns ….

6. Each new and repeated component
design was waste
Each new and repeated
component development was
waste
There should be one
design to rule them all!

7. ‘Live Style Guides’

8. And … patterns ...

9. A pattern is a way of doing things ...
At Westminster, we had
simple repeatable
patterns we could use
from GOV.UK, we didn’t
have to waste time
thinking about what we
needed to do afresh

10. Case Study

11. Design System
A Case Study

12. Our global client was innovating at speed, using small teams and multiple platforms with
embedded expertise to satisfy customer need.
But this rapid rate of change had led to apps being not recognisably branded, and had
created much rework with the same UI components and patterns being made and made
and made again.
How could we help our client:
● Have a consistent look and feel to fully leverage the prestigious brand
● Get many products to market quickly
● With many differently skilled and sized teams across multiple locations
The Brief

13. Design Systems
Design Systems can help modern innovative companies:
● Build new products quickly;
● Without waste; and
● With a consistent look and feel
A Design System is a way of working and an agreed set of standards for components and
patterns, so once you’ve designed and developed, say, an input box or a set of buttons,
you can share them across teams so the next team doesn’t have to redo all that thinking,
designing and developing again for

14. ● Gov.uk - provides components and patterns
across the public sector
● Material Design provides guidance to make
Android Apps
● AirBnB, Shopify, Mozilla, BBC, Salesforce,
Mailchimp, NHS, Spotify..
Once GDS had created their Design System, all
GOV properties followed conferring a high
quality consistent experience and a massive
reduction in waste and cost.
Design at Scale
Many established companies have Design Systems:

15. How we built a Design System
A Design System is not just the technology - the tech is relatively simple - so we
used an open source front and back end at no cost
The key to success was achieving consensus and creating trust across the
traditional company silos - in this case Brand and Marketing, Product and IT.
Our starting points were:
● To build on an existing component library that had been built one of the
platform teams
● To evangelise and talk about benefits, to gain trust and interest, and followers
● To set up a cross-functional, cross-silo working group to direct an approach

16. Our Approach
A Thin Slice
● Be driven by business/product need
● Agree a small number of sample usable components
● Agree one sample understandable patterns
● Put basic agreed brand foundations in place
● Make everything visible as soon as possible
● Put basic governance in place that speeds not hinders
To enable:
● Growth - evolving through collaboration
● Adoption - as teams get increasingly involved

17. The Numbers
● Kick off to Live in 90 days
● 4/5 person team
○ Product Owner - bringing people together, getting consensus, creating
content and ensuring governance
○ User Experience Designer - UI design, visual design, content creation
○ Front End Dev - component design, accessibility, site build, CMS wrangler
○ Tech Lead - (for first 30 days) - site architecture and CMS design
○ Delivery Lead - executing governance, service transition, release gates,
team wrangler, planner
● Cost just into 6 figures

18. Impact
● Adopted across Product and Marketing Teams
● Design System guidance;
○ Executed in full on React Platform
○ Executed partially on Low Code Platform
○ Executed partially on Marketing Platform
○ … and growing according to need...
● Active collaborations across platforms in the Component Guild
● Joint governance established between Product and Brand
● Third party team using the Design System, and React component libraries

19. “Starting from scratch makes no sense”
“The choice is made I don’t need to express an opinion”
Innovation Manager
“I expect banners, components, how text is positioned, CTAs and responses”
MarTech Manager
“The more you can copy and paste, and not have to choose, the better”
Innovation Product Owner
“I see patterns that have been agreed with brand I can use”
UX Designer
“A single source of truth"
“A platform to contribute and consume”
Frontend Developers
Quotes

20. Summary
Our client is now moving more quickly, creating better customer experiences aligned to
their prestigious brand
The Design System has helped them scale design where the problem is hard - lots of
teams, locations, platforms and third parties.
Where brand is critical, or where budgets are tight, a Design System should be a
fundamental part of any big company's design strategy.
Every big company should have one.

21. Some Learnings

22. ● Get everyone on board product, tech, marketing, brand
○ it won’t fly unless you address all the needs
● Build it as a product
○ create thin slice priority content and iterate
● Split up Product and Marketing
○ very different needs - persuasion vs clarity & usability
● Be crystal clear about the promise
○ designs and guidance, or built components, or both?
Learnings from building ...

23. DesignOps

24. Is the answer DesignOps?
Because it’s not all about the tech...

25. Thank you!
Any questions?

26. Design Systems:
Designing out Waste,
Designing in Consistency
David Hawdale
13th January 2020 - Equal Experts, North, Leeds