Systems of Systems, UXLX 2019

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!