Design Systems are a valuable asset to product teams of all sizes. They unify applications, creating a single “source of truth” for UI elements, UX principles, content strategy guidelines, and re-usable code for the components. Design Systems also add business value by reducing redundancy, outlining a strategic product vision, and keeping design and development in sync across products. Integrating the Design System and building collaboration into the product development process is key to the success for the lifetime of the products. Learning Outcomes: - Define the Design System - Learn to sell the Design System to business leaders - Integrate the Design System into an Agile development process - Design an application and build a Design System

1. @thewolfe
DESIGN SYSTEMS +
YOUR PRODUCT
Mark Wolfe @thewolfe

2. @thewolfe
Hi. I’m Mark
@thewolfe @wolfedesign

3. @thewolfe
GOALS// YOU’LL LEAVE WITH SOMETHING
WHAT IS THIS
MYSTERIOUS
“DESIGN SYSTEM?”

4. @thewolfe
GOALS// YOU’LL LEAVE WITH SOMETHING
WHAT IS THIS
MYSTERIOUS
“DESIGN SYSTEM?”
WHY DOES MY
ORGANIZATION
NEED ONE?

5. @thewolfe
GOALS// YOU’LL LEAVE WITH SOMETHING
WHAT IS THIS
MYSTERIOUS
“DESIGN SYSTEM?”
WHY DOES MY
ORGANIZATION
NEED ONE?
HOW DO WE BUILD
AND SCALE OUR
DESIGN SYSTEM?

6. @thewolfe
“A design system is a collection of reusable
components, guided by clear standards,
that can be assembled together to build
any number of applications.”
- Invision Blog

7. @thewolfe
© Brad Frost - Atomic Design

8. @thewolfe
© Wolfram Nagel + Brad Frost

9. @thewolfe

10. @thewolfe

11. @thewolfe

12. @thewolfe
DESIGN
“The interactions + style”

13. @thewolfe
DESIGN
“The interactions + style”
DEVELOP
“The reusable code”

14. @thewolfe
DESIGN
“The interactions + style”
DEVELOP
“The reusable code”
DISCUSS
“The words and voice”

15. @thewolfe
DESIGN
COLORS ICONSTYPE GRIDS FORMS
Tt

16. @thewolfehttps://designsystemssurvey.seesparkbox.com

17. @thewolfe
DEVELOP
DESIGN TOKENS CODE SNIPPETS REPOSITORIESSTYLE RULES

18. @thewolfe
DISCUSS
DESIGN
PRINCIPLES
CONTENT
STRATEGY
TONE, VOICE
+ WORDS
PRODUCT
VISION

19. @thewolfe
“Click” here…

20. @thewolfe
“Tap” this…

21. @thewolfe

22. @thewolfe
“Select?”

23. @thewolfe
THE BENEFITS
1. Single source of truth

24. @thewolfe
THE BENEFITS
1. Single source of truth
2. Consistency

25. @thewolfe
THE BENEFITS
1. Single source of truth
2. Consistency
3. Keep code + design in sync

26. @thewolfe
THE BENEFITS
1. Single source of truth
2. Consistency
3. Keep code + design in sync
4. Reduced redundancy

27. @thewolfe
THE BENEFITS
1. Single source of truth
2. Consistency
3. Keep code + design in sync
4. Reduced redundancy
5. Optimal Product Sexiness!

28. @thewolfe

29. @thewolfe

30. @thewolfe

31. @thewolfe

32. @thewolfe
WHERE DO WE BEGIN?

33. @thewolfe
To Do Doing Done!

34. @thewolfe
To Do Doing Done!
Save Money

35. @thewolfe
“Design systems also save time and money.
Just by eliminating code redundancy, more
than 20% of a developer’s time can be
regained. For a team of 100 developers, this
means around $2 million per year.”
- projekt202 Managing Architect Drew Loomer

36. @thewolfe
Can you rebuild this,
it doesn’t match the
design?
Are developers spending 30 minutes/day on any of these?
Via UXPin
Does this meet the
code standards?
What’s the latest
documentation?
How do we build
this pattern?
Where are our
components?

37. @thewolfe
2.5h/week * 52 weeks * $75 * 50 devs = $487,500/year
GETTING BUY IN // DEV TEAM ROI
$75 per hour. Team of 50 developers.
Via UXPin

38. @thewolfe
• Decreased development + design cost
• Faster time to market
• Better product quality
• Happier customers
GETTING BUY IN // SAVING MONEY

39. @thewolfe
Build a
Design
System
To Do Doing Done!
Save Money

40. @thewolfe
DESIGN SYSTEM PROCESS
Audit Get Buy In Build Validate Document Scale
EVALUATION ESTABLISHMENT

41. @thewolfe
The average enterprise has deployed
8 apps, has 2.6 in development and
6.2 planned for the next 12 months.
https://gtnr.it/2NQabs8

42. @thewolfe
AUDIT // THE ECOSYSTEM
Core
Products
Expense
Reporting
CRM Intranets Webmail
HR
Core
Job Tools
Time Tracking
Finance
Project
Planning
Knowledge
Base
Corporate
Social
Industry
Tools
Learning
Management
Product
Manuals

