Drew has spent the better part of the last two years leading the charge on launching and managing the global design system at AIG. Learn some of the battle-tested tips, tricks, and methods gained during the process including how to: - Manage contribution and intake - Manage “snowflake” vs system components - Support multiple brands with a single system - Track and measure the ROI of your system - Perpetuate buy-in Bio Drew Burdick is a multi-faceted design leader with over a decade of experience. He founded and led a creative agency, led top accounts at Red Ventures, and most recently helped to transform product design at AIG by leading a team to establish their global design system. He is now a leader with the Experience Design practice at Slalom, helping to drive client engagements in the Charlotte market.

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