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

Systems of Systems, 0.2.0

Systems of Systems, 0.2.0

Presented at DSConference, Helsinki, Finland, March 2018

Nathan Curtis

March 14, 2018
Tweet

More Decks by Nathan Curtis

Other Decks in Design

Transcript

  1. Systems of Systems DS Conference — Helsinki, Finland — March

    14, 2018 Nathan Cur?s
 @nathanacur*s
  2. Defining Design Systems bit.ly/8s-define-design-systems The Design System! A library of

    Visual Style and UI Components offered as 
 HTML/CSS code, Sketch assets, Tokens, and Documenta*on System
  3. Visual Style UI Components Lato Light / Heavy COLOR TYPOGRAPHY

    SPACE ICONOGRAPHY BORDERS LAYERING Bu#on Sign In Don’t have an … Link with your… LAYOUT GRID HEADING DECK PARAGRAPH LINK INPUT SELECT BUTTON TABS TAB TAB TAB System
  4. Product Sign In with your EightShapes account Email Address Don't

    have an account? Sign up now: Create an account Forgot password? Password Sign In Sign In with your EightShapes account Email Address Password Forgot password? Sign In Don't have an account? Sign up now: Create an account Visual Style UI Components Lato Light / Heavy COLOR TYPOGRAPHY SPACE ICONOGRAPHY BORDERS LAYERING Bu#on Sign In Don’t have an … Link with your… LAYOUT GRID HEADING DECK PARAGRAPH LINK INPUT SELECT BUTTON TABS TAB TAB TAB System
  5. SignIn.js CreateAccount.js ForgotPassword.js Sign In with your EightShapes account Email

    Address Don't have an account? Sign up now: Create an account Forgot password? Password Sign In Enter your phone number or email: Forgot Password? Next Name Email Address Password Confirm Password Learn more about why we ask for this informa;on. Mobile Phone First Last Next Step Create your EightShapes Account Designer Sign In Artboard Create Account Artboard Forgot Password Artboar Engineer 2 System Product Visual Style UI Components Lato Light / Heavy COLOR TYPOGRAPHY SPACE ICONOGRAPHY BORDERS LAYERING Bu#on Sign In Don’t have an … Link with your… LAYOUT GRID HEADING DECK PARAGRAPH LINK INPUT SELECT BUTTON TABS TAB TAB TAB Engineer
  6. SignIn.js CreateAccount.js ForgotPassword.js Sign In with your EightShapes account Email

    Address Don't have an account? Sign up now: Create an account Forgot password? Password Sign In Enter your phone number or email: Forgot Password? Next Name Email Address Password Confirm Password Learn more about why we ask for this informa;on. Mobile Phone First Last Next Step Create your EightShapes Account Designer Sign In Artboard Create Account Artboard Forgot Password Artboard Engineer System System .H TM L System .Sketch Product
  7. Designers Engineers Product Manager Others (QA, etc) DESIGN ASSETS A

    library of design tooling offered in tool(s) relevant to the design community FRONT END CODE A library of reusable HTML/CSS assets (maybe built in a JavaScript framework) Product System Outputs System .H TM L System .Sketch
  8. Product Tokens in Design Systems bit.ly/8s-tokens-in-design-systems Designers Engineers Product Manager

    Others (QA, etc) System Outputs System .H TM L System .Sketch System .Tokens TOKENS A library of hierarchical property/value pairs as an visual language abstrac?on. color.background.light: #d7d7d7
 color.text.primary.onLight: #333333
 border.control.default: solid 1px #808080 space.inset.1x: 16px
  9. Product DOCUMENTATION SITE A separate codebase and content corresponding to

    the documenta?on describing the system. System .H TM L System .Sketch System .Tokens Designers Engineers Product Manager Others (QA, etc) System .D ocs System Outputs
  10. Product v1.3.0 System .H TM L

  11. None
  12. How to Adopt? “You choose…” ✅✅✅◻◻ BIG BANG
 (ALL AT

    ONCE) INCREMENTAL
 (ONE STORY AT A TIME)
  13. 13 Step-by-Step Adop7on Model 0
 NON-
 ADOPTER Branding / visual

    identity is out of date Product is obviously not complying with the design system Interface is dated and inconsistent with latest conventions 1
 DEPENDENCY & PLAN Codebase has system npm dependency Team has compiled, tuned, & organized systems assets for integration & extension Team has groomed the work to demonstrate timing & commitment via roadmap & backlog 2
 CORE
 STYLE Color Typography Icons Space Replaced variables and rules via tokens 3
 PRIORITY
 COMPONENTS Buttons Forms: Checkboxes, Radios, Text, Select Headings, Article Text Tabs Search Bar List Groups 4
 FULL 
 ADOPTION Data Tables Modals Dialogs Pills Toggles Adopted every relevant component offered No more than 9 months behind latest minor release AND No more than 6 months behind latest minor release AND No more than 3 months behind latest minor release AND Adop?ng Design Systems hZp:/ /bit.ly/8s-adop?ng-systems
  14. 14 Conversa7on with Adop7ng Product Squad 1. Will you?
 2.

    When will you?
 3. When will your roadmap and backlog reflect it? 4. When will you integrate the npm package? 5. When will you have a “Hello System!” in produc*on? STEP 1: 
 DEPENDENCY & PLAN STEP 2: CORE STYLE
  15. Look for the Dependency in /package.json

  16. Release History New Enhanced Fixed

  17. Versioning How? System v1.8.0 MONOLITH PRIMARY OUTPUTS v2.7.0 v1.9.0 v1.9.2

    v24.1.0 System .Sketch System .H TM L System .Tokens System .D oc System .Tokens Button Input Tooltip D ataTable v2.7.0 v1.4.2 v1.9.0 v3.2.0 v2.12.1 BY COMPONENT
  18. hZps:/ /atlaskit.atlassian.com/packages

  19. None
  20. When Versioning By Component… ON VISUAL STYLE ACROSS COMPONENTS When

    a token changes, do it propagate across everything at the same *me? Do button v2.3.1 and tabs v3.1.9 have color or font conflicts? Can I use button v2.3.1 and button v3.1.2 on the same page? 
 ON DOCUMENTATION Where’s doc for button v1.9.0 , since it’s now at v2.3.0 ?
  21. MAJOR MINOR PATCH v1.3.0 semver.org (FEATURE) (BREAKING)

  22. Is this a breaking change? Yes. Absolutely. Not at all.

    In a #core-system-team
 Slack channel somewhere… ¯\_(ϑ)_/¯ Credit: Kevin Powell (@kevinmpowell)
  23. Versioning & Breaking hZp:/ /designsystem.morningstar.com/about/versioning.html Defines, generally, how versioning works.

    Defines, specifically, when updates are considered breaking changes.
  24. Example: Breaking the UI via Wrapping Changes to weight, size,

    leZer spacing and other type proper?es that could wrap unexpectedly when used in fixed layout se`ngs. The Universe is a Big Place The Universe is a Big Place BEFORE AFTER
  25. Example: Breaking the UI via Spacing Changes to box model

    props not of a component’s internal dynamic content. Tip: Be unopinionated on component’s margin without context. VIDEO VIDEO Supernova Supernova An astronomical event that occurs during the last stages of a massive star's life. An astronomical event that occurs during the last stages of a massive star's life. Galaxies Galaxies Speed of Light Speed of Light Milky Way Milky Way View View 16 32 BEFORE AFTER
  26. Major version = backwards incompaNble (aka, “breaking”) changes are introduced

    to the public API (and UI) ≠ sweeping code refactoring ≠ radical redesign In many cases…
  27. Oh no! A major release! We just adopted nine months

    ago. “
  28. Upgrades are a Communica7on Challenge ADOPTING
 version 1.0.0 UPGRADING 


    to version 2.0.0 HTML
 Markup Complete Front End Refactor =
 Heavy Squad Effort Small Tac*cal Changes =
 Minimal HTML Impact, Use Upgrade Guide CSS
 Styling Complete Redesign =
 Heavy UI Impact & Restyling Small Tac*cal Changes =
 Minimal UI Impact, Use Upgrade Guide Packaging & IntegraNon New Framework =
 Moderate Investment Updated Packaging =
 Minimal Retooling
  29. System .H TM L Product 2 Product 3 Product 3

    Product 1 Product 1 v1.1.0 v1.1.0 v1.1.0 v1.1.0 v1.2.0 v1.2.1 v1.2.1 v1.2.1 v1.2.1 v1.2.1 v1.3.0 v1.3.0 v1.3.0 v1.3.0
  30. Products own their desNny.
 System equip products to realize that

    desNny. Principles of Design Systems bit.ly/8s-principles-systems
  31. Intermediary between a system and those making experiences with it

  32. INTERMEDIARY 1 OF 3 Distributor An en*ty managing packaged dependencies

    other teams use to make an experience.
  33. We’d love to adopt, but we must leverage it through

    the platform. Otherwise, our hands are tied. “
  34. System .H TM L

  35. Platform System .H TM L

  36. Intermediary 1 of 3: Distributor Platform Disseminate quickly Manage change

    predictably Signal mature prac*ces Block ini*al adop*on Prevent frequent upgrades Complicate upgrades
 (must sync across products) Product 3 Product 2 v1.8.0 v1.1.0 System .H TM L
  37. Distributors Takeaways 1. Can’t adopt without ‘em, so live with

    them. 2. Forge strong(er) rela*onships. 3. Have the dependents make the case: 
 “We need this system (upgrade?), now!”
  38. INTERMEDIARY 2 OF 3 Translator An en*ty transla*ng a system

    (HTML & CSS) into their framework (usually, JavaScript or a CMS).
  39. REACT VUE EMBER ANGULAR

  40. EMBED INTO A
 JAVASCRIPT FRAMEWORK? RELEASE JUST
 “VANILLA” HTML &

    CSS? OR
  41. System .React

  42. CommiTng to a JavaScript Framework System .React JavaScript is powerful!

    JavaScript encapsulates! It’s what devs want! (right?) Tooling startup is *me consuming Tes*ng is more complex Unusable by minority adopters
  43. System .React Tokens Offer a Back Door to Visual Style

    System .Tokens
  44. System .H TM L

  45. System .H TM L System .React System .Vue

  46. YOUR CUSTOMERS YOUR SYSTEM THEIR CUSTOMERS System .H TM L

    System .React System .Vue v1.1.0 v?.?.? v?.?.? v1.2.0 v1.9.0
  47. 1. Includes some components, not others. 2. Renames components 3.

    Adds components (DatePicker, Carousel) 4. Omits component features SYSTEM.REACT Bukons Selects Dialogs Forms Links Spinner Modals Container No*fica*on PopOver ProgressIndicator Tool*ps SYSTEM Alerts Bukons Bukon Groups Combo Boxes Data Tables Dialogs Forms Links List Groups Loaders Mastheads Menus Modals Nav Containers No*fica*ons Page Shells Pagina*on Popovers Range Sliders Search Fields Site Naviga*on Steppers Switches Tags Tool*ps Top Hats
  48. System
 Product Manager Awesome, a Primary React <Bukon>! Are you

    also making Secondary & Flat? System.React Dev
 (from a Product squad) I’m no*ced you use our v1.2.0. We’re at v1.9.0. When might you upgrade? System
 Product Manager Um, I’m on deadline for six months. So, not soon. System.React Dev
 (from a Product squad)
  49. Intermediary 2 of 3: Translator Praise the ini*a*ve! Leverage a

    community Incomplete features Missing components Different documenta*on
 (if it even exists) Poor support
 (devs have a product to make!) No commitment to upgrade in sync as system improves System .H TM L System .React
  50. Could You Support All the Frameworks? Sync releases Integrate documenta*on

    Integrate support OMG, seriously? Our org is challenged by suppor*ng one! System .H TM L System .React System .Vue v2.0.0 v2.0.0 v2.0.0
  51. Translator Takeaways 1. Approach with cau*ous curiousity. 2. Educate on

    how to turn an open source passion play into a success. 3. Protect your brand: if they age or don’t meet your standards, they aren’t part of the program.
  52. INTERMEDIARY 3 OF 3 Themer A team that themes a

    system’s UI components with a different visual style (color, type, etc).
  53. Team
 1 Team
 2 Team
 3 Team
 4 designsystem.morningstar.com/charts/donut.html CORE

    COMPONENTS developer.morningstar.com/components/poreolio-x-ray COMPLEX COMPONENTS
 PRODUCTS THEME
 Montserrat Streamline New Colors New Typography New Icons , THEMED
  54. TEAM 2 TEAM 3 “DESIGN SYSTEM” CLIENT TEAMS CLIENT 1

    CLIENT 2 CLIENT 3 System .Tokens System .U I System .Charts Them e 1 Them e 2 Them e 3 Com plex Com ponents
  55. Theming Basics 1. Separate library-wide and component-specific styles. 2. Embed

    library-wide in design tokens useful across plaCorms. 3. Isolate component variables from CSS selectors and rules. 4. Leverage compiler features, like Sass’ !default.
  56. Themer Takeaways 1. Build a sophis*cated theming architecture only if

    you need one. Avoid it otherwise. 2. Beware the innocuous request that quickly grows into library-wide refactoring (breaking change!).
  57. OR O ur System Another System

  58. CompeNtor A design system available as a subs*tute for your

    system.
  59. Star7ng from Nothing, Teams Have Choices ADOPT A CODE KIT,


    SKIN W/ STYLE ADOPT A LANGUAGE, CODE OURSELVES CREATE DESIGN & CODE FROM SCRATCH Op?on
 1 Op?on
 2 Op?on
 3 Op?on
 4 ADOPT AN 
 IN-HOUSE SYSTEM
  60. Limited doc Outdated visual style Rampant accessibility issues across library

    2015 MAD HATTER For a Flagship Product MUI-BOOTSTRAP For a Flagship Product &
 “Whoever Else Wants It” 2016 MDS For Everyone 2017 hZp:/ /designsystem.morningstar.com/ When Living, Systems Go Through Genera7ons
  61. M U I-B (O ld) M D S (N ew

    )
  62. CSS Methodology <button class="btn btn-primary”> Label </button> <button class="mds-button mds-button--primary">

    Label </button> BOOTSTRAP CSS BEM
  63. Rebuild from the ground up. 
 For everyone. Systems Team


    January 25, 2017 at 2pm “
  64. Another team is making a library. 
 It’ll be available

    sooner. So…. we may adopt that instead. 
 Others are considering it too. Lead Product Design working on Flagship Product
 January 25, 2017 at 4pm “
  65. None
  66. M U I-B (O ld) M D S (N ew

    ) M U I-C (Com petitor)
  67. Op7ons for Handling Compe77on 1. Put our heads down: Make

    ours awesome. Hope for the best. 2. MarkeNng blitz: Our system is the future, not theirs! 3. Complain to leadership: Shut down us or them, now! 4. Live with two: Some use ours, others use theirs.
  68. ☎ Op*on 5: Pick up the phone

  69. MUI-B CODE MUI-C CODE TO BE
 RETIRED MDS CODE MIGRATE

    MERGE EFFORTS TO BE
 RETIRED
  70. Considera7ons When Consolida7ng Systems 1. Agree on approach for a

    unified, company-wide source-of-truth. 2. Remove redundant services/cost. 3. Improve lack-of-bias for teams to build for more / all teams. 4. Increase capacity to make & doc more than either would have alone. OPPORTUNITIES 1. Deliver in Nmely way 2. Revisit tooling and approach (code style, conven*ons, etc) 3. Blend rituals for Europe & US CHALLENGES
  71. OR Another System System

  72. AND Another System AND Another System AND Another System System

  73. Brand Corporate M arketing Intranet Corporate Site, Governance, Investors, “Brand”

    Sites .com Home, Marke*ng, eCommerce, Customer Support Web & na*ve product experiences “Portals”, Internal Tools, Expenses, HR, Wikis, etc Feb 2018 Dec 2017 Sep 2016 Mar 2013 Product
  74. Brand Corporate M arketing Intranet Feb 2018 Dec 2017 Sep

    2016 Mar 2013 Product
  75. M arketing Corporate Product Brand N ative Apps Credit Card

    Consum er Banking Consum er Loans Business Banking Institutional
  76. Customers use Product’s system, and it’s better. Shouldn’t employee tools

    use it, too? – Design system team members for both Intranet & product systems “
  77. ConsolidaNon Ra*onalizing and removing redundant systems that serve non-overlapping sets

    of products.
  78. Feature Product’s System Intranet’s System Visual Style Color
 Typography
 Icons

    Color
 Typography
 Icons Component Overlap BuZon, Input, Radio, Checkbox, List Group, Tool?p, Card, Alert, Loader, Menu, No?fica?on, Dialog, Popover, Range Slider, Switch, Tag Dis?nct Components Top Hat, Modal, “Site” Naviga?on, Data Tables, BuZon Groups, Combo Boxes
 + 14 more Local Naviga?on, “Global” Naviga?on, Carousel, Tiles, Dashboard Module, Filter Bar
 + 2 more Design Assets Sketch AND Figma, FTW! Adobe Illustrator Codebase Vanilla HTML & CSS + React Transla?on Mustache Templates Team 2 Designers, 3 Engineers (all full ?me) 1 Designer, 1 Engineer (both half ?me) Arial Regular, Arial Bold Font Awesome Montserrat Streamline
  79. Op7on 1: Do Nothing Intranet Teams remain focused Avoids costly

    change from at least one group Doesn’t scale design Sustains duplica*ve efforts Risks morale Product
  80. Op7on 2: Start Small, with Tokens Intranet Product Product’s Tokens

    ’s H TM L
  81. Op7on 3: Product “Acquires & Re7res” Intranet System Intranet Scales

    system investment across broader porqolio Raises Intranet quality Unifies design community Requires costly and unexpected change in Intranet app Increases Product’s burden to support teams not in “our organiza*on” Product Retired
  82. N ew Op7on 4: Systems Merge, Building a New System

    Intranet Opportunity to refresh! Merges as equals as opposed to one feeling subservient Huge, unrealis*c cost Very difficult to coordinate Requires many to relinquish control Product Retired Retired
  83. ConsolidaNon Takeaways 1. Expand a system’s boundaries very carefully. 2.

    Let acquired systems make the asser*ve move. 3. Others – par*cularly intranet tools – must demo they want and are willing to pay for the switch.
  84. More on Medium.com bit.ly/8s-systems-medium Read more on systems topics including:

    Strategy & Planning Design & Development Adop*on Documenta*on Process Teams & Opera*ons
  85. Join Design System Slack (5,900+ members) hkp:/ /design.systems

  86. Nathan Cur?s @nathanacur*s Thanks!