Design System, No Budget

Design systems exist regardless.

Shortly after joining a new team, I began digging into one of our main products. The design system that was in place was an established CSS framework with a heavy dose of custom styles built on top.

This was problematic. First, it made the codebase difficult to maintain. With tens of thousands of lines of CSS some of the engineers were afraid to even touch it. Second, designing new solutions when there often was no clear, one-way-of-doing-it was time consuming. I saw myself and others getting muddled up in the implementation details rather than focusing on bigger picture solutions. From a user experience perspective, navigating these inconsistencies in the UI required a greater mental load.

It was clear to me, building a purposeful design system would be essential to accelerate the design and development process. At the time, I had zero buy in from folks setting the priorities. I made my case, that we needed to invest serious time and effort in building a coherent system, but without buy-in it was going nowhere fast.

Moonlighting for Structural Clarity

After several months, I realized the only way this was ever going to happen was a slow methodical approach that little by little moved the needle. With every new design project that was brought to me, I began building a symbol library in Sketch. Every-time I added a new component, I took great care in understanding how things were currently built in the existing product. This was painful as it often meant working through inconsistencies.

After demoing my progress to the rest of the design team, I got buy in and we created a shared component library that team members could contribute to. Once the barebones library became a collaborative project, it supercharged the effort. Although we were still plugging away at it on the side, we eventually built a fledgling system.

Unfinished Business

Our progress stalled when we decided to make the jump to Figma, but since then we’ve been shipping designs with much more consistency. We’ve been working with the dev team to try to help translate that consistency to a cleaner front-end. It’s slow going, but every small investment pays multiplying returns.

Posted October 25, 2019