O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Building a Mature Design System

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.

  • Entre para ver os comentários

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

×