Design Systems at GitHub

Starting from grass-roots

Primer documentation website in 2015.
A planning and brainstorming session with design leads during a team summit in March 2016. We’re all remote so we made the most of in-person time.

Showing our value

An early version of the new internal style guide in 2016.

Growing pains

  1. Communicate updates more widely through team posts: we have an internal tool called “Team” which GitHub staff typically use to announce important internal updates, new feature ships, and new hires. We started using team posts to tell people about new Primer and style guide updates, to give people a heads up when we shipped large code changes, and share more information behind our decisions.
  2. Make the status of styles more obvious: with the refactor of many of our styles things were constantly changing, we needed to communicate that clearly so that people knew what was safe to use. To help make status clear, we added a Changelog that gets updated with every release, and we added status labels to a modules documentation page. Similar to the status labels in Lightning Design System, ours are: stable, new release, in review, experimental, and deprecated.
  3. Introduce on-call duty rotation: Most teams at GitHub have an on-call duty rotation that we call First Responder. Whoever is on call is responsible for triaging issues and responding to requests for help or code review. Having someone on call means the rest of the team can stay focused on deep work.
A handy Hubot script in Slack lets us print out a list of items that need attention from the First Responder.

Scaling our impact

Improving our release workflow

Using Travis CI, new alpha versions are published to npm when someone makes a new pull requests or pushes up changes.

Getting robots to do the work

Servbot commenting on a pull request.

Office hours

We do office hours calls via Slack so that it’s visible to anyone in the channel. If we forget, slackbot reminds us!

Scaling the team

Over time we’ve hired for different types of skills to balance out our team. If you’re interested in joining the team, we’re hiring!

Scaling myself

Scaling how we build

Sometimes team meetings are even more fun when cats and dancing colleagues join! 😸

What’s next

Modernizing our front-end stack

The sandbox from our primer-react component library.

Creating a vibrant hub for collaboration

Primer color styles in Figma
Primer project on Codepen

Working in the open

Documentation from our public style guide https://styleguide.github.com/primer/
Project board for planning Primer releases.

Thank you ❤

--

--

--

Design systems manager at GitHub. Organizes NYC Design Systems Coalition. Fan of potatoes. http://broccolini.net

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Testing In-App Purchases Locally in Simulator

Digital Lean: Changes in lean tools with Industry 4.0 technology

Preserved Contaminant FAQ

The Next Porn: How to design a service without having money

Using UIViewController in SwiftUI (UIViewControllerRepresentable)

Plan the deployment environment strategy

EvmoSwap Airdrop Allocation

2017 Document Management Software Comparison: eFileCabinet vs Pinpoint

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Diana Mounter

Diana Mounter

Design systems manager at GitHub. Organizes NYC Design Systems Coalition. Fan of potatoes. http://broccolini.net

More from Medium

Cleaning up business logic with state machines

A state diagram describing five states and the transitions between them. The states are “Awaiting assembly” (which transitions to “Awaiting packing” when the order is assembled), “Awaiting packing” (which transitions to “Awaiting courier” when the order is packed), “Awaiting courier” (which transitions to “Dispatched” when the order is handed to the courier, or to “Awaiting packing” when the address is changed), “Dispatched” (which never transitions to any other state), and “Cancelled”.

How to bring the micro into the frontend

Web app rendering 101

How PayPal’s Team Revolutionized Their Design Process with UXPin Merge

PayPal scaled their teams with Merge graphic