A presentation at ThunderPlains in in Oklahoma City, OK, USA by Jennifer Wong
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
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!
for free. You
can too.