EMPATHETIC DESIGN SYSTEMS JENNIFER WONG

MEEEEE JENNIFER WONG SOFTWARE ENGINEER GITHUB jennz0r TWITTER @mybluewristband

MODE ANALYTICS WE’RE HIRING!

WHAT IS A DESIGN SYSTEM?

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

“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

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

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

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

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.

DESIGN SYSTEMS OF ALL SIZES

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

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

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

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

WHAT IS EMPATHY?

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

Source: Google Books Ngram Viewer

Source: Giphy, NYFW

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

UX PIN ENTERPRISE UX INDUSTRY REPORT 2017 - 2018

Source: Giphy, LINDSEY L33 EMPATHY TEAMWORK

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

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

UX PIN ENTERPRISE UX INDUSTRY REPORT 2017 - 2018

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

PRIMARILY FOR POPULARITY

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

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

STYLEGUIDE OLD SCHOOL

Details KSS (Knyle Style Sheets) SCSS CSS

Brittle No systematic way to add new features or styles Cascade meant styles often overwrote each other Comment-style section numbering required manual effort

SHINY NEW DESIGN SYSTEM

THINGS WE GOT RIGHT YAY!

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

Documentation Onboarding Atomic Design

PLANNED APPROACH STRUCTURED WAY OF ADDING NEW COMPONENTS

Accessibility eslint-plugin-jsx-a11y Modals

PROBLEMS WE HAD LACK OF EMPATHY

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

???

NAMING THINGS IS HARD

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

Source: Giphy IS IT DEPRECATED? MAYBE

TEXT INPUT OR INPUT FIELD? ANOTHER DEPRECATION ISSUE

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

DROPDOWN OR SELECT OR DROPDOWN MENU OR SELECT FIELD?

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

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

GRID SYSTEM & ALIGNMENT INLINE-BLOCK VS FLEXBOX

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

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

Source: Giphy RELEASE PROCESS RELEASE THE HOUNDS!

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

UX PIN ENTERPRISE UX INDUSTRY REPORT 2017 - 2018

SOLUTIONS WE FOUND EMPATHY

Source: Giphy SEARCH BETTER DISCOVERABILITY

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

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

Eventually… Purge! Remember! Explain!

Source: Giphy COMMUNICATION SHARE, DON’T HOARD INFORMATION

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

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

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

COMPONENT CLARITY USAGE GUIDELINES (COMING SOON)

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

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

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

RELEASE PROCESS FOR ALL

WHAT YOU SHOULD DO EMPATHIZE! Source: Giphy

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

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

DOCUMENTATION WRITE THE DOCS

PROCESS HOW DO I MAKE THIS THING WORK?

HELPFUL TOOLS

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

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

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

WHAT WE DO!

WE ARE BUILDING A DESIGN SYSTEM!

🐐🐐🐐

OUR RESOURCES

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!

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

BUILD WHAT YOU NEED.

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.

REMEMBER? TEXT INPUT VS INPUT FIELD

FIRST THINGS FIRST ALL THE THINGS

SOLVE ONE PROBLEM AT A TIME

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

COLORS Multiple color files What are 2018 prefixed colors?

EMPATHIZE IT!

Empathy for Whom? All designers who might use colors All engineers who might use colors All content creators in marketing who might use colors

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

CONCLUSION!

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

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

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

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!

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

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

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