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:
That Conference TX

Full Slidedeck with Speaker Notes:
https://github.com/milsyobtaf/prez/blob/primary/2022/ThatConference/design-systems-arent-hard-v2-thatconf-speaker-notes.pdf

Transcript

1. DUSTIN YOUNSE
   DESIGN SYSTEMS
   

   AREN’T HARD
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. ABOUT ME
   @milsyobtaf from the internet
   
   
   I’ve worked on large websites since 2008
   
   
   I’ve worked with “design systems” since we
   called them “swatches” or “style tiles”
   
   
   Currently working in Design Engineering at
   Indeed, a job that comes with the best
   laptop sticker
   

   View Slide

6. DESIGN SYSTEMS
   

   AREN’T HARD
   But they are complex.
   
   
   And also hard.
   

   View Slide

7. WHAT IS A DESIGN SYSTEM?
   If you ask ten different people who work on
   design systems, you’ll get ten different answers.
   

   View Slide

8. View Slide

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

   View Slide

10. MARKETING
    
    
    DEPARTMENT
    PRODUCT
    
    
    TEAMS
    PROFESSIONAL
    
    
    SERVICES
    TECH CONTENT
    
    
    WRITING
    RESEARCH,
    
    
    CORPORATE COMMS
    HAL
    

    View Slide

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

    View Slide

12. View Slide

13. WHAT ISN’T A DESIGN SYSTEM?
    

    View Slide

14. A FIGMA LIBRARY
    

    View Slide

15. WHAT ISN’T A DESIGN SYSTEM?
    

    View Slide

16. A REACT COMPONENT LIBRARY
    

    View Slide

17. WHAT ISN’T A DESIGN SYSTEM?
    

    View Slide

18. AN EXTERNAL WEBSITE
    

    PROMOTING YOUR DESIGN SYSTEM
    

    View Slide

19. THESE ARE ARTIFACTS - NOT THE SYSTEM
    

    View Slide

20. SO… WHAT IS A DESIGN SYSTEM?
    

    View Slide

21. AN AGREEMENT ON HOW
    

    DIGITAL PRODUCTS ARE MADE
    

    View Slide

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

23. ⌛
    DESIGN SYSTEMS TAKE TIME
    

    View Slide

24. View Slide

25. ⌛💰
    DESIGN SYSTEMS TAKE TIME AND THEY TAKE MONEY
    

    View Slide

26. WHY BOTHER WITH A DESIGN SYSTEM?
    

    View Slide

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

    View Slide

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

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

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

31. DESIGN SYSTEMS HELP EVERYONE
    

    View Slide

32. ACCESSIBILITY AT SCALE
    Buttons that work as buttons
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

38. A DESIGN SYSTEM IS A SERVICE
    
    
    NOT A PRODUCT
    

    View Slide

39. YOU NEED TO ANSWER QUESTIONS,
    

    NOT WRITE CODE,
    
    
    NOT PUSH PIXELS
    

    View Slide

40. View Slide

41. IF YOU ONLY HAVE THE TIME OR THE MONEY FOR
    
    
    ONE ARTIFACT
    

    View Slide

42. WRITE DOCUMENTATION
    

    View Slide

43. DESIGN SYSTEMS ARE HARD
    
    
    

    View Slide

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

    View Slide

45. - Conway’s Law / Uncle Dave's Law
    
    
    - Anatomy of a Design System
    
    
    - How the Right Design System
    Streamlines a Large Organization’s
    Digital Development
    RESOURCES
    - Design Systems Slack
    
    
    - Design Systems Podcast
    
    
    - Design System Checklist
    
    
    

    View Slide