Thoughtworks, profile picture
Uploaded byThoughtworks
3,521 views

Design System as a Product

The document discusses the concept of design systems, emphasizing their role as a product that can enhance design efficiency and cohesion across teams. It highlights the importance of starting small, understanding user needs, and addressing specific problems to derive value from the design system. Additionally, it stresses the significance of collaboration, ownership, and maintaining a big-picture perspective when implementing design systems.

Embed presentation

Downloaded 95 times
1 / 100
2 / 100
3 / 100
4 / 100
5 / 100
6 / 100
7 / 100
8 / 100
9 / 100
Most read
10 / 100
11 / 100
12 / 100
13 / 100
14 / 100
15 / 100
16 / 100
17 / 100
18 / 100
19 / 100
20 / 100
21 / 100
22 / 100
23 / 100
24 / 100
25 / 100
26 / 100
27 / 100
28 / 100
29 / 100
30 / 100
31 / 100
32 / 100
33 / 100
34 / 100
Most read
35 / 100
36 / 100
37 / 100
38 / 100
39 / 100
40 / 100
41 / 100
42 / 100
43 / 100
44 / 100
45 / 100
46 / 100
47 / 100
48 / 100
49 / 100
50 / 100
51 / 100
52 / 100
53 / 100
54 / 100
55 / 100
56 / 100
57 / 100
58 / 100
59 / 100
60 / 100
61 / 100
62 / 100
63 / 100
64 / 100
65 / 100
66 / 100
67 / 100
68 / 100
69 / 100
70 / 100
71 / 100
Most read
72 / 100
73 / 100
74 / 100
75 / 100
76 / 100
77 / 100
78 / 100
79 / 100
80 / 100
81 / 100
82 / 100
83 / 100
84 / 100
85 / 100
86 / 100
87 / 100
88 / 100
89 / 100
90 / 100
91 / 100
92 / 100
93 / 100
94 / 100
95 / 100
96 / 100
97 / 100
98 / 100
99 / 100
100 / 100
1 Design Systems as a Product #YConf2020 © 2020 ThoughtWorks
2 About us Maleh Duenias Senior Developer @maledr5 Esther Butcher Senior Experience Designer #notwitter
3 What is a Design System? What is a design system Understand users and find value Start small The big picture Quick Agenda
- [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 ⛵
- [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 ⛵
- [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 ⛵
- [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© 2020 ThoughtWorks What is a Design System?
- [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?
- [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?
- [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© 2020 ThoughtWorks In other words, you build it [design system] so it fits your needs [like a product] What is a Design System?
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© 2020 ThoughtWorks What is a Design System? 🙂 It starts with users and a need (problem)
- [First Name] [Last Name] 15© 2020 ThoughtWorks What is a Design System? 🙂 It starts with users and a need (problem) 🤩 It brings value!
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..)
- [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
- [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
- [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
- [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© 2020 ThoughtWorks Let’s start with your users
- [First Name] [Last Name] 22© 2020 ThoughtWorks You are not your user. Start with your users
23© 2020 ThoughtWorks You are not your user. But in design systems, you are. Start with your users
- [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
- [First Name] [Last Name] 25© 2020 ThoughtWorks Start with your users Building a sketch library for designers, simple?
- [First Name] [Last Name] 26© 2020 ThoughtWorks Start with your users 🧔🏽 Power User Building a sketch library for designers, simple?
- [First Name] [Last Name] 27© 2020 ThoughtWorks Start with your users 🧔🏽 Power User 👨 Making it work Building a sketch library for designers, simple?
28© 2020 ThoughtWorks Start with your users 🧔🏽 Power User 👩🏼‍🦰 Multi-brand Master 👨 Making it work Building a sketch library for designers, simple?
- [First Name] [Last Name] 29© 2020 ThoughtWorks Start with your users Research is important even when you have personal experience.
- [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© 2020 ThoughtWorks Where’s the value?
- [First Name] [Last Name] 32© 2020 ThoughtWorks Where’s the value? Ask yourself 3 questions:
- [First Name] [Last Name] 33© 2020 ThoughtWorks Where’s the value? Ask yourself 3 questions: 1. What opportunities or problems were found?
- [First Name] [Last Name] 34© 2020 ThoughtWorks Are your customers (and business 💸) feeling the pain of an inconsistent experience? Where’s the value?
- [First Name] [Last Name] 35© 2020 ThoughtWorks Are teams solving the same problems again and again? Where’s the value?
Are your ways of working not scaling well? 36© 2020 ThoughtWorks Where’s the value?
- [First Name] [Last Name] 37© 2020 ThoughtWorks Where’s the value? Ask yourself 3 questions: 1. What opportunities or problems were found?
- [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?
- [First Name] [Last Name] 39© 2020 ThoughtWorks Do you think it will help you find a common language? Where’s the value?
- [First Name] [Last Name] 40© 2020 ThoughtWorks Do you think it will help you move faster? Where’s the value?
- [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?
- [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?
- [First Name] [Last Name] 43© 2020 ThoughtWorks Is there a rebrand coming? Where’s the value?
- [First Name] [Last Name] 44© 2020 ThoughtWorks Is your organisation growing fast? Where’s the value?
- [First Name] [Last Name] 45© 2020 ThoughtWorks Or maybe there is a strategic initiative that would benefit? Where’s the value?
- [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?
- [First Name] [Last Name] 47© 2020 ThoughtWorks Where’s the value? These 3 questions help to:
- [First Name] [Last Name] 48© 2020 ThoughtWorks Where’s the value? These 3 questions help to: Get everyone on the same page
- [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
- [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© 2020 ThoughtWorks Starting small
52
53
- [First Name] [Last Name] 54© 2020 ThoughtWorks Starting small Chances are you want a design system to help more than one team.
- [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.
- [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© 2020 ThoughtWorks Starting small Print out interfaces to compare and contrast
58© 2020 ThoughtWorks Starting small Review codebase for existing styles and components
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© 2020 ThoughtWorks Where’s the value? EFFORT Low High High VALUE Do first Do next Don’t bother Maybe?
61© 2020 ThoughtWorks Where’s the value? EFFORT Low High High VALUE Do first Do next Don’t bother Maybe? Backlog
- [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...
- [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...
- [First Name] [Last Name] 64© 2020 ThoughtWorks Where’s the value? Try to slice your components like any other feature.
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© 2020 ThoughtWorks Where’s the value? And, start with what you know.
67© 2020 ThoughtWorks Where’s the value? And, start with what you know. Don’t try to predict the future 🔮
68© 2020 ThoughtWorks Where’s the value? And, start with what you know. Don’t try to predict the future 🔮 🎨 Foundations, then harvest
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© 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
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© 2020 ThoughtWorks Don’t forget the big picture!
73© 2020 ThoughtWorks Don’t forget the big picture! The “System” of Design Systems
74© 2020 ThoughtWorks Where’s the value?
How do people find out about it? 75© 2020 ThoughtWorks The BIG picture
How do people find out about it? 76© 2020 ThoughtWorks The BIG picture What help do they need to get started?
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?
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?
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?
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?
- [First Name] [Last Name] 81© 2020 ThoughtWorks The BIG picture The “System” of Design Systems … Is not just about the “deliverables”
- [First Name] [Last Name] 82© 2020 ThoughtWorks The BIG picture It’s about collaboration
83© 2020 ThoughtWorks The BIG picture It’s about collaboration roles teams products
- [First Name] [Last Name] 84© 2020 ThoughtWorks The BIG picture It’s about ownership
- [First Name] [Last Name] 85© 2020 ThoughtWorks The BIG picture It’s about ownership GuildPO + core team
- [First Name] [Last Name] 86© 2020 ThoughtWorks The BIG picture It’s about adoption
- [First Name] [Last Name] 87© 2020 ThoughtWorks The BIG picture It’s about adoption 🎉 Pilot teams + success stories 📣 Share the news 👯‍♂👯 Guild
It’s about maintenance 88© 2020 ThoughtWorks The BIG picture
🏆 Gamify it! It’s about maintenance 89© 2020 ThoughtWorks The BIG picture ♻ Contribute back ⚖ Balance QA + experience
- [First Name] [Last Name] 90© 2020 ThoughtWorks The BIG picture It’s about funding
91© 2020 ThoughtWorks The BIG picture It’s about funding 📈 Efficiency 🤩 Users happy 🧭 Solving real problems
92© 2020 ThoughtWorks Takeaways
- [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
- [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
- [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
- [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.
- [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.
- [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
- [First Name] [Last Name] 99© 2020 ThoughtWorks Takeaways Write your own recipe, and enjoy the ride 🎢 😉 It is your story! your product.
Maleh Duenias Senior Developer malehduenas@thoughtworks.com @maledr5 Esther Butcher Experience Designer ebutcher@thoughtworks.com 100© 2020 ThoughtWorks

More Related Content

PDF
Building a Mature Design System
byDrew Burdick
 
PDF
Evolving your Design System: People, Product, and Process
byuxpin
 
PDF
Creating and maintaining a design system for 130 teams - Bethany Sonefeld
byuxpin
 
PPTX
Design System
byCharlie Weston
 
PDF
Design Systems (english) #UXcamHH
byBenno Lœwenberg
 
PDF
MB Design Systems slides.pdf
by1508 A/S
 
PDF
Auditing Design Systems for Accessibility - Anna E. Cook
byWey Wey Web
 
PDF
Invision Design Systems Handbook
byHarsha MV
 
Building a Mature Design System
byDrew Burdick
 
Evolving your Design System: People, Product, and Process
byuxpin
 
Creating and maintaining a design system for 130 teams - Bethany Sonefeld
byuxpin
 
Design System
byCharlie Weston
 
Design Systems (english) #UXcamHH
byBenno Lœwenberg
 
MB Design Systems slides.pdf
by1508 A/S
 
Auditing Design Systems for Accessibility - Anna E. Cook
byWey Wey Web
 
Invision Design Systems Handbook
byHarsha MV
 

What's hot

PDF
Design System & Atomic Design
byVani Jain
 
PDF
Design System 101
byMayank Dhawan
 
PDF
Design system presentation - How to sell it internally
byEugene Kardash
 
PDF
Initiating and Sustaining Design Systems for the Enterprise
byuxpin
 
PDF
Design Systems: Enterprise UX Evolution
byAnne Grundhoefer
 
PDF
Design Systems First: Everyday Practices for a Scaleable Design Process
byuxpin
 
PDF
Building a Design System: A Practitioner's Case Study
byuxpin
 
PDF
User interface and user experience ui ux design basics
byRavi Bhadauria
 
PDF
Design Systems at Scale
bySarah Federman
 
PDF
Uxpin Why Build a Design System
byLewis Lin 🦊
 
PDF
Design systems in organisations
byAnnalisa Valente
 
PDF
UI/UX Workshop - Hackvision
byProttay Karim
 
PDF
Design System & Atomic Design
byeggcellent
 
PDF
UX Experience Design: Processes and Strategy
byCHI UX Indonesia
 
PDF
Intro to UX: Enterprise UX
byBart Van Hecke
 
PDF
Design Systems
byNadal Soler
 
PDF
Design Systems: Parts, Products & People
bynathanacurtis
 
PDF
Design System - Fail, Learn, Build, Test
byPaya Do
 
PDF
A design system. A year in review.
byJames Ferguson
 
PDF
Wireframing Basics - UX and the Design Process by Amber Vasquez
byMightybytes
 
Design System & Atomic Design
byVani Jain
 
Design System 101
byMayank Dhawan
 
Design system presentation - How to sell it internally
byEugene Kardash
 
Initiating and Sustaining Design Systems for the Enterprise
byuxpin
 
Design Systems: Enterprise UX Evolution
byAnne Grundhoefer
 
Design Systems First: Everyday Practices for a Scaleable Design Process
byuxpin
 
Building a Design System: A Practitioner's Case Study
byuxpin
 
User interface and user experience ui ux design basics
byRavi Bhadauria
 
Design Systems at Scale
bySarah Federman
 
Uxpin Why Build a Design System
byLewis Lin 🦊
 
Design systems in organisations
byAnnalisa Valente
 
UI/UX Workshop - Hackvision
byProttay Karim
 
Design System & Atomic Design
byeggcellent
 
UX Experience Design: Processes and Strategy
byCHI UX Indonesia
 
Intro to UX: Enterprise UX
byBart Van Hecke
 
Design Systems
byNadal Soler
 
Design Systems: Parts, Products & People
bynathanacurtis
 
Design System - Fail, Learn, Build, Test
byPaya Do
 
A design system. A year in review.
byJames Ferguson
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
byMightybytes
 

Similar to Design System as a Product

PDF
Design thinking as a creative problem solving process - Part 1
byPeer Academy
 
PDF
6 to 106 in 4 years - The story of the Atlassian Design team
byAlastair Simpson
 
PDF
Download full ebook of Hack The Design System 1st Edition Idean instant downl...
byniazipearswt
 
PDF
Strategic design tools - patterns, frameworks and principles
byoli shaw
 
PDF
Design for business Impact: How design triggers transformation
byfrog
 
PPTX
DRAFT - Design Thinking by Ramesh Adavi.pptx
byParthKshirsagar5
 
PPTX
Chapter 1 - Software Design - Introduction.pptx
byHaifaMohd3
 
PPTX
Design Systems: Designing out Waste, Designing in Consistency
byEqual Experts
 
PDF
Design Thinking for the Modern Startup
byChristopher Cashdollar
 
PPTX
Grassroots Design Thinking - AIGA SC
byJohn Murray
 
PDF
Jayesh Srivastava - When to Flare and when to Focus
byJayesh Srivastava
 
PDF
Pausefest: Solve your own damn problem
byMike Ojo
 
PDF
Design at Scale: Enabling Systems Thinking to Design for a Complex Future
byChris Avore
 
PDF
NASSCOM Design4India Design Summit & Awards 2019 - Not Another Brick in the W...
byNASSCOM Design4India
 
PDF
The elements of product success for designers and developers
byNick Myers
 
PDF
I Hate Process/I Love Process - Why designers are divided about process, and ...
byJoan Vermette
 
PDF
Design Thinking for Quality Systems (with Notes)
byMichael Plishka
 
PDF
How Design Triggers Transformation presented by Tjeerd Hoek
byfrog
 
PDF
Multipying the power of your agile team with Design
byPhil Barrett
 
PDF
Innovation needs waste - XP Days Germany 2011
byPierluigi Pugliese
 
Design thinking as a creative problem solving process - Part 1
byPeer Academy
 
6 to 106 in 4 years - The story of the Atlassian Design team
byAlastair Simpson
 
Download full ebook of Hack The Design System 1st Edition Idean instant downl...
byniazipearswt
 
Strategic design tools - patterns, frameworks and principles
byoli shaw
 
Design for business Impact: How design triggers transformation
byfrog
 
DRAFT - Design Thinking by Ramesh Adavi.pptx
byParthKshirsagar5
 
Chapter 1 - Software Design - Introduction.pptx
byHaifaMohd3
 
Design Systems: Designing out Waste, Designing in Consistency
byEqual Experts
 
Design Thinking for the Modern Startup
byChristopher Cashdollar
 
Grassroots Design Thinking - AIGA SC
byJohn Murray
 
Jayesh Srivastava - When to Flare and when to Focus
byJayesh Srivastava
 
Pausefest: Solve your own damn problem
byMike Ojo
 
Design at Scale: Enabling Systems Thinking to Design for a Complex Future
byChris Avore
 
NASSCOM Design4India Design Summit & Awards 2019 - Not Another Brick in the W...
byNASSCOM Design4India
 
The elements of product success for designers and developers
byNick Myers
 
I Hate Process/I Love Process - Why designers are divided about process, and ...
byJoan Vermette
 
Design Thinking for Quality Systems (with Notes)
byMichael Plishka
 
How Design Triggers Transformation presented by Tjeerd Hoek
byfrog
 
Multipying the power of your agile team with Design
byPhil Barrett
 
Innovation needs waste - XP Days Germany 2011
byPierluigi Pugliese
 

More from Thoughtworks

PDF
Culture of Innovation
byThoughtworks
 
PDF
Developer Experience
byThoughtworks
 
PDF
Amazon's Culture of Innovation
byThoughtworks
 
PDF
Customer-centric innovation enabled by cloud
byThoughtworks
 
PDF
Dual-Track Agile
byThoughtworks
 
PDF
Redefining the unit
byThoughtworks
 
PDF
Error handling
byThoughtworks
 
PDF
Cloud-first for fast innovation
byThoughtworks
 
PDF
Docker container security
byThoughtworks
 
PPTX
Technology Radar Webinar UK - Vol. 22
byThoughtworks
 
PDF
When we design together
byThoughtworks
 
PDF
When in doubt, go live
byThoughtworks
 
PDF
Designers, Developers & Dogs
byThoughtworks
 
PDF
Hardware is hard(er)
byThoughtworks
 
PDF
Do No Harm: Do Technologists Need a Code of Ethics?
byThoughtworks
 
PDF
Don't cross the Rubicon
byThoughtworks
 
PDF
More impact with flexible teams
byThoughtworks
 
PDF
Your test coverage is a lie!
byThoughtworks
 
PDF
A Tribute to Turing
byThoughtworks
 
PDF
Rsa maths worked out
byThoughtworks
 
Culture of Innovation
byThoughtworks
 
Developer Experience
byThoughtworks
 
Amazon's Culture of Innovation
byThoughtworks
 
Customer-centric innovation enabled by cloud
byThoughtworks
 
Dual-Track Agile
byThoughtworks
 
Redefining the unit
byThoughtworks
 
Error handling
byThoughtworks
 
Cloud-first for fast innovation
byThoughtworks
 
Docker container security
byThoughtworks
 
Technology Radar Webinar UK - Vol. 22
byThoughtworks
 
When we design together
byThoughtworks
 
When in doubt, go live
byThoughtworks
 
Designers, Developers & Dogs
byThoughtworks
 
Hardware is hard(er)
byThoughtworks
 
Do No Harm: Do Technologists Need a Code of Ethics?
byThoughtworks
 
Don't cross the Rubicon
byThoughtworks
 
More impact with flexible teams
byThoughtworks
 
Your test coverage is a lie!
byThoughtworks
 
A Tribute to Turing
byThoughtworks
 
Rsa maths worked out
byThoughtworks
 

Recently uploaded

PDF
DSD-INT 2025 Flexible Reservoir Modelling with Ribasim - From Simple to Compl...
byDeltares
 
PDF
DSD-INT 2025 Coupled modeling in Ribasim - Linking Water Availability and Qua...
byDeltares
 
PDF
Software Development Company in India.pdf
byitswssoftware
 
PDF
AI Concepts - MCP Neurons
byPhilip Schwarz
 
PDF
apidays Paris 2025 - What If GraphQL Knew Accessibility.pdf
byapidays
 
PDF
Best SaaS Growth Strategy for 2026: Referral Programs That Retain Better
byReferral Factory
 
PDF
apidays Paris 2025 | AI and APIs - Ensuring Platform Migration Reliability wi...
byapidays
 
PDF
Oracle AI Database 26ai _ AI-Native Database for Enterprises.pdf
byAstuteBusiness
 
PDF
ment.tech-What Infrastructure as Code Means for Businesses.pdf
bysj2643598
 
PDF
The Hidden Cost of “Quick” Web App Development
byiProgrammer Solutions Private Limited
 
PPTX
Managing Multiple Projects from One ERP Dashboard - by biCanvas ERP
bybiCanvasERP
 
PDF
End-to-End Web & Mobile App Development Roadmap for Modern Businesses.pdf
byNaestinn
 
PDF
Mastering ROS 2 for Robotics Programming.pdf
byssuser4e6c051
 
PPTX
Computing Adnans presentation OTHM level 3
bymashikhossain23
 
PPTX
Object Oriented Programming - Lecture 02
byAbdul Baqi Malik
 
PPTX
Choosing Your Web3 Architecture: L1 vs L2 vs Appchain
bystorygamemarketing
 
PPT
C++ how to program 10 edition Harvey Deitel
byatisyemen
 
PDF
Dues Collection Software Intelligent Revenue Management.pdf
byCollege Pro
 
PPTX
Why Airline Platforms Fail at Change and How Etihad Fixed It
byIT IDOL Technologies
 
PDF
erp software for trading business in india.pdf
byZipERP
 
DSD-INT 2025 Flexible Reservoir Modelling with Ribasim - From Simple to Compl...
byDeltares
 
DSD-INT 2025 Coupled modeling in Ribasim - Linking Water Availability and Qua...
byDeltares
 
Software Development Company in India.pdf
byitswssoftware
 
AI Concepts - MCP Neurons
byPhilip Schwarz
 
apidays Paris 2025 - What If GraphQL Knew Accessibility.pdf
byapidays
 
Best SaaS Growth Strategy for 2026: Referral Programs That Retain Better
byReferral Factory
 
apidays Paris 2025 | AI and APIs - Ensuring Platform Migration Reliability wi...
byapidays
 
Oracle AI Database 26ai _ AI-Native Database for Enterprises.pdf
byAstuteBusiness
 
ment.tech-What Infrastructure as Code Means for Businesses.pdf
bysj2643598
 
The Hidden Cost of “Quick” Web App Development
byiProgrammer Solutions Private Limited
 
Managing Multiple Projects from One ERP Dashboard - by biCanvas ERP
bybiCanvasERP
 
End-to-End Web & Mobile App Development Roadmap for Modern Businesses.pdf
byNaestinn
 
Mastering ROS 2 for Robotics Programming.pdf
byssuser4e6c051
 
Computing Adnans presentation OTHM level 3
bymashikhossain23
 
Object Oriented Programming - Lecture 02
byAbdul Baqi Malik
 
Choosing Your Web3 Architecture: L1 vs L2 vs Appchain
bystorygamemarketing
 
C++ how to program 10 edition Harvey Deitel
byatisyemen
 
Dues Collection Software Intelligent Revenue Management.pdf
byCollege Pro
 
Why Airline Platforms Fail at Change and How Etihad Fixed It
byIT IDOL Technologies
 
erp software for trading business in india.pdf
byZipERP
 

Design System as a Product

  • 1.
    1 Design Systems as aProduct #YConf2020 © 2020 ThoughtWorks
  • 2.
    2 About us Maleh Duenias SeniorDeveloper @maledr5 Esther Butcher Senior Experience Designer #notwitter
  • 3.
    3 What is aDesign 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 Whatis 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 Inother words, you build it [design system] so it fits your needs [like a product] What is a Design System?
  • 13.
    13© 2020 ThoughtWorks Inother 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 Whatis 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 Whatis 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’sstart with your users
  • 22.
    - [First Name][Last Name] 22© 2020 ThoughtWorks You are not your user. Start with your users
  • 23.
    23© 2020 ThoughtWorks Youare 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 Startwith 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.
  • 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 ofworking 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.
  • 52.
  • 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 Startingsmall Print out interfaces to compare and contrast
  • 58.
    58© 2020 ThoughtWorks Startingsmall Review codebase for existing styles and components
  • 59.
    59© 2020 ThoughtWorks Where’sthe value? Pick relevant and irrelevant parts from a list https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742
  • 60.
    60© 2020 ThoughtWorks Where’sthe value? EFFORT Low High High VALUE Do first Do next Don’t bother Maybe?
  • 61.
    61© 2020 ThoughtWorks Where’sthe 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’sthe 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’sthe value? And, start with what you know.
  • 67.
    67© 2020 ThoughtWorks Where’sthe value? And, start with what you know. Don’t try to predict the future 🔮
  • 68.
    68© 2020 ThoughtWorks Where’sthe value? And, start with what you know. Don’t try to predict the future 🔮 🎨 Foundations, then harvest
  • 69.
    69© 2020 ThoughtWorks Where’sthe 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’sthe 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, releaseearly 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’tforget the big picture!
  • 73.
    73© 2020 ThoughtWorks Don’tforget the big picture! The “System” of Design Systems
  • 74.
  • 75.
    How do people findout about it? 75© 2020 ThoughtWorks The BIG picture
  • 76.
    How do people findout about it? 76© 2020 ThoughtWorks The BIG picture What help do they need to get started?
  • 77.
    How do people findout 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 findout 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 findout 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 findout 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 TheBIG 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 aboutmaintenance 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 TheBIG picture It’s about funding 📈 Efficiency 🤩 Users happy 🧭 Solving real problems
  • 92.
  • 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 EstherButcher Experience Designer ebutcher@thoughtworks.com 100© 2020 ThoughtWorks