Shaping Kinja’s Product Language

Kinja is the publishing platform powering Gizmodo, The Onion, Jezebel, Kotaku, The A.V. Club and 5 other sites. Together Kinja brands reach around 100 million unique readers a month.

I've been in the Kinja team since 2018. In my first year I was responsible for improving our design system. It was an atomic, bottom-up redesign project of both our UI and workflows. Here are the 3 goals I set to myself and the ways I worked towards them:

  1. Bring designers and developers together Contrary to Brad Frost's recommendation, we made our workshop and storefront the same place. We took Storybook, a tool already used and loved by developers, and added styleguide documentation. We retired our static styleguide, replaced it with Storybook and thereby got a living-breathing resource used every day by both teams.
  2. Refine foundationsI tackled accessibility, colors, typography, iconography, spacing, layout and more; trying to design simple, systematic solutions that work well for all our brands.
  3. Tools, not rules A good design system should be easier to follow than to ignore, because it elliminates guesswork. As a maintainer, one of my primary goals was to simplify adoption. For designers I built a Sketch library, a Sketch template and a data plugin. For developers we created linters that check color-contrast and spacing guidelines, and a utility that makes it a breeze to align elements to the layout grid.

See the Kinja Storybook live here