Design System as a Product - Maria Elena Duenias, Esther Butcher Design systems are a great example where web development and design meet. You can find innumerable resources on the internet, books and conferences on how to build them, and how they are exactly what your organization needs. But, building one requires a lot more than following a recipe. In this talk we are going to discuss how to build a design system as an internal product, and how it evolves to become what the users need.

1. 1
Design Systems as
a Product
#YConf2020
© 2020 ThoughtWorks

2. 2
About us
Maleh Duenias
Senior Developer
@maledr5
Esther Butcher
Senior Experience Designer
#notwitter

3. 3
What is a Design System?
What is a design system
Understand users and find value
Start small
The big picture
Quick Agenda

4. - [First Name] [Last Name]
4
What is a Design System?
Practitioners
over leaders
More than the
basics
Who will find this talk useful:
New perspective Conversation
starter
⛵

5. - [First Name] [Last Name]
5
What is a Design System?
Practitioners
over leaders
More than the
basics
Who will find this talk useful:
New perspective Conversation
starter
⛵

6. - [First Name] [Last Name]
6
What is a Design System?
Practitioners
over leaders
More than the
basics
Who will find this talk useful:
New perspective Conversation
starter
⛵

7. - [First Name] [Last Name]
7
What is a Design System?
Practitioners
over leaders
More than the
basics
Who will find this talk useful:
New perspective Conversation
starter
⛵

8. 8© 2020 ThoughtWorks
What is a Design System?

9. - [First Name] [Last Name]
9
— Sarah Federman
Ask a hundred people what a design
system is and you’re bound to get a
hundred different answers.
It seems like no one agrees 🤯
What is a Design System?

10. - [First Name] [Last Name]
10© 2020 ThoughtWorks
— Nathan Curtis
A design system offers a library of visual style,
components, and other concerns documented and
released by an individual, team or community
as code and design tools so that adopting products
can be more efficient and cohesive.
What is a Design System?

11. - [First Name] [Last Name]
11© 2020 ThoughtWorks
— Brad Frost
A design system is a humble product,
in service of other products.
Is the story of how your organization
designs and build digital products
What is a Design System?

12. 12© 2020 ThoughtWorks
In other words,
you build it [design system]
so it fits your needs [like a product]
What is a Design System?

13. 13© 2020 ThoughtWorks
In other words,
you build it [design system]
so it fits your needs [like a product]
… which needs? 🤔
What is a Design System?

14. 14© 2020 ThoughtWorks
What is a Design System?
🙂
It starts with
users and a need
(problem)

15. - [First Name] [Last Name]
15© 2020 ThoughtWorks
What is a Design System?
🙂
It starts with
users and a need
(problem)
🤩
It brings value!

16. 16© 2020 ThoughtWorks
What is a Design System?
🙂
It starts with
users and a need
(problem)
🤩
It brings value!
😳
It needs
management &
strategy
(ownership, collaboration,
adoption, marketing..)

17. - [First Name] [Last Name]
17© 2020 ThoughtWorks
What is a Design System?
🙂
It starts with
users and a need
(problem)
🤩
It brings value!
😃
Don’t worry, you
can start small

18. - [First Name] [Last Name]
18© 2020 ThoughtWorks
What is a Design System?
🙂
It starts with
users and a need
(problem)
🤩
It brings value!
🧐
Just don’t forget
the big picture

19. - [First Name] [Last Name]
19© 2020 ThoughtWorks
What is a Design System?
🙂
It starts with
users and a need
(problem)
🤩
It brings value!
🙌
Or why you’re
doing it

20. - [First Name] [Last Name]
20© 2020 ThoughtWorks
What is a Design System?
🙂
It starts with
users and a need
(problem)
🤩
It brings value!
🙌
Or why you’re
doing it

21. 21© 2020 ThoughtWorks
Let’s start with your users

22. - [First Name] [Last Name]
22© 2020 ThoughtWorks
You are not your user.
Start with your users

