1. The document discusses the benefits of design systems for handling large quantities of content and scaling websites over time. It notes consistency, efficiency, teamwork, and scalability as key benefits. 2. A case study example shows how a design system with core elements, building blocks, and pages allows for many variations like a taco menu. Maintaining the system is important for continued use and extension. 3. Getting buy-in requires framing the benefits in terms of investment returns like reduced costs and improved collaboration over time. Teaching clients the approach also helps secure support.

1. Accounting for Quantity and Scalability
Amy Vainieri & Courtney Clark
O’Reilly Design Conference, San Francisco
March 21, 2017
#DesignSystems
Design Systems

2. When a technology
matures, design moves to
the foreground because
the underlying machinery
has been commoditized.
“
John Maeda
Design in Tech Report

3. Hello.
Amy
@avainie
Courtney
@circlish

4. Who are you?

5. Have you used
a design system?

6. Who loves
a good design
system?

7. Who is…
still not
sure?

8. How do you
know if you need
a design system?

9. Your site has 20+ button styles

10. Your site will evolve
or grow over time.

11. sharing or turnover
You have a lot of project

12. So…what is a
design system?

13. 1 2 3 4 5 6 7 8

14. ImagesviaTacoBell
+ More variation!

15. 8 ingredients
=
50+ menu options!

16. Case Study
A design system in the wild.

17. AfterBefore

18. Wireframes

19. Digital design
system…
What are our ingredients?

20. Elements
Building Blocks
Pages
Basics

21. Basics

22. Elements
Building Blocks
Pages
Basics

23. Elements

24. Elements
Building Blocks
Pages
Basics

25. Building Blocks

26. Building Blocks

27. Elements
Building Blocks
Pages
Basics

28. Pages
Average Hero
Stat Boxes
Volunteer Openings
Teasers
Quote (with button)
Story Teasers
Image Gallery
Support Teasers
Share Bar

29. Why use
a design
system?
Scalability
Consistency
Efficiency
& Teamwork

30. Consistency
Efficiency & Teamwork
Scalability

31. Consistency
Efficiency & Teamwork
Scalability

32. Consistency
Efficiency & Teamwork
Scalability

33. This design system has
made my life rainbows
and unicorns.
“Dan Mouyard
Front-End Developer Extraordinaire

34. Consistency
Efficiency & Teamwork
Scalability

35. #DesignSystems Lesson
Scalability
Benefits Consistency
Efficiency
& Teamwork

36. After Launch
The story continues…

37. Extending
the system

38. 1. What already exists?
2. What is the significance?
3. How will it be used again
in the future?
Ask:

39. Guard the
system, or it will
unravel quickly.
#DesignSystems Lesson

40. It was vital to understand
the genesis of the design
system. After that, it was
easy peasy to maintain
and extend the system.
“
Sarah Coles
Designer Extraordinaire

41. How do you get
buy in?

42. “
John Maeda
Design in Tech Report
‘Scale’ a company’s design
function through better
managing/leading of
designers and shareable
design systems

43. Time
Developing & Refining System Implementing System
Money
Design System
Traditional Process
Frame it around investment.

44. Project Management
DevelopmentUser Experience
Design
System
Business Development
GovernanceDesign & Branding

45. What about
clients?

46. Teach your clients.
Share your approach.
#DesignSystems Lesson

47. Tips and Tricks

48. Be consistent!

49. Be organized!

50. Document!

51. Communicate!

52. Code!

53. Decide on the afterlife!

54. You have bigger
fish to fry.
#DesignSystems Lesson

55. Like fun
404 pages
and pre-
loaders.

56. Who wouldn’t want
more delight?

57. Ask us anything.
avainieri@taoti.com
@avainie
cclark@forumone.com
@circlish
#DesignSystems