How DoorDash created their design system, what their guiding principles and constraints were, the challenges they encountered, their strategies for its adoption and use, how they implemented it in code, and how they continue building it out today.

1. Intro - 1

2. LESSONS ON
Building Design Systems

3. Intro - 3
Design Technologist at DoorDash
Ryan Gonzalez

4. Intro - 4

5. Intro - 5
Agenda
Defining Design Systems
The Problems We Faced
What We Learned Along the Way

6. 6
DEFINING DESIGN SYSTEMS

7. Defining Design Systems - 7
https://medium.com/eightshapes-llc/defining-design-systems-6dd4b03e0ff6
“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.”
— Nathan Curtis

8. Defining Design Systems - 8
“Good intentions never work, you
need good mechanisms to make
anything happen.”
— Jeff Bezos

9. Defining Design Systems - 9
“Good intentions al󰈡󰈝󰇵 never work
at 󰈻󰇸󰈀l󰇵 o󰈸 󰈎󰈞 t󰈊󰇵 󰈘on󰈇 󰉄󰈩r󰈚, you
need good mechanisms to make
anything happen wi󰉃󰈋 c󰈡󰈝󰈼󰈏s󰉃e󰈞t
󰈫󰉉󰇽󰈘it󰉘 󰈀󰈞d 󰈻󰈦󰇵ed.”
— Ryan Gonzalez

10. Defining Design Systems - 10
Provide the infrastructure and
process to help product design and
development produce high quality
work, with speed, at scale.
DESIGN SYSTEMS AT DOORDASH

11. Defining Design Systems - 11
Tools, Components, Style Guides
Process, Culture, Communication
an󰇷

12. Defining Design Systems - 12
What are we trying to solve?

13. Defining Design Systems - 13
qual·i·ty • /ˈkwälədē/ • noun
1. being able to provide a great
experience for our end customers—
Consumers, Merchants and Dashers
2. being consistent where consistency
makes sense
3. enabling product designers to focus on
product decisions, rather than micro-UX

14. Defining Design Systems - 14

15. Defining Design Systems - 15
111 Engineers
14 Product Managers
5 Designers
1 Design Technologist

16. Defining Design Systems - 16
Consumer
Merchant
Dasher
Internal
Drive
iOS
Android
Web
AUDIENCES PLATFORMS

17. Defining Design Systems - 17
What was our approach?

18. Defining Design Systems - 18
High Level Approach
Building Process & Culture
Support Mechanisms
Share solutions when constraints
haven’t changed. Think of design in
layers that can be done independently.
Defining processes, building a culture
of saving and sharing decisions, and
open communication.
Creating components, style
guides, design tools.

19. Defining Design Systems - 19
High Level Approach
Building Process & Culture
Support Mechanisms
Share solutions when constraints
haven’t changed. Think of design in
layers that can be done independently.
Defining processes, building a culture
of saving and sharing decisions, and
open communication.
Creating components, style
guides, design tools.

20. Defining Design Systems - 20
High Level Approach
Building Process & Culture
Support Mechanisms
Share solutions when constraints
haven’t changed. Think of design in
layers that can be done independently.
Defining processes, building a culture
of saving and sharing decisions, and
open communication.
Creating components, style
guides, design tools.

21. Defining Design Systems - 21
“Creating a pattern library is great.
Getting an organization to actually
adopt it? And to maintain it over time?
That is the *work*, right there.”
— Ethan Marcotte, @beep
https://twitter.com/beep/status/959504209367400448

22. 22
THE
PROBLEMS
WE FACED

23. The Problems We Faced - 23
How do we build incrementally?
1

24. The Problems We Faced - 24
How do you get an organization to
adopt a design system?
2

25. The Problems We Faced - 25
How do you build your system to
accommodate feedback and change?
3

26. 26
WHAT
WE ALONG
THE
WAY
LEARNED

27. 27
Build Incrementally
1

28. Build Incrementally - 28
Build in one place
Uncover constraints
Generalize for wider use

29. 29
The Web was our
testing ground

30. Build Incrementally - 30
Typography Color Spacing
Buttons Icons Focus States
Input Fields
Overlay
Pagination Toggles
Modals
Build a foundation first:
NavigationBar
Card

31. Build Incrementally - 31
Figma Components
React Components

32. 32
Figma Components Title - Size: Extra Large
React Components <Title size=“EXTRA_LARGE” />
Design Language System

33. Build Incrementally - 33
red3
primaryAction
Colors

34. Build Incrementally - 34
https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
Spacing

35. 35
Getting Adoption
2

36. Getting Adoption - 36

37. 37
Build Small
Prototypes
Showcase
How To Convert
Existing Code
Write Guidelines
On How to Use
Adopting Styled Components

38. Getting Adoption - 38
Starting on iOS

39. Getting Adoption - 39
WRITE
EVERYTHING
DOWN
Pro󰇹󰈩󰈼s N󰈢󰉃e󰈼
Me󰈩t󰈏󰈝󰈈 Not󰈩󰈻
Des󰈎󰈇󰈞 D󰇵ci󰈻󰈎󰈢󰈞s
Pri󰈝󰇸󰈎p󰈗󰇵󰈼
Tec󰈊󰈞󰈎c󰇽󰈗 C󰈋o󰈎c󰇵󰈻
Ret󰈸󰈡󰈼p󰇵󰇹󰉄iv󰈩󰈻
Ar󰉃i󰇸l󰈩󰈻/Res󰈡󰉊󰈸󰇸es Bug 󰈤󰈩󰈥󰈢󰈹t󰈻
Im󰈥󰈹ov󰈩󰈚󰇵󰈞t I󰇷e󰈀󰈼
Usa󰈇󰈩 󰉋󰉖󰇽m󰈥󰈘es

40. 40
Writing Our Principles

41. 41
Putting the right
documentation in
the right place

42. 42
Designing for Change
3

43. 43
Find a balance between
flexibility and rigidity

44. Designing For Change - 44
Overcommunicate

45. Designing For Change - 45
Have teams adopt incrementally
DoorDash for Business DoorDash Drive Consumer iOS Consumer Web
Time

46. 46
Make it easy to
use the system

47. 47
Trying to share as
much as possible
between tools
Lona
Design Tokens

48. 48
Summary
Build incrementally, build foundations first
People & culture over process & components
Design with change in mind
1
2
3

49. 49
WHAT’S NEXT?

50. 50
Mobile: iOS and Android
Design Tokens
Building a team

51. 51
Thank you!