23. 23© 2020 ThoughtWorks
You are not your user.
But in design systems, you are.
Start with your users

24. - [First Name] [Last Name]
24© 2020 ThoughtWorks
You are not your user.
But in design systems, you are.
Aren’t you? 🤔
Start with your users

25. - [First Name] [Last Name]
25© 2020 ThoughtWorks
Start with your users
Building a sketch library for designers, simple?

26. - [First Name] [Last Name]
26© 2020 ThoughtWorks
Start with your users
🧔🏽
Power User
Building a sketch library for designers, simple?

27. - [First Name] [Last Name]
27© 2020 ThoughtWorks
Start with your users
🧔🏽
Power User
👨
Making it
work
Building a sketch library for designers, simple?

28. 28© 2020 ThoughtWorks
Start with your users
🧔🏽
Power User
👩🏼‍🦰
Multi-brand
Master
👨
Making it
work
Building a sketch library for designers, simple?

29. - [First Name] [Last Name]
29© 2020 ThoughtWorks
Start with your users
Research is important even when you have
personal experience.

30. - [First Name] [Last Name]
30© 2020 ThoughtWorks
Start with your users
Research is important even when you have
personal experience.
Sit with teams to learn how a design system
can add value and fit in with their work.

31. 31© 2020 ThoughtWorks
Where’s the value?

32. - [First Name] [Last Name]
32© 2020 ThoughtWorks
Where’s the value?
Ask yourself 3 questions:

33. - [First Name] [Last Name]
33© 2020 ThoughtWorks
Where’s the value?
Ask yourself 3 questions:
1. What opportunities or problems were
found?

34. - [First Name] [Last Name]
34© 2020 ThoughtWorks
Are your customers (and
business 💸) feeling the pain
of an inconsistent experience?
Where’s the value?

35. - [First Name] [Last Name]
35© 2020 ThoughtWorks
Are teams
solving the same
problems again
and again?
Where’s the value?

36. Are your ways
of working not
scaling well?
36© 2020 ThoughtWorks
Where’s the value?

37. - [First Name] [Last Name]
37© 2020 ThoughtWorks
Where’s the value?
Ask yourself 3 questions:
1. What opportunities or problems were
found?

38. - [First Name] [Last Name]
38© 2020 ThoughtWorks
Where’s the value?
Ask yourself 3 questions:
1. What opportunities or problems were
found?
2. How would a design system help?

39. - [First Name] [Last Name]
39© 2020 ThoughtWorks
Do you think it
will help you
find a common
language?
Where’s the value?

40. - [First Name] [Last Name]
40© 2020 ThoughtWorks
Do you think it
will help you
move faster?
Where’s the value?

41. - [First Name] [Last Name]
41© 2020 ThoughtWorks
Where’s the value?
Ask yourself 3 questions:
1. What opportunities or problems were
found?
2. How would a design system help?

42. - [First Name] [Last Name]
42© 2020 ThoughtWorks
Where’s the value?
Ask yourself 3 questions:
1. What opportunities or problems were
found?
2. How would a design system help?
3. Is now the right time?

43. - [First Name] [Last Name]
43© 2020 ThoughtWorks
Is there a
rebrand
coming?
Where’s the value?

44. - [First Name] [Last Name]
44© 2020 ThoughtWorks
Is your
organisation
growing fast?
Where’s the value?

45. - [First Name] [Last Name]
45© 2020 ThoughtWorks
Or maybe
there is a
strategic
initiative that
would benefit?
Where’s the value?

46. - [First Name] [Last Name]
46© 2020 ThoughtWorks
Where’s the value?
Ask yourself 3 questions:
1. What opportunities or problems were
found?
2. How would a design system help?
3. Is now the right time?

47. - [First Name] [Last Name]
47© 2020 ThoughtWorks
Where’s the value?
These 3 questions help to:

