Measuring the Impact of a Design System

The spreadsheet that I have created to keep track of the progress in the componentisation of the UI for our design system. The list of components obviously is longer than this, is around 240 lines.
  • first of all the trend: there is a constant and sensible growth in the number of components contained in the library, in less than one year we went from ~50% to ~80% of coverage
  • the two formulas are converging, which means there’s less uncertainty
  • we’re reaching a good coverage, around 80%, which — according to the Pareto principle (and Nathan Curtis’ wisdom) — means we’re left with a 20% of work that, potentially, may have a much lower ROI.
As you grow a design system’s library, a UI component’s average cost increases while it’s value to the community decreases. The threshold when cost exceeds benefit varies by org. — Nathan Curtis
git log --stat --reverse --date=short -- 'src/css/*.less' > ~/git-log-stats/data-raw/logs_less.txt
commit 13f68a70e9fd483f22b527ea63f288e8f4ab4f33
Author: Name Surname <name.surname@email.com>
Date: 2014-12-05
[MW-****]: restored the clear button src/css/v2/elements/forms.less | 12 ++++++++++++
src/css/v2/modules/header.less | 2 +-
2 files changed, 13 insertions(+), 1 deletion(-)
commit 303c5cbd8c70c1932d0fa517cb2ca60783c6fce7
Merge: e16b0d0548 c36113c1ca
Author: Name Surname <name.surname@email.com>
Date: 2014-12-10
[MW-****]: Merge remote-tracking branch 'origin/master' into MW-****_restore_clear_button...
    {
"date": "2014-12-05",
"files": 2,
"insertions": 13,
"deletions": 1
},
{
"date": "2014-12-06",
"files": 10,
"insertions": 120,
"deletions": 60
}, ...
Visual representation of the changes in two codebases, on the top the application and on the bottom the component library.
A similar visual representation of the changes in two codebases, this time using rectangles instead of circles.
  • in the first months of 2016 there was a phase of many and very frequent medium-sized changes (true: this corresponds to a phase of evolution and settling of the CSS codebase: we introduced a style-guide and started to componentize more and more the UI);
  • between the end of 2016 and 2017 a period of big massive changes (true: it was when we worked on a complete redesign of the entire application, a project called Re-Think);
  • then in 2017 there were three big peaks, corresponding to three big re-factorings of the code (in fact, we moved from LESS to Sass, we introduced stylelint, and we enforced the order of CSS properties);
  • in the last part of 2017 and for the whole 2018, only relatively small and isolated changes, with some more evident groups of changes here and there (we introduced a new complex feature called Livestream in our application, we completely removed all the SVG icons in the codebase).
The difference between before/after the introduction of a design system becomes even more self-evident.

Resources

--

--

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