1.
B U I L D I N G A M A T U R E
D E S I G N S Y S T E M
@ D R E W H B U R D I C K🛠

2.
2
1. Backstory
2. Laying the foundation
3. Cultivating buy-in
4.Governance
5. Handling brands
6. Measuring impact
OVERVIEW

3.
3
LET’S DO SOME QUICK CONTEXT SETTING
BEFORE WE GET STARTED

4.
“…An adaptable system of guidelines, components, and tools
that support the best practices of user interface design. [It]
streamlines collaboration between designers and developers,
and helps teams quickly build beautiful products.”
Google

5.
5

6.
6

7.
7

8.
8

9.
9

10.
10
ALRIGHT,
SO A LITTLE ABOUT ME

11.
11
DREW
BURDICK C R E A T I V E D I R E C T O R
H U N T E R C R E A T I V E
L E A D D E S I G N E R
R E D V E N T U R E S
09 -15 15-17
"

12.
12
D E S I G N D I R E C T O R
A I G
S O L U T I O N P R I N C I P A L
S L A L O M
17-19 NOW

13.
13
ALSO,

14.
14

15.
15
A LITTLE DISCLAIMER
BEFORE WE DIVE IN

16.
16

17.
17
BUT REALLY, WE’RE ALL STILL FIGURING THIS OUT…

18.
18
1
BACKSTORY

19.
19
• Fortune 100 insurance company
• 100+ years old
• 50K+ employees
• Offices worldwide

20.
20
MY NEW BOSS ASKED ME TO
“BUILD A DESIGN SYSTEM”
1 MONTH AFTER I STARTED

21.
21
MY RESPONSE…

22.
22
😎“I totally got this.”

23.
23
I STARTED WITH AN AUDIT
LIKE A GOOD ATOMIC DESIGN ENTHUSIAST

24.
24

25.
25
I TALKED WITH AS MANY PEOPLE AS POSSIBLE
TO UNDERSTAND THE CURRENT STATE
Also,

26.
26
• 2000+ digital products with decades of tech debt
• Siloed teams & IT “fiefdoms”
• Brand guidelines with limited digital coverage
• Numerous tools, tech stacks, pattern libraries,
style guides, etc, etc.
RESULTS

27.
27
ULTIMATELY,

28.
28
NO ALIGNMENT
ON DIGITAL STANDARDS

29.
29
MY RESPONSE…

30.
30
😳“I don’t got this.”

31.
31
2
LAYING THE FOUNDATION

32.
32
• Current ecosystem
• Key players
• Competing priorities
• “Most successful” products & why
UNDERSTAND
FIRST I SOUGHT TO
🕵

33.
33
• A design language from most successful products
• Potential collaborators from across disciplines
• A possible proof of concept
DEFINED
THEN I
📝

34.
34
WHICH ULTIMATELY BECAME

35.
Hinge Design System

36.
36
• To improve utilization & efficiency
• To elevate customer experience through
visual consistency
• To reduce friction throughout entire
product development process
PURPOSE
HINGE’S
🎯

37.
37
• Always put users first
• Approachable innovation
• Add value, not noise
PRINCIPLES
HINGE’S GUIDING

38.
38
• From 6 months to 3 sprints
• Smooth hand-off to development
• Faster QA & visual hardening
• Enabled team to focus on improving
user experience
VALIC MOBILE
PROOF OF CONCEPT
📱

39.
39
3
CULTIVATING BUY-IN

40.
40
PRODUCT
TREAT IT LIKE A
• Establish a clear vision
• Give it a name & identity
• Define an accountable product owner
• Develop a roadmap with major milestones that
align with the priorities of your organization
🗺

41.
41
SMALL
START
• Focus on one product at a time
• Focus on one team at a time
• Focus on one component at a time
⚙

42.
42
SOCIALIZING
ALWAYS BE
• Go on a roadshow
• Know your audience & speak their language
• Top down, bottom up
• Regularly highlight success stories
• Show how the system fits within the ecosystem
🤝

