How I built the design system behind GoDaddy's first product theme.

The Hub by GoDaddy Pro launched for web professionals in 2021. This launch coincided with a bigger vision to update the in-product design language across GoDaddy’s ecosystem. The Hub would be the first product to adopt the new vision, as a theme with its own brand.

Front of site and advertising were already built on it, and leadership wanted the Hub to launch on that brand and use the new theming technology engineering was actively building. Translating the vision work to real production components was the gap I filled. Without a design system, screens would get built with a mix of GoDaddy’s main brand components and hardcoded styles. Design and engineering were stuck and needed a foundational system to start working with.

I partnered with our design director to sketch high-fidelity screens showing how the brand guidelines would work on the interfaces our designers were already building. Mapping one to one against the main design system told us exactly which components needed theming and which values had to change underneath them. That gave us a scoped list instead of a redesign.

The Pro brand palette didn’t have colors that passed contrast when used as text. The main GoDaddy brand used its version of teal which passes contrast on white backgrounds, but even the main brand had accessibility problems because it only used color as a differentiator, which gets problematic when the inline buttons are close to text. Dense, technical dashboards (like hosting settings) run into this problem the most, and they often live in the Pro ecosystem. In our theme I defined our default inline buttons to black with an underline, and use the main GoDaddy brand color on hover.

This cleared us of accessibility problems and moved us closer to the vision the main brand was defining for future systems.

The theming backend was less robust than we expected. Values we had designed against did not exist in the system yet, and the team building it had priorities outside the Pro theme. Working closely with the engineering lead and rest of the team, we took each gap case by case and picked one of three options: store the value locally, hardcode it and fix it later, or pare the design back to what the system could actually support. Understanding what each team was optimizing for is what made those conversations productive.

We also coded a page together that laid out where the theming technology and our needs diverged. Documenting the gap made it something the team could point at and plan around instead of rediscovering it one component at a time.

I owned the Pro pattern library for a year alongside my product work. When we dedicated a principal designer to the Hub’s design language, I partnered with the design foundations team to scale the new design language across GoDaddy’s other in-product teams.

I represented Pro in the foundations workshops where in-product teams aligned on shared patterns. I updated existing components against what we’d learned building the Hub, and contributed new components back so other teams could use them on their own surfaces.

Each month I brought what we were learning in foundations back to my product team, so the Pro theme stayed aligned with the shared system as it evolved.

There were many challenges over the years with this system, but two themes were the most consistent: miscommunications with the technology stack, and keeping the teams (design, engineering, and product) in the loop. Documentation and understanding how your system is set up from a code perspective are two of the most important pieces of managing a design system.