Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Empathetic Design Systems!

Jenn
October 22, 2019

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!

Jenn

October 22, 2019
Tweet

More Decks by Jenn

Other Decks in Technology

Transcript

  1. EMPATHETIC DESIGN SYSTEMS
    JENNIFER WONG

    View full-size slide

  2. @mybluewristband
    MEEEEE
    GITHUB TWITTER
    jennz0r
    JENNIFER WONG
    SOFTWARE ENGINEER

    View full-size slide

  3. MODE ANALYTICS
    WE’RE HIRING!

    View full-size slide

  4. WHAT IS A DESIGN SYSTEM?

    View full-size slide

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

    View full-size 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

    View full-size slide

  7. A rose by any other name…
    Design System

    Pattern Library

    Component Library

    Style Guide
    is probably a design system.

    View full-size slide

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

    View full-size slide

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

    View full-size 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.

    View full-size slide

  11. DESIGN SYSTEMS
    OF ALL SIZES

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. WHAT IS EMPATHY?

    View full-size slide

  17. Empathy
    em·pa·thy

    /ˈempəTHē/

    noun
    noun: empathy
    the ability to understand and share the feelings of
    another.

    View full-size slide

  18. Source: Google Books Ngram Viewer

    View full-size slide

  19. Source: Giphy, NYFW

    View full-size 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

    View full-size slide

  21. UX PIN
    ENTERPRISE UX INDUSTRY REPORT 2017 - 2018

    View full-size slide

  22. EMPATHY
    TEAMWORK
    Source: Giphy, LINDSEY L33

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. UX PIN
    ENTERPRISE UX INDUSTRY REPORT 2017 - 2018

    View full-size slide

  26. When?
    UX Consistency

    Company rebrand

    Legacy technology

    Replacing the old “Styleguide”

    Backbone to React (as popularity increased)

    View full-size slide

  27. PRIMARILY
    FOR POPULARITY

    View full-size slide

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

    View full-size 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

    View full-size slide

  30. STYLEGUIDE
    OLD SCHOOL

    View full-size slide

  31. Details
    KSS (Knyle Style Sheets)

    SCSS

    CSS

    View full-size slide

  32. Brittle
    No systematic way to add new features or
    styles

    Cascade meant styles often overwrote each
    other

    Comment-style section numbering required
    manual effort

    View full-size slide

  33. SHINY NEW
    DESIGN SYSTEM

    View full-size slide

  34. THINGS WE GOT
    RIGHT
    YAY!

    View full-size slide

  35. Component Generator
    Uses Plop.js

    https://plopjs.com/

    Creates a boilerplate of code files

    View full-size slide

  36. Documentation
    Onboarding

    Atomic Design

    View full-size slide

  37. PLANNED APPROACH
    STRUCTURED WAY OF ADDING NEW COMPONENTS

    View full-size slide

  38. Accessibility
    eslint-plugin-jsx-a11y

    Modals

    View full-size slide

  39. PROBLEMS
    WE HAD
    LACK OF EMPATHY

    View full-size slide

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

    View full-size slide

  41. NAMING THINGS
    IS HARD

    View full-size slide

  42. EDS
    E’s Design System

    Formerly known as code name: Black Panda
    Source: Giphy

    View full-size slide

  43. IS IT DEPRECATED?
    MAYBE
    Source: Giphy

    View full-size slide

  44. TEXT INPUT OR INPUT FIELD?
    ANOTHER DEPRECATION ISSUE

    View full-size slide

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

    View full-size slide

  46. DROPDOWN OR SELECT
    OR DROPDOWN MENU OR SELECT FIELD?

    View full-size slide

  47. Naming. Is. Hard.
    Dropdown

    Dropdown Menu

    Input Field

    Select Field

    Select

    View full-size slide

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

    View full-size slide

  49. GRID SYSTEM & ALIGNMENT
    INLINE-BLOCK VS FLEXBOX

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. RELEASE PROCESS
    RELEASE THE HOUNDS!
    Source: Giphy

    View full-size slide

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

    View full-size slide

  54. UX PIN
    ENTERPRISE UX INDUSTRY REPORT 2017 - 2018

    View full-size slide

  55. SOLUTIONS
    WE FOUND
    EMPATHY

    View full-size slide

  56. SEARCH
    BETTER DISCOVERABILITY
    Source: Giphy

    View full-size slide

  57. Eventually…
    A plan to create a better search /
    discoverability

    Smaller navigation bar

    Search across code base

    Homepage of screenshots

    View full-size slide

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

    View full-size slide

  59. Eventually…
    Purge!

    Remember!

    Explain!

    View full-size slide

  60. COMMUNICATION
    SHARE, DON’T HOARD INFORMATION
    Source: Giphy

    View full-size slide

  61. Communication
    Frontend Guild

    Weekly meetings

    design-system Slack channel
    Source: Giphy

    View full-size slide

  62. Communication
    Grid System vs Alignment

    Discussed the differences and
    nuances of using both
    Source: Giphy

    View full-size slide

  63. Communication
    Text Input vs Input Field

    Creating new components without
    knowing
    Source: Giphy

    View full-size slide

  64. COMPONENT CLARITY
    USAGE GUIDELINES (COMING SOON)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. RELEASE PROCESS
    FOR ALL

    View full-size slide

  69. WHAT YOU
    SHOULD DO
    EMPATHIZE!
    Source: Giphy

    View full-size slide

  70. Who’s gonna use it?
    Designers?

    Product Managers?

    Engineers?

    QA Engineers?

    Marketing?

    External Stakeholders?
    Source: Giphy

    View full-size slide

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

    View full-size slide

  72. DOCUMENTATION
    WRITE THE DOCS

    View full-size slide

  73. PROCESS
    HOW DO I MAKE THIS THING WORK?

    View full-size slide

  74. HELPFUL TOOLS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  78. WE ARE BUILDING A DESIGN SYSTEM!

    View full-size slide

  79. OUR RESOURCES

    View full-size slide

  80. 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!

    View full-size slide

  81. Mode’s Design System Team
    Three Designers

    Five Frontend Engineers

    One Backend Engineer

    Functional Fridays

    One day a week!
    9!

    View full-size slide

  82. BUILD WHAT YOU NEED.

    View full-size slide

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

    View full-size slide

  84. REMEMBER?
    TEXT INPUT VS INPUT FIELD

    View full-size slide

  85. FIRST THINGS FIRST
    ALL THE THINGS

    View full-size slide

  86. SOLVE ONE PROBLEM AT A TIME

    View full-size slide

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

    View full-size slide

  88. COLORS
    Multiple color files

    What are 2018 prefixed colors?

    View full-size slide

  89. EMPATHIZE IT!

    View full-size slide

  90. Empathy for Whom?
    All designers who might use colors

    All engineers who might use colors

    All content creators in marketing who might use colors

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  95. 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!

    View full-size slide

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

    View full-size slide

  97. Resources
    DSM by InVision

    https://mode.invisionapp.com/dsm/

    Storybook.js

    https://storybook.js.org/examples/


    UXPin

    https://www.uxpin.com/design-systems

    View full-size slide

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

    View full-size slide