You'll learn: How Forumone builds and implements design systems for their clients How to plan, create, sell, and implement a design system How to use common design tools to build a design system developers will use

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

2. Accounting for Quantity and Scalability
Amy Vainieri & Courtney Clark
UX at Scale Virtual Summit | October 5, 2017
#DesignSystems
Design Systems

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. There are 20+ button styles

10. Many products.
Many screens.

11. handoff or sharing
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. Entire Project = 8 months
Discovery = 2 months
UX & Design = 3-4 months
Front & Back Dev = 3-4 months

19. Project Manager (x2)
UX Designer (x2)
Content Strategist
Visual Designer
Back-End Developer (x5+)
Front-End Developer (x2+)
Project
Team

20. Product Owners (x2)
Executive Director
Communications Staff (x10)
Developers (x2)
Analyst
Content Authors (x200!)
Located in 60 countries
across 15 programs
Client

21. UXPin
Photoshop
InVision
Gather Content
Zoom
Pattern Lab
Wagtail
Tools

22. Discovery

23. Wireframes

24. Digital design
system…
What are our ingredients?

25. Elements
Building Blocks
Pages
Basics

26. Basics

27. Elements
Building Blocks
Pages
Basics

28. Elements

29. Elements
Building Blocks
Pages
Basics

30. Building Blocks

31. Building Blocks

32. Elements
Building Blocks
Pages
Basics

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

35. #DesignSystems Lesson
Power Jams
Wins

37. #DesignSystems Lesson
Power Jams
Wins Design Review
Content Prep
Design Inventory
Preparation

39. #DesignSystems Lesson
Power Jams
Wins Design Review
Content Prep
Design Inventory
Preparation
Luck

40. #DesignSystems Lesson
Start earlier
Next
Time Outline rules
Choose a home

41. After Launch
The story continues…

42. Extending
the system

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

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

45. 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

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

47. Consistency
Efficiency & Teamwork
Scalability

48. Consistency
Efficiency & Teamwork
Scalability

49. Consistency
Efficiency & Teamwork
Scalability

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

51. Consistency
Efficiency & Teamwork
Scalability

52. #DesignSystems Lesson
Scalability
Benefits Consistency
Efficiency
& Teamwork

53. How do you get
buy in?

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

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

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

57. What about
clients?

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

59. Tips and Tricks

60. Be consistent!

61. WIN!

62. Be organized!

63. WIN!

64. Communicate!

65. WIN!

66. Code!

67. WIN!

68. Decide on the afterlife!

69. WIN!

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

71. Like fun
404 pages
and pre-
loaders.

72. Who wouldn’t want
more delight?

73. Thank you.

74. Rollout
Handoff
Educate / Buy-in
Keep it Fresh
Questions
we’re still
working on

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