Updated presentation for the Big Design Conference 2017. Atomic design, pattern libraries, modular design—the process of designing with a system goes by many names, but regardless of what you call it, the advantages of this process are clear. Whether you’re on a large team or a small one, taking on a huge project or a one-page website, working with a design system can help make your project more efficient and infinitely scalable, provided you take the time to set yourself and your team up for success. Amy Vainieri and Courtney Clark explain how Forum One used a robust design system when recently tackling an enormous user experience and design challenge: a website for a large, service-based government organization targeted at millennials, with stakeholders in over 60 countries. Amy and Courtney share their strategy from this project and offer takeaways from the experience that have influenced their other ongoing projects. You’ll learn how a design system works, the benefits of creating one, and options for how to implement a system on projects. You’ll also get some tips and tricks for creating a process and resources that can be easily implemented by developers.

1. Accounting for Quantity and Scalability
Amy Vainieri & Courtney Clark
Big Design Conference | September 16, 2017
#DesignSystems
Design Systems

2. Hello.
Amy
@avainie
Courtney
@circlish

3. Who are you?

4. Have you used
a design system?

5. Who loves
a good design
system?

6. Who
is…still
not
sure?

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

8. There are 20+ button styles

9. Many products.
Many screens.

10. handoff or sharing
You have a lot of project

11. So…what is a
design system?

12. 1 2 3 4 5 6 7 8

13. ImagesviaTacoBell
+ More variation!

14. 8 ingredients
=
50+ menu options!

15. Case Study
A design system in the wild.

16. AfterBefore

17. Entire Project = 8 months
Discovery = 2 months
UX & Design = 3-4 months
Front & Back Dev = 3-4 months

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

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

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

21. Discovery

22. Wireframes

23. Digital design
system…
What are our ingredients?

24. Elements
Building Blocks
Pages
Basics

25. Basics

26. Elements
Building Blocks
Pages
Basics

27. Elements

28. Elements
Building Blocks
Pages
Basics

29. Building Blocks

30. Building Blocks

31. Elements
Building Blocks
Pages
Basics

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

34. #DesignSystems Lesson
Power Jams
Wins

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

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

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

40. After Launch
The story continues…

41. Extending
the system

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

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

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

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

46. Consistency
Efficiency & Teamwork
Scalability

47. Consistency
Efficiency & Teamwork
Scalability

48. Consistency
Efficiency & Teamwork
Scalability

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

50. Consistency
Efficiency & Teamwork
Scalability

51. #DesignSystems Lesson
Scalability
Benefits Consistency
Efficiency
& Teamwork

52. How do you get
buy in?

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

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

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

56. What about
clients?

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

58. Tips and Tricks

59. Be consistent!

60. WIN!

61. Be organized!

62. WIN!

63. Communicate!

64. WIN!

65. Code!

66. WIN!

67. Decide on the afterlife!

68. WIN!

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

70. Like fun
404 pages
and pre-
loaders.

71. Who wouldn’t want
more delight?

72. Thank you.

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

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