43.
43
MAKE IT CLEAR
THE SYSTEM IS NOT
• Comprehensive or finished
• Meant to replace strategic design, research or testing
ROADSHOW WARNING
⚠

44.
44
CONNECTIVE
TISSUE
CREATE
• Get others involved early
• Have cross-functional representation
• Link up with others who are doing the same thing
• Include your users in the decision-making process
(designers, developers, product, etc.)
🔗

45.
45
EARLY
& OFTEN
COMMUNICATE
• People don’t like surprises
• Make sure your key stakeholders and users are aware of
upcoming changes well in advance
• Be transparent with your roadmap & backlog
📣

46.
46
CARROT
LEAD WITH A
• Don’t mandate rules
• Focus on driving as much value for teams as possible by
helping make their lives easier
🥕

47.
47
4
GOVERNANCE

48.
48
CONTRIBUTION
& INTAKE
SOME WAYS TO HANDLE
• Cross-disciplinary council
• Team rotation
• “Office hours”
• Backlog submission

49.
49
COUNCIL
DESIGN SYSTEM
Cross-functional body comprised of leadership from
various teams that help manage & maintain the system.

50.
50
ROTATION
DESIGN SYSTEM
A regular rotation of key roles within the design system
team to bring fresh perspectives & ideas.

51.
51
OFFICE HOURS
DESIGN SYSTEM
A regular cadence of time to meet with & share ideas &
opportunities with members of the design system team.

52.
52
BACKLOG SUBMISSION
DESIGN SYSTEM
A standardized way for members of an organization to
submit potential components or features for the system.

53.
53
SNOWFLAKES
VS SYSTEM
IDENTIFYING
Snowflake - Born from a specific product need
System - General need for all products
❄

54.
54
THINGS TO
CONSIDER
SNOWFLAKES
• Does this component already exist in the system?
• Can a related component be used instead?
• Can this component be generalized so that other
products may benefit from it?
⛄

55.
55
CONTRIBUTION FLOW

56.
56
5
HANDLING BRANDS

57.
57
MULTIPLE
BRANDS
ONE SYSTEM
• A “system of systems” with a common skeleton &
well defined brand variables
• Include only what is reusable across all brands
• Define & implement a clear process for how to
create & maintain a child system from the parent
• Invest heavily in onboarding & training teams on
how to maintain the child system

58.
58
BRAND
VARIABLES
DEFINING
• Color (e.g. shades, tints, etc.)
• Type (e.g. font family, size, weight, line height, etc.)
• Standard UI elements (e.g. inputs, buttons, etc.)
• Elevation (e.g. shadows)
• Icons & illustrations
• Imagery

59.
59
6
MEASURING IMPACT

60.
60
SYSTEM
KPI’S
DEFINING • Quality & efficiency
• Causation & correlation

61.
61
EFFICIENCY
QUALITATIVE IMPACT Survey & interview teams to understand
perceived impact on efficiency before & after

62.
62
Survey & interview end users to understand
perceived impact on quality before & after (e.g.
usability, consistency, readability, etc.)
QUALITY
QUALITATIVE IMPACT

63.
63
• Story points per sprint
• Time spent per user story
• Time spent in design
• Time spent in development
• Time in QA
• And more…
EFFICIENCY
QUANTITATIVE IMPACT

64.
64
• Accessibility
• Page speed
• Typical interaction metrics
• And more…
QUALITY
QUANTITATIVE IMPACT

65.
65
7
WRAPPING UP

66.
TAKEAWAYS
A FEW KEY
• Have a clear north star
• Always be socializing
• Focus on people over process
• Lead with a carrot, not a stick

67.
RESOURCES
A FEW GREAT
• news.design.systems
• design.systems/slack
• designbetter.co/design-systems-handbook
• designsystemfoundations.com
• designsystemssurvey.seesparkbox.com

68.
T H A N K S !
@ D R E W H B U R D I C K