Case study · Web · Design systems

Building the platform that let Angi's growth team ship without waiting.

Company
Angi
Role
Senior Product Design Lead
Timeline
2022–2024
Platform
Web (Mobile First)
Angi Solution Center Home Exteriors page mockup with hero, article grid, and design system components
Overview
Overview

37% conversion lift. 36% increase in funnel entry.

Behind those numbers was a rebuild of Angi's marketing infrastructure: unifying Angi (consumer-facing and pro-facing) and HomeAdvisor onto a scalable component system, and enabling growth teams to launch experiments without engineering support.

The context

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.

My role

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.

Project roadmap

Overall project flow
The work

Audit first, build second.

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.

Hero component audit
Button component audit
Pro card audit overview
Key insight

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.

Designing the system beneath the UI

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.

Brand tokens — Angi, HomeAdvisor, and Instapro token layer
Brand tokens — continued

Speccing for scale

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.

Page spec documentation
Component spec documentation

Designing for operational scale

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.

Contentful — SLAB builder and assembled pages

Sample projects built with the new components

Outcome

37% increase in conversion. 36% increase in funnel entry. 17.5% decrease in bounce rate.

The migration launched across Angi's highest-traffic SEO landing pages and fundamentally changed how quickly teams could ship, test, and iterate.

37%
Increase in conversion (GeoCat)
36%
Increase in funnel entry (GeoCat)
17.5%
Decrease in bounce rate (GeoCat)
20%
Reduction in design-to-development handoff time across the Growth org

That time was reinvested into faster experimentation cycles and higher shipping velocity across growth teams.

Reflection

What I'd do differently

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.

← All workNext: Angi