48. - [First Name] [Last Name]
48© 2020 ThoughtWorks
Where’s the value?
These 3 questions help to:
Get everyone on the same page

49. - [First Name] [Last Name]
49© 2020 ThoughtWorks
Where’s the value?
These 3 questions help to:
Get everyone on the same page
Help leadership understand the investment

50. - [First Name] [Last Name]
50© 2020 ThoughtWorks
Where’s the value?
These 3 questions help to:
Get everyone on the same page
Help leadership understand the investment
And help you to focus on where to start

51. 51© 2020 ThoughtWorks
Starting small

52. 52

53. 53

54. - [First Name] [Last Name]
54© 2020 ThoughtWorks
Starting small
Chances are you want a design system to
help more than one team.

55. - [First Name] [Last Name]
55© 2020 ThoughtWorks
Starting small
Chances are you want a design system to help
more than one team.
Let’s look at some other ways to start small.

56. - [First Name] [Last Name]
56© 2020 ThoughtWorks
Starting small
Chances are you want a design system to help
more than one team.
Let’s look at some other ways to start small.
By returning to your users.

57. 57© 2020 ThoughtWorks
Starting small
Print out interfaces to compare and contrast

58. 58© 2020 ThoughtWorks
Starting small
Review codebase for existing styles and
components

59. 59© 2020 ThoughtWorks
Where’s the value?
Pick relevant and irrelevant parts from a list
https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742

60. 60© 2020 ThoughtWorks
Where’s the value?
EFFORT
Low High
High
VALUE
Do first
Do next
Don’t
bother
Maybe?

61. 61© 2020 ThoughtWorks
Where’s the value?
EFFORT
Low High
High
VALUE
Do first
Do next
Don’t
bother
Maybe?
Backlog

62. - [First Name] [Last Name]
62© 2020 ThoughtWorks
Where’s the value?
But wait, I will bet you that when you pick up
the first thing...

63. - [First Name] [Last Name]
63© 2020 ThoughtWorks
Where’s the value?
But wait, I will bet you that when you pick up
the first thing...

64. - [First Name] [Last Name]
64© 2020 ThoughtWorks
Where’s the value?
Try to slice your components like any other
feature.

65. 65© 2020 ThoughtWorks
Where’s the value?
Try to slice your components like any other
feature.
First Next Later
Tints/Shades
Functional colours
Basic Usage
Usage per
component
Dark mode
Themes
Brand colours
Colour contrast

66. 66© 2020 ThoughtWorks
Where’s the value?
And, start with what you know.

67. 67© 2020 ThoughtWorks
Where’s the value?
And, start with what you know.
Don’t try to predict the future 🔮

68. 68© 2020 ThoughtWorks
Where’s the value?
And, start with what you know.
Don’t try to predict the future 🔮
🎨
Foundations,
then harvest

69. 69© 2020 ThoughtWorks
Where’s the value?
And, start with what you know.
Don’t try to predict the future 🔮
🎨
Foundations,
then harvest
🚧
Build (+ docs)
as you go

70. 70© 2020 ThoughtWorks
Where’s the value?
And, start with what you know.
Don’t try to predict the future 🔮
🎨
Foundations,
then harvest
🌏
Global and
widely used
🚧
Build (+ docs)
as you go

71. Start small, release early and set up good feedback
loops with teams who use it
71© 2020 ThoughtWorks
Where’s the value?
MEASURE 📏LEARN🔎
BUILD🏗

72. 72© 2020 ThoughtWorks
Don’t forget the big picture!

73. 73© 2020 ThoughtWorks
Don’t forget the big picture!
The “System” of Design Systems

74. 74© 2020 ThoughtWorks
Where’s the value?

75. How do people
find out about it?
75© 2020 ThoughtWorks
The BIG picture

76. How do people
find out about it?
76© 2020 ThoughtWorks
The BIG picture
What help do they
need to get started?

