Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Systems of Systems, UXLX 2019

Systems of Systems, UXLX 2019

D3d6d307f114d3da3c833966a9d8ab64?s=128

Nathan Curtis

May 24, 2019
Tweet

Transcript

  1. S B B S S S S S S S

    P # P # P # P # P # P # P # P # P # P # P # P # P # P # P # Systems of Systems Nathan Curtis UXLX, Friday May 24, 2019 Copyright 2019 EightShapes LLC
  2. 2 Washington, DC (actually, Northern Virginia) with Dan Brown IA

    ➜ UX ➜ Design Systems Write about, lead (~2-4/year) and coach design system programs Hi, I’m Nathan!
  3. 3 Color Typography Iconography Space Borders Shape Barlow Visual Style

    UI Components Heading L1 Body-Large Textbox Form Label Select Button Body-Medium Link System Sign In Forgot Password? First Name Sign In Elaborating on a header Don't have an account?
  4. Product 4 Color Typography Iconography Space Borders Shape Barlow Visual

    Style UI Components Heading L1 Body-Large Textbox Form Label Select Button Body-Medium Link System Sign In Forgot Password? First Name Sign In Elaborating on a header Don't have an account? Sign In with your EightShapes account Email Address Sign In Password Forgot password? Don’t have an account? Sign up now. Create an account
  5. 5 Barlow Visual Style UI Components System Sign In Forgot

    Password? First Name Sign In Elaborating on a header Don't have an account? Learn more about why we ask for this information. Create your EightShapes Account Email Address First Name Last Name Password Confirm Password Mobile Phone Next Step Enter your phone number or email: Forgot Password? Next Product Sign In Page Create Account Page Forgot Password Pag
  6. 6 Barlow Visual Style UI Components System Sign In Forgot

    Password? First Name Sign In Elaborating on a header Don't have an account? Learn more about why we ask for this information. Create your EightShapes Account Email Address First Name Last Name Password Confirm Password Mobile Phone Next Step Enter your phone number or email: Forgot Password? Next Product Sign In Page Create Account Page Forgot Password Page Designer
  7. P 7 Barlow Visual Style UI Components System Sign In

    Forgot Password? First Name Sign In Elaborating on a header Don't have an account? Learn more about why we ask for this information. Create your EightShapes Account Email Address First Name Last Name Password Confirm Password Mobile Phone Next Step Enter your phone number or email: Forgot Password? Next Product Sign In Page Create Account Page Forgot Password Page Designer Engineer Sign In Page Create Account Page Forgot Password Engineer 2
  8. P P Barlow Visual Style UI Components System Sign In

    Forgot Password? First Name Sign In Elaborating on a header Don't have an account? 6 Teams? P P P P
  9. S Barlow Visual Style UI Components System Sign In Forgot

    Password? First Name Sign In Elaborating on a header Don't have an account? 36 Teams!!! P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P
  10. System Products P P P P P P P P

    P P P P P P P P P P P P P P P P P P P P P P P P P P P P 36 Quantity S Dependency
  11. System Products P P P P P P P P

    P P P P P P P P P P P P P P P P P P P P P P P P P P P P 36 S Brand Identity Aa Typography Color Iconography B Sets a tone of messaging, principles, and almost always a starting point of:
  12. System Products P P P P P P P P

    P P P P P P P P P P P P P P P P P P P P P P P P P P P P 36 S Brand Identity B ☺ One Source-of-Truth! Scale!
  13. System Products P 36 S Brand Identity B It’s never

    this simple.
  14. 14 CHALLENGES Outputs Adoption Generations Competition Hierarchy

  15. 15 Outputs

  16. 16 D C Design Assets Often, Sketch symbol libraries &

    templates Code Usually, UI component code and styling tools Code Reference Install, props, code samples, events, methods Design Guidelines Use When, Visual Style, Behavior, Content, etc
  17. Supporting Communities, by Discipline 17 Design Assets Guidelines Design Community

    Developer Community Design “Systems Team” Engineering “Systems Team” Code Reference Code D C
  18. System Team as a Product Team Product Team Product Team

    Product Team Product Team Product Team Product Team Product Team Product Team Product Team Product Team System Team Supporting a Product Community 18 Design Assets Guidelines Code Reference Code D C
  19. 19 Need design? Go here Need code? Go there D

    C
  20. Morningstar designsystem.morningstar.com Design+Code w Doc Examples 20 IBM Carbon www.carbondesignsystem.com

    Shopify Polaris polaris.shopify.com REI Cedar rei.github.io/rei-cedar-docs D C D C D C D C
  21. 21 Adoption

  22. Adopted design using system code Embedded design in their code

    Non-adopter P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P S B P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P
  23. Adopted design using system code Embedded design in their code

    Non-adopter P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P S B P P P P P P P P P P P P P P P P P P P P 9 5 7 Adopting Design Systems http://bit.ly/8s-adopting-systems TAKEAWAY Establish models and tools to monitor adoption across the portfolio.
  24. Adopting Design Systems http://bit.ly/8s-adopting-systems

  25. 25 Products adopt systems independently. Products adopt systems at different

    times. Products adopt systems incrementally.
  26. 26 Generations

  27. 27 Generation A shift in design language and/or code architecture

    that requires effort for teams to refactor.
  28. Design system generations span product life cycles… 28 2011 2012

    2013 2014 2015 2016 2017 2018 2019 2020 P P P P P P “Responsive Library” Bootstrap Design System Design System v2
  29. 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021

    20 : Deprecation Period (Includes Support, Fixes) …and require support across generations 29 “Responsive Library” Bootstrap Design System Design System v2 ☠ ☠ ☠ ☠ : End of Life
  30. Design & Code Change, Across Generations <button class=“cta” /> <button

    class=“btn btn-primary”> <button class=“sys-button”> GENERATION DESIGN CODE Primary Primary Primary “Responsive Library” Bootstrap Design System Design System v2 HTML/CSS HTML/CSS HTML/CSS <sys-button> Web Components <button class=“sys-button”> HTML/CSS 30 INTRODUCED 2012 2015 2017 2018 2019 + Primary CTA
  31. 31 Adopters tolerate adoption. Adopters dislike change. Adopters get annoyed

    changing what’s adopted.
  32. 32 Migrate Refactor New Monolithic Upgrade Swap Next Incremental Migrate

    Refactor New Monolithic
  33. 33 Semver.org 2 0 1 . .

  34. 0 34 Patch Fix Semver.org 2 1 1 . .

  35. 1 2 35 Minor Feature Semver.org 2 0 . .

  36. 2 0 36 Major Break Semver.org 3 0 . .

  37. 37 Primary 2015 2017 TEXT/BACKGROUND CONTRAST TEXT/BACKGROUND CONTRAST Primary

  38. 38 Primary Primary Primary 2017 BACKGROUND/ADJACENT CONTRAST 2018 WCAG 2.1

    • 1.4.11 For active controls such as buttons and form fields: any visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors. https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast Primary
  39. 39 2019 Primary Primary Primary Primary BACKGROUND/ADJACENT CONTRAST Primary Primary

    Primary 2017 Primary
  40. Code feels like a minor “feature” enhancement Design is actually

    a visual “breaking” change (without the class, implementation is broken) Visual Breaking Changes http://bit.ly/8s-visual-breaking-change 40 2019 Primary Primary Primary Primary <button class=“sys-button”> <button class=“sys-button
 sys-button--on-dark”>
  41. 41 Frankenstein Visual style and UI components from multiple systems

    (or generations) within a single interface. Frankenstein Patchwork (via @areaweb)
  42. 42 Primary Primary Ghost Ghost Ghost Ghost Frankenstein ✖ Patchwork

    ✔ Very different design languages Subtle color shifts, fixing accessibility
  43. ? CAUTION Patchwork only to a threshold of acceptable differences

    Positioning New vs Old Generations 43 Primary Ghost DON’T Mandate next generation tools for everyone to use immediately NOW! DO Position next generation tools for anything “NET NEW” NEW
  44. 44 Competition vs vs

  45. 45 P P P P P P P P P

    P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P
  46. D C System 1 D C System 2 D C

    System 3 46 P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P P .com Product Enterprise (Intranet) P P P 15 30 35
  47. 47 .com “Digital” Product Enterprise (Intranet) Credit Card Banks Banking

    Loans Investing Consumer Business Institutional X Marketing Acquisition Servicing X
  48. 48 Is it ok to have 2+ design systems? Should

    we consolidate? If so, how?
  49. Problems to Solve 49 1. Design language is inconsistent &

    redundant 2. Code libraries are inconsistent & redundant 3. System team ops are inconsistent & redundant
  50. Design Due Diligence 50 Visual Style Color
 Typography
 Icons Color


    Typography
 Icons Components Shared Button, Input, Radio, Checkbox, List Group, Tooltip, Card, Alert, Loader, Menu, Notification, Dialog, Popover, Range Slider, Switch, Tag Distinct Components Top Hat, Modal, “Site” Navigation, Data Tables, Button Groups, Combo Boxes
 + 14 more Local Navigation, “Global” Nav, Carousel, Tiles, Dashboard Module, Filter Bar
 + 2 more Tool Stack Sketch, Invision, Abstract Illustrator, Wants Figma Team 2 Designers, 3 Engineers (all full time) 1 Designer, 1 Engineer (both half time) Arial Regular, Arial Bold Font Awesome Montserrat Streamline System 1 System 2
  51. Code Due Diligence 51 Library Features JS Framework (React, Vue,

    etc) Markup, Style, & Script Methods Design Tokens Versioning Packaging Tooling & Architecture Repositories Build Tools (Gulp, Yarn, etc) Development Environments, Servers Markup, Style, & Script Tools Automation, Delivery Pipeline Testing Browsers & Devices Accessibility Visual Regression Testing Unit Testing Functional Testing Documentation Framework & Templating Content Management Doc Site Components Doc Versioning Automation, Publishing
  52. Power Dynamics 52 “Our teams are merging and together we

    can…” “My team is acquiring that team and scope…” SYSTEM TEAM 1 SYSTEM TEAM 2
  53. 53 Individual Collective “My designers want…” “My architecture demands…” “My

    teams won’t like…” “Our design could…” “Our code library must…” “Our enterprise will, together,…”
  54. 54 Rigid Adaptive “Our design is good enough.” “Our code

    library works.” “We’re committed to 
 what we have.” “Our design needs updating.” “Code needs fresh tools and models.” “We are ready for something new.”
  55. 55 Team 1 Rigid Adaptive Individual Collective Team 2 D

    C System 1 System 2 D C 1 35 2a 30 2b 10
  56. 56 Team 1 Rigid Adaptive Individual Collective Team 2 Design

    systems are a collective pursuit. Team 1 needs empathy for Group 2’s ecosystem (Training, Relationships…) Team 2 will need to concede some opportunities in favor of stability.
  57. 57 Are you ready to… … engage regularly, and in

    good faith? … support those with needs different than yours? … relinquish design or code you’ve made before? … change, if necessary? … pay for this?
  58. Consolidation Options 58 1 2 3 4 Keep Both, Do

    Nothing Keep Both, Start Sharing Retire One, Use the Other Replace Both P 20 P 20 S S S P 20 P 20 ☠ S S S P 20 P 20 P 20 P 20 S ☠ ☠ 5 Replace One, Start Sharing S P 20 P 20 S ☠ S
  59. Consolidation Costs 59 P 20 P 20 S S S

    P 20 P 20 ☠ S S S P 20 P 20 P 20 P 20 S ☠ ☠ S P 20 P 20 S ☠ S Current System (Re)Production Product Migration NONE NONE MEDIUM VERY HIGH MEDIUM Redundant Maintenance HIGH HIGH NONE NONE HIGH 1 2 3 4 5 HIGH HIGH LOW MEDIUM NONE
  60. 60 Imperfect system architectures are good business, as long as

    you wisely converge towards a target state incrementally. 
 It can take years.
  61. Because THIS is our goal, right? 61 P P P

    P P P P P P P S
  62. 62 Hierarchy

  63. 63 https://www.ibm.com/design/language/ https://www.carbondesignsystem.com/ https://www.ibm.com/standards/web/ Design Language D Carbon (“Product”) D

    C Digital D C
  64. ? ? 64 P P P P P P P

    P P P Carbon (“Product”) D C Digital D C Design Language D
  65. Uses System Storage & Tools Uses Group/Team Storage & Tools

    C Sales Kit 65 P P P .com Sales Servicing 10 10 25 Example: Insurance D C Core
  66. Uses System Storage & Tools Uses Group/Team Storage & Tools

    D Top Kit D Adaptive Kit D Connect Kit D Registry Kit 66 P # P # P # P # Example: Target.com D C Core
  67. Groups Edit: System Team + That Group
 View: Entire Design

    Community Balance Visibility and Control using Permissions System Edit: Only System Team
 View: Entire Design Community 67 Target.com’s Nicollet Design System uses Lingo App to distribute Sketch library assets that are: Tier 2 Tier 2 Tier 2 Tier 2 Tier 2 Used with Permission Core Core Core
  68. 68 Used with Permission

  69. Uses System Storage & Tools Uses Group/Team Storage & Tools

    S S S S S D Group Kit 1 D Group Kit 2 C Group Kit 3 WITHIN GROUPS ACROSS GROUPS C Editor Kit C Nav Kit 69 P 15 P 10 P 5 P 50 D C Core Kit Example: Online Software CORE PRODUCTS ACROSS GROUPS WITHIN GROUPS Design System Tiers bit.ly/8s-system-tiers
  70. Uses System Storage & Tools Uses Group/Team Storage & Tools

    How far down should system tools and architecture go? 70 CORE ACROSS GROUPS WITHIN GROUPS PRODUCTS P P P P D C S S S S S
  71. QUALITY, BY TIER 71 Uses System Storage & Tools Uses

    Group/Team Storage & Tools CORE ACROSS GROUPS WITHIN GROUPS PRODUCTS P P P P D C S S S S S BEST BETTER GOOD
  72. A Component Code QA Checklist 72 ✔ Visual Testing Page

    ✔ Hostile Styles ✔ Browser Testing ✔ Code Linting ✔ Functional Testing ✔ Visual Regression ✔ Unit Testing ✔ Accessibility Audits ✔ Dark Mode ✔ Subbrand Themes ✔ Right-to-Left ✔ Analytics Component Testing Plans bit.ly/8s-component-testing-plans BEST BETTER GOOD
  73. 73 How far will systems go? Remain a smaller core

    made by a few
 OR
 Expand gradually with increasingly complex components from across a community
  74. bit.ly/8s-systems-medium 74

  75. Design Systems Slack (8,000+ members) 75 http://design.systems

  76. 76 Thanks!