Design Consistency and Developer Productivity Metrics

Daniel O'Connor
Feb 25, 2017 · 2 min read

Thanks, Chaunce!

The key metrics revolved around our two goals of improving design consistency and developer productivity. We made a few assumptions to measure these goals:

  1. Improve design consistency: We believe that design consistency and quality improve when our React components gain adoption. It is harder to one-off React components, so we can be more confident that they are being used properly.
  2. Improve developer productivity: We believe that developer productivity improves when they use React components because they don’t have to worry about CSS and the components are easier to use.

We tracked key metrics both programmatically and with a bi-annual survey.

The key metrics we tracked programmatically included:

  • React refactoring: Number of React components versus Vue.js components
  • OUI React Adoption: Number of times our non-React UI components were used versus the new React UI components
  • Percentage of React components coming from OUI: A higher number means increased confidence in a high quality UI.
  • Average number of times a file is required: We believed that this number would increase slowly since React encourages smaller reusable components.

We tracked these by saving webpack stats and hacking together a Node script to extract these metrics and store in a CSV.

The bi-annual survey asked questions such as:

  • How likely are you to recommend UI Engineering tools and services to colleagues? (1–10)
  • Do you believe you are building UIs more quickly than three months ago? (1–5)

There was also a “Why did you give this score?” question for each of these. The survey allowed us to gain insight into our goal of improving developer productivity.

Hope that is helpful!

    Daniel O'Connor

    Written by

    Somewhere between design and development at Thumback.