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

Systems of Systems, UXLX 2019

Systems of Systems, UXLX 2019

Nathan Curtis

May 24, 2019
Tweet

More Decks by Nathan Curtis

Other Decks in Design

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

    View full-size slide

  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!

    View full-size slide

  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?

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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:

    View full-size slide

  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!

    View full-size slide

  13. System
    Products P
    36
    S
    Brand Identity B
    It’s never this simple.

    View full-size slide

  14. 14
    CHALLENGES
    Outputs
    Adoption
    Generations
    Competition
    Hierarchy

    View full-size slide

  15. 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

    View full-size slide

  16. Supporting Communities, by Discipline
    17
    Design Assets Guidelines
    Design Community Developer Community
    Design “Systems Team” Engineering “Systems Team”
    Code Reference
    Code
    D C

    View full-size slide

  17. 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

    View full-size slide

  18. 19
    Need design?
    Go here
    Need code?
    Go there

    D C

    View full-size slide

  19. 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

    View full-size slide

  20. 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

    View full-size slide

  21. 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.

    View full-size slide

  22. Adopting Design Systems http://bit.ly/8s-adopting-systems

    View full-size slide

  23. 25
    Products adopt systems independently.
    Products adopt systems at different times.
    Products adopt systems incrementally.

    View full-size slide

  24. 26
    Generations

    View full-size slide

  25. 27
    Generation
    A shift in design language and/or code architecture
    that requires effort for teams to refactor.

    View full-size slide

  26. 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

    View full-size slide

  27. 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

    View full-size slide

  28. Design & Code Change, Across Generations



    GENERATION DESIGN CODE
    Primary
    Primary
    Primary
    “Responsive Library”
    Bootstrap
    Design System
    Design System v2
    HTML/CSS
    HTML/CSS
    HTML/CSS

    Web Components

    HTML/CSS
    30
    INTRODUCED
    2012
    2015
    2017
    2018
    2019
    +
    Primary
    CTA

    View full-size slide

  29. 31
    Adopters tolerate adoption.
    Adopters dislike change.
    Adopters get annoyed changing what’s adopted.

    View full-size slide

  30. 32
    Migrate
    Refactor
    New
    Monolithic
    Upgrade
    Swap
    Next
    Incremental
    Migrate
    Refactor
    New
    Monolithic

    View full-size slide

  31. 33
    Semver.org
    2 0
    1
    . .

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 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

    View full-size slide

  37. 39
    2019
    Primary
    Primary
    Primary
    Primary
    BACKGROUND/ADJACENT
    CONTRAST
    Primary
    Primary
    Primary
    2017
    Primary

    View full-size slide

  38. 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

    sys-button--on-dark”>

    View full-size slide

  39. 41
    Frankenstein
    Visual style and UI components from multiple
    systems (or generations) within a single interface.
    Frankenstein Patchwork (via @areaweb)

    View full-size slide

  40. 42
    Primary Primary
    Ghost Ghost Ghost Ghost
    Frankenstein ✖ Patchwork ✔
    Very different design languages Subtle color shifts, fixing accessibility

    View full-size slide

  41. ?
    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

    View full-size slide

  42. 44
    Competition
    vs vs

    View full-size slide

  43. 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

    View full-size slide

  44. 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

    View full-size slide


  45. 47
    .com
    “Digital” Product Enterprise (Intranet)
    Credit Card
    Banks Banking Loans Investing
    Consumer Business Institutional
    X
    Marketing Acquisition Servicing
    X

    View full-size slide

  46. 48
    Is it ok to have 2+ design systems?
    Should we consolidate? If so, how?

    View full-size slide

  47. Problems to Solve
    49
    1. Design language is inconsistent & redundant
    2. Code libraries are inconsistent & redundant
    3. System team ops are inconsistent & redundant

    View full-size slide

  48. 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

    View full-size slide

  49. 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

    View full-size slide

  50. 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

    View full-size slide

  51. 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,…”

    View full-size slide

  52. 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.”

    View full-size slide

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

    View full-size slide

  54. 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.

    View full-size slide

  55. 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?

    View full-size slide

  56. 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

    View full-size slide

  57. 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

    View full-size slide

  58. 60
    Imperfect system architectures are good business,
    as long as you wisely converge towards a target
    state incrementally. 

    It can take years.

    View full-size slide

  59. Because THIS is our goal, right?
    61
    P P P P P P P P P P
    S

    View full-size slide

  60. 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

    View full-size slide

  61. ?
    ?
    64
    P P P P P P P P P P
    Carbon
    (“Product”)
    D C
    Digital
    D C
    Design
    Language
    D

    View full-size slide

  62. 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

    View full-size slide

  63. 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

    View full-size slide

  64. 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

    View full-size slide

  65. 68
    Used with Permission

    View full-size slide

  66. 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

    View full-size slide

  67. 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

    View full-size slide

  68. 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

    View full-size slide

  69. 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

    View full-size slide

  70. 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

    View full-size slide

  71. bit.ly/8s-systems-medium
    74

    View full-size slide

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

    View full-size slide