77. How do people
find out about it?
77© 2020 ThoughtWorks
The BIG picture
What help do they
need to get started?
What if the things they
need doesn’t exist?

78. How do people
find out about it?
78© 2020 ThoughtWorks
The BIG picture
What help do they
need to get started?
When there are bugs,
who fixes them?
What if the things they
need doesn’t exist?

79. How do people
find out about it?
79© 2020 ThoughtWorks
The BIG picture
What help do they
need to get started?
When there are bugs,
who fixes them?
How will changes be
handled?
What if the things they
need doesn’t exist?

80. How do people
find out about it?
80© 2020 ThoughtWorks
The BIG picture
What help do they
need to get started?
When there are bugs,
who fixes them?
How will changes be
handled?
Who pays for people
and time required?
What if the things they
need doesn’t exist?

81. - [First Name] [Last Name]
81© 2020 ThoughtWorks
The BIG picture
The “System” of Design Systems
… Is not just about the “deliverables”

82. - [First Name] [Last Name]
82© 2020 ThoughtWorks
The BIG picture
It’s about collaboration

83. 83© 2020 ThoughtWorks
The BIG picture
It’s about collaboration
roles teams products

84. - [First Name] [Last Name]
84© 2020 ThoughtWorks
The BIG picture
It’s about
ownership

85. - [First Name] [Last Name]
85© 2020 ThoughtWorks
The BIG picture
It’s about
ownership
GuildPO + core team

86. - [First Name] [Last Name]
86© 2020 ThoughtWorks
The BIG picture
It’s about adoption

87. - [First Name] [Last Name]
87© 2020 ThoughtWorks
The BIG picture
It’s about adoption
🎉
Pilot teams +
success
stories
📣
Share the
news
👯‍♂👯
Guild

88. It’s about maintenance
88© 2020 ThoughtWorks
The BIG picture

89. 🏆
Gamify it!
It’s about maintenance
89© 2020 ThoughtWorks
The BIG picture
♻
Contribute
back
⚖
Balance QA +
experience

90. - [First Name] [Last Name]
90© 2020 ThoughtWorks
The BIG picture
It’s about funding

91. 91© 2020 ThoughtWorks
The BIG picture
It’s about funding
📈
Efficiency
🤩
Users happy
🧭
Solving real
problems

92. 92© 2020 ThoughtWorks
Takeaways

93. - [First Name] [Last Name]
93© 2020 ThoughtWorks
Takeaways
This is not a recipe,
You will need to figure out
how a design system
can work for you

94. - [First Name] [Last Name]
94© 2020 ThoughtWorks
Takeaways
Start with your users
Even when you have some experience building
products you still need to do research with designers
and developers within your organisation

95. - [First Name] [Last Name]
95© 2020 ThoughtWorks
Takeaways
Find the value
Choose 1-2 problems from your research to focus on,
explain how you think a design system would help to
solve them and link it back to what's happening
within your organisation

96. - [First Name] [Last Name]
96© 2020 ThoughtWorks
Takeaways
Start small
Your design system doesn’t have to be huge to
powerfully change how teams work.
Start with what you already know
and setup feedback loops with teams who use it.

97. - [First Name] [Last Name]
97© 2020 ThoughtWorks
Takeaways
keep in mind
the big picture
There is more than tools and documentation. Find
how to also start small with things like collaboration,
adoption and maintenance.

98. - [First Name] [Last Name]
98© 2020 ThoughtWorks
— Brad Frost
A design system is a humble product,
in service of other products.
Is the story of how your organization
designs and build digital products
Takeaways

99. - [First Name] [Last Name]
99© 2020 ThoughtWorks
Takeaways
Write your own recipe,
and enjoy the ride 🎢 😉
It is your story!
your product.

100. Maleh Duenias
Senior Developer
malehduenas@thoughtworks.com
@maledr5
Esther Butcher
Experience Designer
ebutcher@thoughtworks.com
100© 2020 ThoughtWorks