
The existing system had fractured across brands, teams, and tooling. Pages were rebuilt from scratch repeatedly, components lacked consistency, and even small growth experiments required engineering support.
Two distinct brand expressions — Angi (consumer-facing and pro-facing) and HomeAdvisor — needed to run on the same underlying component architecture, each with its own visual language but sharing the same structural foundation. Instapro was later brought onto the system after their acquisition by Angi.
I led product design for the migration from a legacy page builder to SLAB, defining the component system, responsive behavior, and authoring experience used across Angi and HomeAdvisor.
I started with a full component library audit across Angi and HomeAdvisor — cataloging what existed in SLAB, what was inconsistent, and what was missing entirely. Rather than designing new components speculatively, the audit drove the roadmap: fix what could be fixed, build what was genuinely absent, deprecate what was redundant. The rule was simple: standardize what already worked, rebuild only what was broken, and avoid creating net-new components unless they solved a recurring need.
The real problem wasn't UI inconsistency — it was operational inconsistency. Designers, engineers, and marketers were all solving the same problems differently, with no shared language between them. Every new page effectively started from zero.
The goal was a single token layer that both brands — Angi and HomeAdvisor — could run on. Each brand had its own visual language, but semantic tokens meant brand-specific values lived in one place rather than being hardcoded into every component. Swap the token set, the brand changes. The components stay the same. When Instapro was later acquired, this architecture made it straightforward to extend the system to support a third brand without rebuilding from scratch.
At this scale, ambiguity became operational debt. A spacing inconsistency in one component could silently propagate across hundreds of pages. Beyond the token layer, every component shipped with detailed spec documentation — spacing, typography, color, and interactive states called out explicitly. With multiple brands building on the same system, handoff precision wasn't optional.
The goal wasn't just consistency — it was operational autonomy. Every component was built into the CMS with configurable props — content, layout, visibility, and brand expression all controllable by marketers directly. No design review. No engineering ticket. A marketer could turn a section on, swap the headline, change the layout variant, and publish — without touching code or filing a request.
That was the goal from the start: make the system so well-specced and constrained that the right decision was always the easiest one to make.
The migration launched across Angi's highest-traffic SEO landing pages and fundamentally changed how quickly teams could ship, test, and iterate.
That time was reinvested into faster experimentation cycles and higher shipping velocity across growth teams.
We built a flexible system quickly because the organization needed speed. In hindsight, I would have pushed for token standardization earlier — some inconsistencies became harder to unwind once multiple teams were building independently inside the system. The tradeoff was worth it, but it reinforced how important governance becomes once a design system reaches operational scale.