How Tealium Tackles Design Debt

Most companies have some amount of design debt. Design debt is a natural phenomenon that occurs as a product matures, and newer features haven’t had as much time to reach an ideal level of polish. It’s tempting to scrap the front-end and start from scratch, but given the reality of the product development cycle, that’s not always feasible.

For example, not all blue buttons may have the same style. Some could have different shades of blue, a different corner radius, or different padding between the text and border. These little details add up.

So what is Tealium’s strategy for tackling design debt?

First, we perform an audit of all of the different styles of components.

We evaluate every page and document each component. The type of information captured includes:

• Screenshot of the component
• Which page that component was found on
• Whether or not that component’s style will persist
• If the component’s style does not persist, which style it would change to

UI kit for designers

A UI kit is a living document of our most commonly-used components. As any design team scales, everyone has to be on the same page. Which is why Google’s Material Design has become as popular as it has in the design community. Google was also faced with the challenge of having different people working on different products, yet trying to make them all feel the same. A UI kit ensures that one designer isn’t using a different blue button then another designer.

Style guide for developers

At Tealium, we use Zeplin to facilitate the handshake between designers and developers. Zeplin is a tool that allows designers to export their designs without changing the format, which is great for designers who each might prefer a different design tool, like Sketch, Adobe XD, or Figma. Then specs, assets, and code snippets are automatically generated for the developers. In addition to Zeplin, we are continuing to develop a style guide page that has all of our commonly-used components, along with the CSS class names needed to invoke them.

This style guide page will work seamlessly with React. So if any component gets updated on the style guide, it will affect all areas of the user interface that have that component.

Just to be clear, a style guide page is not the same as a CSS/LESS file. It’s more like Bootstrap’s Components page: a visual guide that serves both designers and developers.

What used to be a huge effort is no longer an intimidating task.

Consistency is an effort that starts with the designers and is continued by the developers. It is a mindset that respects the past, anticipates the future, and contributes to a better user experience.