Random Thoughts on Design Systems from Recent Experience

For the last 12 months, the product design team at Stack Overflow has been working on a design system.

  • Design systems are worth the hype, they’re really powerful! They help keep different teams on the same page, even if they don’t talk with each other regularly.
  • If a design system is treated as a side project, it’ll probably fail. Getting executive air cover should be one of the first steps. Getting a product manager is a bonus. The more you do to treat it as product or client work, the better.
  • A pattern library is part of a design system, they’re not the same thing. A design system can include interface design patterns (a pattern library), as well as things like design principles, brand guidelines, voice & tone guides, inclusion philosophies, logo/graphic downloads, and more.
  • When dividing the work, it helps to separate the pattern library from the rest of the design system. Codifying UI patterns can be handled by small task groups. Design, inclusion, and content guidelines are larger topics that the entire product team should collaborate on.
  • Knowing where to draw this line can be tricky since UI patterns draw on the larger guidelines. Involving too many people can slow momentum. Involving too few can make others feel left out and resistant.
  • The organization (eg. BEM or atomic or SMACSS) and tooling (eg. SASS or LESS) around the markup probably doesn’t matter that much. What does matter is that everyone agrees* on a single direction.
  • * Real agree, not begrudgingly agree. It’s ok to spend a lot of time here, it’ll pay off in the long run.
  • If the product is more than a few years old, it helps to have someone on the design system team who knows the codebase front to back. They’ll know where all the landmines are buried.
  • A design system can make design software less relevant (and that’s ok). Sometimes I go straight from wireframes to code. Why build a picture of the design when I could just build the design?
  • Design systems aren’t just for websites and applications. I’m helping create one for HTML email 💌.
  • Don’t neglect documentation! Simply having a library of “approved” legos to choose from doesn’t prevent someone from building stuff like this:
From The Full-Stack Design System

I’d ❤️ to edit and build on this. If you have feedback or suggestions, leave a comment or ping me at @tedgoas.