Empathetic Design Systems

A presentation at ThunderPlains in October 2019 in Oklahoma City, OK, USA by Jennifer Wong

Slide 1

EMPATHETIC DESIGN SYSTEMS JENNIFER WONG

Slide 2

MEEEEE JENNIFER WONG SOFTWARE ENGINEER GITHUB jennz0r TWITTER @mybluewristband

Slide 3

MODE ANALYTICS WE’RE HIRING!

Slide 4

WHAT IS A DESIGN SYSTEM?

Slide 5

Source: Giphy PROJECT DESIGN SYSTEMS SO TRENDY WOW DATE 2013? CLIENT EVERYONE

Slide 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

Slide 7

A rose by any other name… is probably a design system. Design System Pattern Library Component Library Style Guide

Slide 8

Pattern Library Set of design patterns for use across an entire company

Slide 9

Component Library A set of commonly used elements for use across an entire company

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

Slide 11

DESIGN SYSTEMS OF ALL SIZES

Slide 12

Source: https://theblog.adobe.com/introducing-spectrum-adobe-building-design-system-scale/ PROJECT SPECTRUM ADOBE CONF FORWARD JS SPEAKER SARAH FEDERMAN

Slide 13

Source: https://designsystem.digital.gov/components/buttons/ PROJECT U.S. WEB DESIGN SYSTEM 18F WHAT OPEN SOURCE WHO GENERAL SERVICES ADMINISTRATION

Slide 14

PROJECT STYLEGUIDE Source: https://mozilla.github.io/styleguide/elements/buttons.html MOZILLA WHAT OPEN SOURCE NEW MOZILLA.DESIGN

Slide 15

Source: https://design.firefox.com/photon/components/buttons.html PROJECT PHOTON MOZILLA (FIREFOX) WHAT OPEN SOURCE CODE HTTPS://GITHUB.COM/FIREFOXUX/PHOTON

Slide 16

WHAT IS EMPATHY?

Slide 17

Empathy em·pa·thy /ˈempəTHē/ noun noun: empathy the ability to understand and share the feelings of another.

Slide 18

Source: Google Books Ngram Viewer

Slide 19

Source: Giphy, NYFW

Slide 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

Slide 21

UX PIN ENTERPRISE UX INDUSTRY REPORT 2017 - 2018

Slide 22

Source: Giphy, LINDSEY L33 EMPATHY TEAMWORK

Slide 23

A COMPANY’S DESIGN SYSTEM (WHERE I ONCE WORKED)

Slide 24

WHY DESIGN SYSTEM? FUTUREEEEEEE Source: https://giphy.com/palerlotus/

Slide 25

UX PIN ENTERPRISE UX INDUSTRY REPORT 2017 - 2018

Slide 26

When? UX Consistency Company rebrand Legacy technology Replacing the old “Styleguide” Backbone to React (as popularity increased)

Slide 27

PRIMARILY FOR POPULARITY

Slide 28

Source: https://eventbritehq.com/how-eventbrite-solves-complex-design-problems-with-a-centralized-team-4a3575373ed6

Slide 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

Slide 30

STYLEGUIDE OLD SCHOOL

Slide 31

Details KSS (Knyle Style Sheets) SCSS CSS

Slide 32

Slide 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

Slide 34

Slide 35

SHINY NEW DESIGN SYSTEM

Slide 36

Slide 37

THINGS WE GOT RIGHT YAY!

Slide 38

Component Generator Uses Plop.js https://plopjs.com/ Creates a boilerplate of code files

Slide 39

Documentation Onboarding Atomic Design

Slide 40

PLANNED APPROACH STRUCTURED WAY OF ADDING NEW COMPONENTS

Slide 41

Accessibility eslint-plugin-jsx-a11y Modals

Slide 42

PROBLEMS WE HAD LACK OF EMPATHY

Slide 43

Source: Giphy SEARCH YOU DON’T KNOW WHAT YOU DON’T KNOW

Slide 44

???

Slide 45

NAMING THINGS IS HARD

Slide 46

EDS E’s Design System Formerly known as code name: Black Panda Source: Giphy

Slide 47

Source: Giphy IS IT DEPRECATED? MAYBE

Slide 48

Slide 49

TEXT INPUT OR INPUT FIELD? ANOTHER DEPRECATION ISSUE

Slide 50

Source: Giphy COMPONENT CONFUSION WHEN AND WHERE DO I USE IT?

Slide 51

DROPDOWN OR SELECT OR DROPDOWN MENU OR SELECT FIELD?

Slide 52

Naming. Is. Hard. Dropdown Dropdown Menu Input Field Select Field Select

Slide 53

Source: Flickr WHERE’S THE CSS? HOW CAN DESIGNERS CONTRIBUTE?

