$30 off During Our Annual Pro Sale. View Details »

Design Systems Aren’t Hard

Design Systems Aren’t Hard

Design systems aren’t hard.
But they are complex.
And they’re also hard.

Design systems are often thought of in terms of the visible parts - a Sketch file, a repository of React code, a documentation website. But these are only the artifacts of the system. A design system is actually the thinking and the decision making and the principles of your organization. Producing the artifacts is the easy part - maintaining the institutional value of the design system is the hard part.

In this talk we’ll dive into the lessons I’ve learned during my time working on a large design system for a fast growing company. Hopefully we can help you avoid some of the common pitfalls and enjoy the quiet satisfaction of working on a design system so successful no one ever thinks twice about it.

Presented at:
OpenJS 2020
Full Slidedeck with Speaker Notes:
https://github.com/milsyobtaf/prez/blob/primary/2020/OpenJS/design-systems-arent-hard-openjs_notes.pdf

milsyobtaf

June 24, 2020
Tweet

More Decks by milsyobtaf

Other Decks in Technology

Transcript

  1. DUSTIN YOUNSE
    But they are complex.
    And also hard.
    DESIGN SYSTEMS AREN’T HARD
    OPENJS 2020

    View Slide

  2. WHO’S THIS GUY?
    @milsyobtaf from the internet
    I’ve worked on large websites
    since 2008
    I’ve worked with “design systems”
    since we called them “swatches”
    and “style tiles”
    Currently in Design Engineering at
    Indeed, a job that comes with the
    greatest laptop sticker

    View Slide

  3. WHAT IS A DESIGN SYSTEM?

    View Slide

  4. View Slide

  5. Organizations which design systems …
    are constrained to produce designs
    which are copies of the
    communication structures of
    these organizations."
    CONWAY’S LAW

    View Slide

  6. Your website is a manifestation
    of your organization’s problems
    “UNCLE” DAVE RUPERT’S LAW

    View Slide

  7. View Slide

  8. WHAT ISN’T A DESIGN SYSTEM?

    View Slide

  9. A FIGMA LIBRARY

    View Slide

  10. WHAT ISN’T A DESIGN SYSTEM?

    View Slide

  11. A REACT COMPONENT LIBRARY

    View Slide

  12. WHAT ISN’T A DESIGN SYSTEM?

    View Slide

  13. AN EXTERNAL WEBSITE
    PROMOTING YOUR DESIGN SYSTEM

    View Slide

  14. THESE ARE ARTIFACTS - NOT THE SYSTEM

    View Slide

  15. SO… WHAT IS A DESIGN SYSTEM?

    View Slide

  16. AN AGREEMENT ON HOW
    DIGITAL PRODUCTS ARE MADE

    View Slide

  17. DESIGN SYSTEM AGREEMENTS
    User Interface Design: how a digital experience looks
    Interaction Design: how a digital experience feels
    Content Strategy: how a digital experience sounds
    Documentation: how a digital experience is crafted

    View Slide


  18. DESIGN SYSTEMS TAKE TIME

    View Slide

  19. View Slide


  20. DESIGN SYSTEMS TAKE TIME AND THEY TAKE MONEY

    View Slide

  21. WHY BOTHER WITH A DESIGN SYSTEM?

    View Slide

  22. DESIGN SYSTEMS ARE ALL ABOUT SCALE
    Interface Design at scale
    Interaction Building at scale
    Content Creation at scale

    View Slide

  23. DESIGN SYSTEMS ARE ALL ABOUT SCALE
    When everyone on your team knows how a thing should be built, they
    can just build it.

    View Slide

  24. DESIGN SYSTEMS ARE ALL ABOUT SCALE
    When everyone on your team knows how a thing should be built, they
    can just build it.
    #1 Support Request: How do I do X?

    View Slide

  25. DESIGN SYSTEMS ARE ALL ABOUT SCALE
    When everyone on your team knows how a thing should be built, they
    can just build it.
    #1 Support Request: How do I do X?
    #2 Support Request: Why do I do X?

    View Slide

  26. A DESIGN SYSTEM IS A SERVICE
    NOT A PRODUCT

    View Slide

  27. YOU NEED TO ANSWER QUESTIONS,
    NOT WRITE CODE

    View Slide

  28. View Slide

  29. IF YOU ONLY HAVE THE TIME
    OR THE MONEY FOR ONE ARTIFACT,
    WRITE DOCUMENTATION

    View Slide

  30. DESIGN SYSTEM DOCUMENTATION
    If a Design System is made up of agreements, you need to write those
    agreements down.

    View Slide

  31. DESIGN SYSTEM DOCUMENTATION
    If a Design System is made up of agreements, you need to write those
    agreements down.
    If you have the budget, hire a Service Designer.

    View Slide

  32. DESIGN SYSTEM DOCUMENTATION
    If a Design System is made up of agreements, you need to write those
    agreements down.
    If you have the budget, hire a Service Designer.
    Should change as often as necessary.

    View Slide

  33. DESIGN SYSTEM HELPS EVERYONE

    View Slide

  34. ACCESSIBILITY AT SCALE
    Buttons that work as buttons

    View Slide

  35. ACCESSIBILITY AT SCALE
    Buttons that work as buttons
    Links that work as links

    View Slide

  36. ACCESSIBILITY AT SCALE
    Buttons that work as buttons
    Links that work as links
    Animations that respect prefers-reduced-motion

    View Slide

  37. ACCESSIBILITY AT SCALE
    Buttons that work as buttons
    Links that work as links
    Animations that respect prefers-reduced-motion
    INCLUSION AT SCALE

    View Slide

  38. ACCESSIBILITY AT SCALE
    Buttons that work as buttons
    Links that work as links
    Animations that respect prefers-reduced-motion
    INCLUSION AT SCALE
    Form fields that accept accented characters

    View Slide

  39. ACCESSIBILITY AT SCALE
    Buttons that work as buttons
    Links that work as links
    Animations that respect prefers-reduced-motion
    INCLUSION AT SCALE
    Form fields that accept accented characters
    Right-to-left text presentation that just works

    View Slide

  40. IF YOU DO NOTHING ELSE

    View Slide

  41. WRITE DOCUMENTATION

    View Slide

  42. HIRE A SERVICE DESIGNER
    WRITE DOCUMENTATION

    View Slide

  43. DESIGN SYSTEMS ARE HARD

    View Slide

  44. DESIGN SYSTEMS ARE HARD
    AND THAT’S THE WORK

    View Slide

  45. - Why Every Design System Needs a
    Service Designer
    - Conway’s Law / Uncle Dave's Law
    - Anatomy of a Design System
    - Design System Checklist
    - How the Right Design System
    Streamlines a Large Organization’s
    Digital Development
    RESOURCES

    View Slide