Design Systems

Rebranding the Gusto web app required a lot more than simply changing colors and updating the fonts. In the end we built a robust design system, consolidated our design patterns, and fixed hundreds of accessibility problems.

We began with our core components: colors, typography, tables, buttons, forms, and layouts.

The problem was that a lot of custom components and assets had been introduced over the years which meant that each team had its own best practices for building things. Our goal then wasn’t just to refactor all our core components to the updated brand guidelines, but it was also to bring all the teams together under one roof.

Figure 1. We started with redesigning components in our Figma UI kit.

Along the way we fixed dozens of small UI details; one example that had bugged me for a long time was how our tables used proportional figures which made long table rows of numbers difficult to read. It’s these kinds of details that have a big impact on an app that’s designed to explain complex tax information.

But even relatively simple components, like buttons, required significant refactors to consolidate and remove unnecessary duplicates we had slowly accumilated over time.

Figure 2. We consolidated our buttons and fixed tons of color accessibility problems.
Figure 3. We built brand new components along the way, too.

We refactored almost every component in the design system, removed hundreds of clunky and unnecessary inconsistencies, and greatly improved accessibility in the app by tackling our markup and text styles.

We also made it much easier for engineers to build their features and we took the time to make every single component and feature in our web app responsive so that customers could run payroll from the beach. So we built the beginnings of a great design system, but we also built a community.

And that, I think, is what great design systems work does.

Figure 4. We focused on the core components and payroll features first before expanding to work with other teams across the organization.