Purging Design System ‘rot’ from our checkboxes

Accidentally discovering hidden accessibility issues, fixing it heuristically, and a few simple tricks to avoid future rot.

Chuck Rice

--

Two rows of 4 rounded checkbox squares, coloured in a “Pop Art” fashion. Each checkbox coloured different gradients, with contrasting background shades.
If Andy Warhol was also into Design Systems, he might have painted something like this.

Originally published via Moonpig Group Product on 11 April 2024.

Rot is a strong word, but it’s simply another way to frame or think about design debt or tech debt. What exactly is ‘rot’? Well, these are decisions made long ago that were perfectly appropriate once, but over time fail to serve their purpose.

As an analogy, plant roots tend to rot if they aren’t repotted in the spring, often moving up a pot size to support new growth. Design Systems are similar in the sense that they have cyclic seasons, and need some long-term care to flourish. Lack of care leads to rot.

If left unchecked it can cause headaches for others. The system is one of the last places you want rot to occur, given how ubiquitous it is on a mature product and team. I’ll run you through an example with our checkbox component, and how I’m avoiding future rot.

How rot occurs

It’s a tale as old as time—you fall in love with the problem, use the design tricks you learned at the last conference, and battle test your solution with users and stakeholders. Every…

--

--

Chuck Rice

Sr. Product Designer, DevX and Design Systems @ Moonpig 🌙🐷 • Figma Community Advocate • 🎓 Educator: chk.fyi/LearnFigma • 400k+ Medium views