Systems of Systems, UXLX 2019

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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!

Slide 3

Slide 3 text

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?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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 Conﬁrm Password Mobile Phone Next Step Enter your phone number or email: Forgot Password? Next Product Sign In Page Create Account Page Forgot Password Pag

Slide 6

Slide 6 text

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 Conﬁrm 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

Slide 7

Slide 7 text

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 Conﬁrm 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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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:

Slide 12

Slide 12 text

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!

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

14 CHALLENGES Outputs Adoption Generations Competition Hierarchy

Slide 15

Slide 15 text

15 Outputs

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

19 Need design? Go here Need code? Go there D C

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21 Adoption

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

26 Generations

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

33 Semver.org 2 0 1 . .

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

38 Primary Primary Primary 2017 BACKGROUND/ADJACENT CONTRAST 2018 WCAG 2.1 • 1.4.11 For active controls such as buttons and form ﬁelds: 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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

42 Primary Primary Ghost Ghost Ghost Ghost Frankenstein ✖ Patchwork ✔ Very different design languages Subtle color shifts, ﬁxing accessibility

Slide 43

Slide 43 text

? 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

Slide 44

Slide 44 text

44 Competition vs vs

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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, Notiﬁcation, 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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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.

Slide 57

Slide 57 text

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?

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

60 Imperfect system architectures are good business, as long as you wisely converge towards a target state incrementally.   It can take years.

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

62 Hierarchy

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

68 Used with Permission

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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