Spaghetti Code &
the Design System

Step 1:

Listen to users

I could observe how broken the design system, the design system team and the product outcomes were but I hadn't heard from its users, product designers and developers.

Product developers hated the legacy design system, they avoided using it. They explained that the code library was unstable, fragile and created more work than it solved. As a work around they were creating many redundant code libraries.

Designers had no love loss for the design system. But getting to why was not going to be easy? They were tight lipped as to why. The only way I was going to learn was by observing the Design System Ambassadors supporting the product designers.

This problem turned out to be bigger than a design system designed for the wrong use/form factors and poor code. There was a police state! The Design System Ambassadors had been directed to command and control how product designers designed. Designers were frustrated, they would design a UI only to be told that they used the wrong components and that they had to redesign the entire experience.

Step 2:

Hard rebooting the design system

Now that I had a point of view, I presented my insights to leadership and recommended that we take the most cost effective approach, start over. Trying to untangle the spaghetti code was not an option, we couldn't afford the time and it would have never been stable.

We hired an agency to increase the size of the development team and level up our UI development skills. Our audacious goal was to build the last design system that the company needed, so it needed to be flexible, themeable, accessible, and backward compatible.

The design system team needed a reboot too. The police state had tarnished product designers against the “Standards” team.

Step 3:

It’s go time

I staffed the new design team with designers that had development experience and strong UI design skills but none had ever designed an enterprise design system. My previous experience leading the Watson Health Design System came in helpful. We defined WHAT we would design (buttons, dropdowns, etc) and used best practices (atomic design + accessibility) to define HOW we would design. Diverging and converging until we found a design language that worked for our user’s needs - high density + high contrast + the company brand language.

Once we had our direction, we needed speed. Speed is hard with a team divided by discipline, timezone and employment type such as employee or contractor. I set clear expectations and modeled the behaviors of showing work often when it could fail cheaply and be improved. This built speed and transparency into the team. We worked through detailed designs of components prioritizing the most used first so that product teams could adopt quickly.

Step 4:

The great refactor!

This wouldn’t be a good story if it didn't have a bump or two in the arc. As we started working with our first adopter we hit a big technical bump. The chief architect had defined that we would use BEM to build components but when he left the company and product developers changed direction deciding they would move to Styled Components. So I did what every product manager hates, refactoring! We doubled the contracting development team to 12 and refactored 5 months of work  in 6 weeks!

With code and design ready for our pilot adopter, we harden the design system. As the kinks became fewer and fewer we turned our attention to scaling adoption across the company. I created a change management program that included education, communication, review, and mentorship.

Step 5:

Off boarding the development agency

Our next major milestone was to take complete ownership of the design system and off board the development agency. Since two of the company developers joined the team early in the project they had deep understanding of the code so the transition plan was limited to documentation and knowledge transfer.

But the biggest challenge with the transition of ownership was going to be sustaining the investment in the design system. I had to influence the Vice President of Engineering who led a centralized development organization to staff the design system. We had built up a backlog of future work that justified a team of six developers.