Three teams were building the same retail wireless experience using three different toolkits: an in-house marketing team maintaining brand guidelines in a single system, a content management team building components directly in AEM containers with custom CSS, and an external agency introducing a new visual identity for one of the four brands. None of the three had visibility into what the others were shipping.

The result was what Nielsen Norman Group calls a break in the consistency and standards heuristic: users encountered different button styles, spacing, and interaction patterns depending on which part of the site they landed on. Frontend developers could not build or test a component in isolation without first determining which version was current. Every new page meant re-deriving styles from scratch, which slowed releases and quietly multiplied the number of near-duplicate components in production.

For a business selling prepaid wireless plans through comparison-heavy pages (rate plans, device bundles, checkout), that inconsistency was not just cosmetic. It made the brand feel less trustworthy at the exact moment when a shopper is deciding whether to hand over payment information.

Before designing anything, I needed to understand where the inconsistency was coming from. That meant sitting with all three sources at once: the in-house marketing team's brand guidelines, the CMS team's component builds, and the external agency's new brand direction for one of the four sub-brands. I mapped how each group's tools, from design software to the CMS's container-based CSS, fed into the live site, and ran usability testing on the existing site to see where the inconsistency was costing users time or confidence.

That mapping exercise surfaced the real issue: this was not a documentation problem; it was a structural one. Each brand legitimately needed its own visual identity, but the underlying interaction patterns, such as a plan-selector card, a form input, and a modal, were functionally identical across all four. Treating each brand as a separate design project just meant developers kept rebuilding the same component four times.

That insight reframed the goal. Instead of a single static style guide, I designed a tiered, token-based architecture: a global theme at the top, four brand themes beneath it, and a shared elements-and-components layer that each brand theme could draw from and extend. It follows the same logic as atomic design and the layered token systems Nielsen Norman Group recommends for multi-brand products: change a token once at the top of the hierarchy, and it propagates everywhere it is used, rather than requiring four manual updates.