A Tale of 100 Blue Buttons

Some background

Meet Scoop. It's been here for a while.

              $ cd cms-web && git log --reverse
              commit 3f9d610975ab255fc94614ef856e4217a9cc71a9
              Author: afishman
              Date:   Tue Jul 22 20:31:17 2008 +0000

                  git-svn-id: https://svn.prvt.nytimes.com/svn/cms/trunk/cms/trunk@291 fae600c7-25aa-4c1f-88b8-96a10973b8dd

              $ ls | grep cms-ui
              cms-ui-common                  cms-ui-module
              cms-ui-oakarticle              cms-ui-article
              cms-ui-scoop-monitor           cms-ui-admin
              cms-ui-oak                     cms-ui-common-views
              cms-ui-common-services         cms-ui-video
              cms-ui-redux-modules           cms-ui-console
              cms-ui-collection              cms-ui-watchingrecommendation
              cms-ui-paidpost                cms-ui-image
What does a button look like in Scoop?
Why does this matter?

The Newsroom

Newsroom Pain Points

  • Digital-first newsroom → more responsibility for journalists
  • Context switching from one tool to the next
  • RSI from tons of mouse and keyboard work


Developer pain points

  • Too many decisions to make
  • Existing component libraries have inconsistent APIs, or are missing things
  • Not a11y experts, but want to make accessible products
  • No process for updating shared components


Designer pain points

  • Too many decisions to make
  • Hard to stay in sync with what design decisions other teams are making
  • Constantly need to rebuild the wheel (e.g. buttons) in order to make a simple screen
Inconsistent design is ruining everything!
A possible solution: Design Systems

What is a Design System?


Some examples

How can our design system address newsroom pain points?

  • Full WAI-ARIA spec compliance
  • Consistent usage across apps (which means product and developer buy-in)
  • Carefully selected and intentional color usage, both for a11y and productivity

How can our design system address developer and design pain points?

  • Good, readily available documentation
  • Consistent API that covers supported use cases
  • Components should do one thing well, no swiss army knives

Filling our toolbox: Storybook, React, and Emotion

Storybook: One stone, so many birds
Centralized (and customizable!) documentation
Component development
Accessibility evaluation
Visual regression testing
Make it easy to do it right, and hard to do it wrong, part 1: Scaffolding
Make it easy to do it right, and hard to do it wrong, part 2: Tokens, Utilities, and Patterns