Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Building a Mature Design System Slide 1 Building a Mature Design System Slide 2 Building a Mature Design System Slide 3 Building a Mature Design System Slide 4 Building a Mature Design System Slide 5 Building a Mature Design System Slide 6 Building a Mature Design System Slide 7 Building a Mature Design System Slide 8 Building a Mature Design System Slide 9 Building a Mature Design System Slide 10 Building a Mature Design System Slide 11 Building a Mature Design System Slide 12 Building a Mature Design System Slide 13 Building a Mature Design System Slide 14 Building a Mature Design System Slide 15 Building a Mature Design System Slide 16 Building a Mature Design System Slide 17 Building a Mature Design System Slide 18 Building a Mature Design System Slide 19 Building a Mature Design System Slide 20 Building a Mature Design System Slide 21 Building a Mature Design System Slide 22 Building a Mature Design System Slide 23 Building a Mature Design System Slide 24 Building a Mature Design System Slide 25 Building a Mature Design System Slide 26 Building a Mature Design System Slide 27 Building a Mature Design System Slide 28 Building a Mature Design System Slide 29 Building a Mature Design System Slide 30 Building a Mature Design System Slide 31 Building a Mature Design System Slide 32 Building a Mature Design System Slide 33 Building a Mature Design System Slide 34 Building a Mature Design System Slide 35 Building a Mature Design System Slide 36 Building a Mature Design System Slide 37 Building a Mature Design System Slide 38 Building a Mature Design System Slide 39 Building a Mature Design System Slide 40 Building a Mature Design System Slide 41 Building a Mature Design System Slide 42 Building a Mature Design System Slide 43 Building a Mature Design System Slide 44 Building a Mature Design System Slide 45 Building a Mature Design System Slide 46 Building a Mature Design System Slide 47 Building a Mature Design System Slide 48 Building a Mature Design System Slide 49 Building a Mature Design System Slide 50 Building a Mature Design System Slide 51 Building a Mature Design System Slide 52 Building a Mature Design System Slide 53 Building a Mature Design System Slide 54 Building a Mature Design System Slide 55 Building a Mature Design System Slide 56 Building a Mature Design System Slide 57 Building a Mature Design System Slide 58 Building a Mature Design System Slide 59 Building a Mature Design System Slide 60 Building a Mature Design System Slide 61 Building a Mature Design System Slide 62 Building a Mature Design System Slide 63 Building a Mature Design System Slide 64 Building a Mature Design System Slide 65 Building a Mature Design System Slide 66 Building a Mature Design System Slide 67 Building a Mature Design System Slide 68
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

4 Likes

Share

Download to read offline

Building a Mature Design System

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Building a Mature Design System

  1. 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. 2 1. Backstory 2. Laying the foundation 3. Cultivating buy-in 4.Governance 5. Handling brands 6. Measuring impact OVERVIEW
  3. 3. 3 LET’S DO SOME QUICK CONTEXT SETTING BEFORE WE GET STARTED
  4. 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. 5
  6. 6. 6
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10. 10 ALRIGHT, SO A LITTLE ABOUT ME
  11. 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. 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. 13 ALSO,
  14. 14. 14
  15. 15. 15 A LITTLE DISCLAIMER BEFORE WE DIVE IN
  16. 16. 16
  17. 17. 17 BUT REALLY, WE’RE ALL STILL FIGURING THIS OUT…
  18. 18. 18 1 BACKSTORY
  19. 19. 19 • Fortune 100 insurance company • 100+ years old • 50K+ employees • Offices worldwide
  20. 20. 20 MY NEW BOSS ASKED ME TO “BUILD A DESIGN SYSTEM” 1 MONTH AFTER I STARTED
  21. 21. 21 MY RESPONSE…
  22. 22. 22 😎“I totally got this.”
  23. 23. 23 I STARTED WITH AN AUDIT LIKE A GOOD ATOMIC DESIGN ENTHUSIAST
  24. 24. 24
  25. 25. 25 I TALKED WITH AS MANY PEOPLE AS POSSIBLE TO UNDERSTAND THE CURRENT STATE Also,
  26. 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. 27 ULTIMATELY,
  28. 28. 28 NO ALIGNMENT ON DIGITAL STANDARDS
  29. 29. 29 MY RESPONSE…
  30. 30. 30 😳“I don’t got this.”
  31. 31. 31 2 LAYING THE FOUNDATION
  32. 32. 32 • Current ecosystem • Key players • Competing priorities • “Most successful” products & why UNDERSTAND FIRST I SOUGHT TO 🕵
  33. 33. 33 • A design language from most successful products • Potential collaborators from across disciplines • A possible proof of concept DEFINED THEN I 📝
  34. 34. 34 WHICH ULTIMATELY BECAME
  35. 35. Hinge Design System
  36. 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. 37 • Always put users first • Approachable innovation • Add value, not noise PRINCIPLES HINGE’S GUIDING
  38. 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. 39 3 CULTIVATING BUY-IN
  40. 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. 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. 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. 43 MAKE IT CLEAR THE SYSTEM IS NOT • Comprehensive or finished • Meant to replace strategic design, research or testing ROADSHOW WARNING ⚠
  44. 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. 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. 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. 47 4 GOVERNANCE
  48. 48. 48 CONTRIBUTION & INTAKE SOME WAYS TO HANDLE • Cross-disciplinary council • Team rotation • “Office hours” • Backlog submission
  49. 49. 49 COUNCIL DESIGN SYSTEM Cross-functional body comprised of leadership from various teams that help manage & maintain the system.
  50. 50. 50 ROTATION DESIGN SYSTEM A regular rotation of key roles within the design system team to bring fresh perspectives & ideas.
  51. 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. 52 BACKLOG SUBMISSION DESIGN SYSTEM A standardized way for members of an organization to submit potential components or features for the system.
  53. 53. 53 SNOWFLAKES VS SYSTEM IDENTIFYING Snowflake - Born from a specific product need System - General need for all products ❄
  54. 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. 55 CONTRIBUTION FLOW
  56. 56. 56 5 HANDLING BRANDS
  57. 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. 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. 59 6 MEASURING IMPACT
  60. 60. 60 SYSTEM KPI’S DEFINING • Quality & efficiency • Causation & correlation
  61. 61. 61 EFFICIENCY QUALITATIVE IMPACT Survey & interview teams to understand perceived impact on efficiency before & after
  62. 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. 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. 64 • Accessibility • Page speed • Typical interaction metrics • And more… QUALITY QUANTITATIVE IMPACT
  65. 65. 65 7 WRAPPING UP
  66. 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. 67. RESOURCES A FEW GREAT • news.design.systems • design.systems/slack • designbetter.co/design-systems-handbook • designsystemfoundations.com • designsystemssurvey.seesparkbox.com
  68. 68. T H A N K S ! @ D R E W H B U R D I C K
  • raykill

    Apr. 16, 2020
  • reeboot

    Nov. 14, 2019
  • CrystalSundaramoorth

    Nov. 13, 2019
  • alexdaniels11

    Nov. 12, 2019

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.

Views

Total views

661

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

4

Shares

0

Comments

0

Likes

4

×