Empathetic Design Systems!

How do you make a design system empathetic and whom should it be empathetic towards? At a recent company, we decided to replace our outdated style guide with a newfangled design system that we started from scratch. And we made a great start.

But we forgot about accessibility. Only stand alone components reflected the basics of accessibility leaving full user flows behind. We forgot about our fellow coworkers and peers. Our engineers shouldered slow development times and new technologies, designs changed often, and variants were hard to implement. And we forgot about our users. Much of the design system was geared towards engineers, neglecting designers, product managers and more.

So what did we learn in our first iteration? How did empathy help shape our ever-changing, morphing design system? Come learn how to build an empathetic design system from the ground up or start incorporating empathy today!

Transcript

1. EMPATHETIC DESIGN SYSTEMS JENNIFER WONG
2. @mybluewristband MEEEEE GITHUB TWITTER jennz0r JENNIFER WONG SOFTWARE ENGINEER
3. MODE ANALYTICS WE’RE HIRING!
4. WHAT IS A DESIGN SYSTEM?
5. EVERYONE PROJECT DATE CLIENT 2013? DESIGN SYSTEMS SO TRENDY WOW Source: Giphy
6. “A design system is a complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards..” –UX Pin
7. A rose by any other name… Design System Pattern Library Component Library Style Guide is probably a design system.
8. Pattern Library Set of design patterns for use across an entire company
9. Component Library A set of commonly used elements for use across an entire company
10. Style Guide Static documentation that describes the design system itself: how products should look and feel use cases for UI patterns correct typographic scales … etc.
11. DESIGN SYSTEMS OF ALL SIZES
12. SARAH FEDERMAN PROJECT CONF SPEAKER FORWARD JS SPECTRUM ADOBE Source: https://theblog.adobe.com/introducing-spectrum-adobe-building-design-system-scale/
13. GENERAL SERVICES ADMINISTRATION PROJECT WHAT WHO OPEN SOURCE U.S. WEB DESIGN SYSTEM 18F Source: https://designsystem.digital.gov/components/buttons/
14. MOZILLA.DESIGN PROJECT WHAT NEW OPEN SOURCE STYLEGUIDE MOZILLA Source: https://mozilla.github.io/styleguide/elements/buttons.html
15. HTTPS://GITHUB.COM/FIREFOXUX/PHOTON PROJECT WHAT CODE OPEN SOURCE PHOTON MOZILLA (FIREFOX) Source: https://design.firefox.com/photon/components/buttons.html
16. WHAT IS EMPATHY?
17. Empathy em·pa·thy /ˈempəTHē/ noun noun: empathy the ability to understand and share the feelings of another.
18. Source: Google Books Ngram Viewer
19. Source: Giphy, NYFW
20. UXPin: Enterprise UX Industry Report Surveyed 3,157 people around the world 43% UX/Product Designers 11% UI Designers 7% each Visual Designers, Interaction Designers, Developers
21. UX PIN ENTERPRISE UX INDUSTRY REPORT 2017 - 2018
22. EMPATHY TEAMWORK Source: Giphy, LINDSEY L33
23. A COMPANY’S DESIGN SYSTEM (WHERE I ONCE WORKED)
24. WHY DESIGN SYSTEM? FUTUREEEEEEE Source: https://giphy.com/palerlotus/
25. UX PIN ENTERPRISE UX INDUSTRY REPORT 2017 - 2018
26. When? UX Consistency Company rebrand Legacy technology Replacing the old “Styleguide” Backbone to React (as popularity increased)
27. PRIMARILY FOR POPULARITY
28. Source: https://eventbritehq.com/how-eventbrite-solves-complex-design-problems-with-a-centralized-team-4a3575373ed6
29. Who? Frontend Foundry Team Three senior frontend engineers Three entry level engineers One Product Manager Originally a Design Manager Entire Design Team Up to 15 designers at any given time
30. STYLEGUIDE OLD SCHOOL
31. Details KSS (Knyle Style Sheets) SCSS CSS
33. Brittle No systematic way to add new features or styles Cascade meant styles often overwrote each other Comment-style section numbering required manual effort
35. SHINY NEW DESIGN SYSTEM
37. THINGS WE GOT RIGHT YAY!
38. Component Generator Uses Plop.js https://plopjs.com/ Creates a boilerplate of code files
39. Documentation Onboarding Atomic Design
40. PLANNED APPROACH STRUCTURED WAY OF ADDING NEW COMPONENTS
41. Accessibility eslint-plugin-jsx-a11y Modals
42. PROBLEMS WE HAD LACK OF EMPATHY
43. SEARCH YOU DON’T KNOW WHAT YOU DON’T KNOW Source: Giphy
44. ???
45. NAMING THINGS IS HARD
46. EDS E’s Design System Formerly known as code name: Black Panda Source: Giphy
47. IS IT DEPRECATED? MAYBE Source: Giphy
49. TEXT INPUT OR INPUT FIELD? ANOTHER DEPRECATION ISSUE
50. COMPONENT CONFUSION WHEN AND WHERE DO I USE IT? Source: Giphy
51. DROPDOWN OR SELECT OR DROPDOWN MENU OR SELECT FIELD?
52. Naming. Is. Hard. Dropdown Dropdown Menu Input Field Select Field Select
53. WHERE’S THE CSS? HOW CAN DESIGNERS CONTRIBUTE? Source: Flickr
56. GRID SYSTEM & ALIGNMENT INLINE-BLOCK VS FLEXBOX
57. Unknown Effects A widely shared new component was created. I used it in a new feature and edited some of its styles. This affected other people’s features that used the new component Source: Giphy
58. Discovered Causes A miscommunication about the grid system and alignment classes Grid System: inline-block Alignment: flexbox Using both conflicts, so editing the classes ruined the component spacing Source: Giphy
59. RELEASE PROCESS RELEASE THE HOUNDS! Source: Giphy
60. Release Process Frontend Foundry released a new version of library once a week “Bump” in core repository required even more time Feature Teams required to wait delaying feature releases Source: Giphy
61. UX PIN ENTERPRISE UX INDUSTRY REPORT 2017 - 2018
62. SOLUTIONS WE FOUND EMPATHY
63. SEARCH BETTER DISCOVERABILITY Source: Giphy
64. Eventually… A plan to create a better search / discoverability Smaller navigation bar Search across code base Homepage of screenshots
65. NAMING THINGS IS EASY NO MORE CODE NAMES OR ACRONYMS Source: Giphy
66. Eventually… Purge! Remember! Explain!
67. COMMUNICATION SHARE, DON’T HOARD INFORMATION Source: Giphy
68. Communication Frontend Guild Weekly meetings design-system Slack channel Source: Giphy
69. Communication Grid System vs Alignment Discussed the differences and nuances of using both Source: Giphy
70. Communication Text Input vs Input Field Creating new components without knowing Source: Giphy
71. COMPONENT CLARITY USAGE GUIDELINES (COMING SOON)
72. DESIGNERS AND REACT HTTPS://REACTSTUDIO.COM/ Source: React Studio
73. DESIGNERS AND REACT HTTPS://REACTSTUDIO.COM/ Source: Read Studio
74. DESIGNERS AND REACT HTTPS://FRAMER.COM/ Source: Framer
75. RELEASE PROCESS FOR ALL
76. WHAT YOU SHOULD DO EMPATHIZE! Source: Giphy
77. Who’s gonna use it? Designers? Product Managers? Engineers? QA Engineers? Marketing? External Stakeholders? Source: Giphy
78. A NEED TO KNOW BASIS PLZ NO ^ PLZ KNOW! Source: Giphy
79. DOCUMENTATION WRITE THE DOCS
81. PROCESS HOW DO I MAKE THIS THING WORK?
82. HELPFUL TOOLS
83. HTTPS://STORYBOOK.JS.ORG/ PROJECT WHAT DOCS OPEN SOURCE STORYBOOK A UI DEVELOPMENT ENVIRONMENT
84. HTTPS://WWW.INVISIONAPP.COM/DESIGN-SYSTEM-MANAGER PROJECT WHAT DOCS DSM INVISION DESIGN SYSTEM MANAGER
85. HTTPS://WWW.UXPIN.COM/ PROJECT WHAT DOCS UX DESIGN PLATFORM UX PIN UX DESIGN PLATFORM Source: https://www.uxpin.com/design-systems
86. WHAT WE DO!
87. WE ARE BUILDING A DESIGN SYSTEM!
89. OUR RESOURCES
90. Remember: Frontend Foundry Team Three senior frontend engineers Three entry level engineers One Product Manager Entire Design Team Up to 15 designers at any given time 22!
91. Mode’s Design System Team Three Designers Five Frontend Engineers One Backend Engineer Functional Fridays One day a week! 9!
92. BUILD WHAT YOU NEED.
93. Building too far ahead of needs Usually results in: Component you don’t need Component that doesn’t meet current needs Component with unnecessary extra features Accounting for all the edge cases or cases where the component will be used is near impossible.
94. REMEMBER? TEXT INPUT VS INPUT FIELD
95. FIRST THINGS FIRST ALL THE THINGS
101. SOLVE ONE PROBLEM AT A TIME
102. COLORS A SOLUTION TO ONE PROBLEM (THAT MANY OF US HAD)
103. COLORS Multiple color files What are 2018 prefixed colors?
105. EMPATHIZE IT!
108. Empathy for Whom? All designers who might use colors All engineers who might use colors All content creators in marketing who might use colors
110. Other things we’re working on We have weekly meetings to discuss, update each other on progress, and update all other designers and engineers on changes We started discussing a release process and cadence We’re considering where to store static assets Anthony is running a design system survey
111. CONCLUSION!
112. “Do as I say not as I do.” –John Selden
113. USE EMPATHY THINK ABOUT USERS, COLLABORATORS, COWORKERS Source: Cartoon Hangover
114. STILL SMALL? DO AS SMALL COMPANIES DO! Source: @salih
115. Use empathy Build what you need And what your team needs Start a component library When the team has time or as a Working Group Solve one problem at a time Preferably, a problem that affects lots of people!
116. Resources Design Systems Book
 https://www.smashingmagazine.com/design-systems-book/ An Intro to Design Systems
 https://www.youtube.com/watch?v=1wATzhRorxQ Distilling How We Think about Design Systems
 https://publication.design.systems/distilling-how-we-think-about-design-systems-b26432eefef9
117. Resources DSM by InVision
 https://mode.invisionapp.com/dsm/ Storybook.js
 https://storybook.js.org/examples/ UXPin
 https://www.uxpin.com/design-systems
118. @MYBLUEWRISTBAND PROJECT GITHUB TWITTER JENNZ0R KTHXBAI JENNIFER WONG Source: Mauro Gatti