Slide 54

Slide 55

Slide 56

GRID SYSTEM & ALIGNMENT INLINE-BLOCK VS FLEXBOX

Slide 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

Slide 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

Slide 59

Source: Giphy RELEASE PROCESS RELEASE THE HOUNDS!

Slide 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

Slide 61

UX PIN ENTERPRISE UX INDUSTRY REPORT 2017 - 2018

Slide 62

SOLUTIONS WE FOUND EMPATHY

Slide 63

Source: Giphy SEARCH BETTER DISCOVERABILITY

Slide 64

Eventually… A plan to create a better search / discoverability Smaller navigation bar Search across code base Homepage of screenshots

Slide 65

Source: Giphy NAMING THINGS IS EASY NO MORE CODE NAMES OR ACRONYMS

Slide 66

Eventually… Purge! Remember! Explain!

Slide 67

Source: Giphy COMMUNICATION SHARE, DON’T HOARD INFORMATION

Slide 68

Communication Frontend Guild Weekly meetings design-system Slack channel Source: Giphy

Slide 69

Communication Grid System vs Alignment Discussed the differences and nuances of using both Source: Giphy

Slide 70

Communication Text Input vs Input Field Creating new components without knowing Source: Giphy

Slide 71

COMPONENT CLARITY USAGE GUIDELINES (COMING SOON)

Slide 72

Source: React Studio DESIGNERS AND REACT HTTPS://REACTSTUDIO.COM/

Slide 73

Source: Read Studio DESIGNERS AND REACT HTTPS://REACTSTUDIO.COM/

Slide 74

Source: Framer DESIGNERS AND REACT HTTPS://FRAMER.COM/

Slide 75

RELEASE PROCESS FOR ALL

Slide 76

WHAT YOU SHOULD DO EMPATHIZE! Source: Giphy

Slide 77

Who’s gonna use it? Designers? Product Managers? Engineers? QA Engineers? Marketing? External Stakeholders? Source: Giphy

Slide 78

A NEED TO KNOW BASIS PLZ NO ^ PLZ KNOW! Source: Giphy

Slide 79

DOCUMENTATION WRITE THE DOCS

Slide 80

Slide 81

PROCESS HOW DO I MAKE THIS THING WORK?

Slide 82

HELPFUL TOOLS

Slide 83

PROJECT STORYBOOK A UI DEVELOPMENT ENVIRONMENT WHAT OPEN SOURCE DOCS HTTPS://STORYBOOK.JS.ORG/

Slide 84

PROJECT INVISION DESIGN SYSTEM MANAGER WHAT DSM DOCS HTTPS://WWW.INVISIONAPP.COM/DESIGN-SYSTEM-MANAGER

Slide 85

Source: https://www.uxpin.com/design-systems PROJECT UX PIN UX DESIGN PLATFORM WHAT UX DESIGN PLATFORM DOCS HTTPS://WWW.UXPIN.COM/

Slide 86

WHAT WE DO!

Slide 87

WE ARE BUILDING A DESIGN SYSTEM!

Slide 88

🐐🐐🐐

Slide 89

OUR RESOURCES

Slide 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!

Slide 91

Mode’s Design System Team Three Designers Five Frontend Engineers One Backend Engineer Functional Fridays One day a week! 9!

Slide 92

BUILD WHAT YOU NEED.

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

Slide 94

REMEMBER? TEXT INPUT VS INPUT FIELD

Slide 95

FIRST THINGS FIRST ALL THE THINGS

Slide 96

Slide 97

Slide 98

Slide 99

Slide 100

Slide 101

SOLVE ONE PROBLEM AT A TIME

Slide 102

COLORS A SOLUTION TO ONE PROBLEM (THAT MANY OF US HAD)

Slide 103

COLORS Multiple color files What are 2018 prefixed colors?

Slide 104

Slide 105

EMPATHIZE IT!

Slide 106

Slide 107

Slide 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

Slide 109

Slide 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

Slide 111

CONCLUSION!

Slide 112

“Do as I say not as I do.” –John Selden

Slide 113

Source: Cartoon Hangover USE EMPATHY THINK ABOUT USERS, COLLABORATORS, COWORKERS

Slide 114

Source: @salih STILL SMALL? DO AS SMALL COMPANIES DO!

Slide 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!

Slide 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

Slide 117

Resources DSM by InVision https://mode.invisionapp.com/dsm/ Storybook.js https://storybook.js.org/examples/ UXPin https://www.uxpin.com/design-systems

Slide 118

Source: Mauro Gatti PROJECT KTHXBAI JENNIFER WONG GITHUB JENNZ0R TWITTER @MYBLUEWRISTBAND