43. @thewolfe
Identify all of the
products in your
organization’s ecosystem.
AUDIT // THE ECOSYSTEM

44. @thewolfe
FRAMEWORK WEB COMPONENTS
• Seamless integration with
your products
• Faster delivery using
existing expertise
• Native code
• Proven technology
• Most future proof
• Enables Prototypers to quickly
update
• Web standard
• Builds organizational skillsets
outside of Frameworks

45. @thewolfe
AUDIT // THE PATTERNS
https://www.designbetter.co/design-systems-handbook/introducing-design-systems

46. @thewolfe
AUDIT // THE PATTERNS

47. @thewolfe
The details are not the details.
They make the design.
- Charles + Ray Eames

48. @thewolfe
What is the purpose of
this product?
1

49. @thewolfe
Who are the intended
users of this product?
What is the purpose of
this product?
1 2

50. @thewolfe
Who are the intended
users of this product?
What motivates users to
use this product?
What is the purpose of
this product?
31 2

51. @thewolfe
Who are the intended
users of this product?
What motivates users to
use this product?
What devices are
accessing this product?
What is the purpose of
this product?
3 41 2

52. @thewolfe
Who are the intended
users of this product?
What motivates users to
use this product?
What devices are
accessing this product?
Where is this product
physically being used?
What is the purpose of
this product?
3 41 2
5

53. @thewolfe
Who are the intended
users of this product?
What motivates users to
use this product?
What devices are
accessing this product?
Where is this product
physically being used?
What is the biggest
market challenge(s)
facing this product?
What is the purpose of
this product?
3 41 2
5 6

54. @thewolfe
Who are the intended
users of this product?
What motivates users to
use this product?
What devices are
accessing this product?
Where is this product
physically being used?
What is the biggest
market challenge(s)
facing this product?
What is the purpose of
this product?
What is the biggest
organizational
challenge(s) facing this
product?
3 41 2
75 6

55. @thewolfe
Who are the intended
users of this product?
What motivates users to
use this product?
What devices are
accessing this product?
Where is this product
physically being used?
What is the biggest
market challenge(s)
facing this product?
What is the purpose of
this product?
What is the biggest
organizational
challenge(s) facing this
product?
How is “quality” defined
for this product?
3 41 2
7 85 6

56. @thewolfe
Speed of production
“Quality”

57. @thewolfe
Speed of production
“Quality”
#@!&%
Yes!
Maybe
Maybe
Nah, we’re cool

58. @thewolfe
Speed of production
“Quality”
#@!&%
Yes!
Maybe
Maybe
Nah, we’re cool

59. @thewolfe
Speed of production
“Quality”
#@!&%
Yes!
Maybe
Maybe
Nah, we’re cool
Grawlix!

60. @thewolfe
BUILD // THE PRODUCT
Any successful Design System must be
treated and supported as a product.

61. @thewolfe
Build the
Design
System
To Do Doing Done!
Make Sexy
Products
Save Money
Build a
Design
System

62. @thewolfe
BUILD // THE TEAM
UX
Frontend
Devs
Copy
Editors
Visual
Designers
Core Team

63. @thewolfe
BUILD // THE TEAM
UX
Frontend
Devs
Copy
Editors
Visual
Designers
Core Team
Contributor
Contributor
Contributor
Contributor

64. @thewolfe
https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
Overlord Model
BUILD // THE TEAM

65. @thewolfe
https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
Centralized Model
BUILD // THE TEAM

66. @thewolfe
https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
Federated Model
BUILD // THE TEAM

67. @thewolfe
Add the key people
responsible for the products
identified, and roles to make
design changes.

68. @thewolfe
CODE
SNIPPETS
STYLE RULES CONTENTNAMING
CONVENTIONS
DOCUMENT

69. @thewolfe
1
Audit + Plan
0
No Adoption
3
Priority
Components
2
Core Style
4
Increase
Adoption
Framework, tech stack
discovery
Team has audited and
tuned assets
Team has groomed the
work and created a
roadmap and backlog
No Branding or Identity
No product unification
Dated Aesthetic
Color
Typography
Icons
Spacing
Buttons
Forms
Headings, article text
Tabs
Search Bar
Grids
Data Tables
Modals
Toggles
ADOPTION + MATURITY
Varies based on priority
5
Marketing
Release
Marketing Site
Complex Components
Data Visualization

70. @thewolfe
Identify the 10 most
important categories for
your product’s success.
Inspired by Nathan Curtis

71. @thewolfe
Identify the most
important 25 parts for
your product’s
success.

72. @thewolfe
1. What is most important to the system?
2. What is the quickest win?
3. What is easiest to get on the backlog?
GETTING IT PRIORITIZED

73. @thewolfe
Implementation
Impact
GETTING IT PRIORITIZED

74. @thewolfe
• Speak A little more about Design Systems
• Align your product values to a Design System
• Sell + promote your Design System within your organization
• Build your team
• Get started with your backlog
HOPEFULLY, YOU’RE MORE PREPARED TO…

75. @thewolfe
LET’S GET CONNECTED.
@thewolfe @wolfedesign @markswolfe