Back to home

One design system powering every Neighborly brand, built to scale with every campaign

Lead Designer · Design Systems, Web, Internal Tools

Problem

Neighborly’s home service brands run PPC campaigns across hundreds of locations. Every landing page had to stay on-brand, feel local and launch fast, and building each one by hand took one to two days.

Outcome

Multiple brands on one system, and a tool that takes a site from brief to staging in minutes instead of one to two days. Location-matched pages lowered cost per click and acquisition cost, and one tested change lifted conversions by over 70%.

One system, multiple brands, one switch

I built every franchise brand on the same components. Brand guidelines and copy were approved up front, and differences live in variables, so switching brands changes colour, type and logo while the structure that converts stays the same.

One system, multiple brands, one switch

I built every franchise brand on the same components. Brand guidelines and copy were approved up front, and differences live in variables, so switching brands changes colour, type and logo while the structure that converts stays the same.

One system, multiple brands, one switch

I built every franchise brand on the same components. Brand guidelines and copy were approved up front, and differences live in variables, so switching brands changes colour, type and logo while the structure that converts stays the same.

Consistent by system, flexible by brand

With multiple franchise brands and numerous local sites, designing each one separately wasn’t sustainable, so I set the direction for a shared system instead: consistent where it matters, flexible where brands differ, so improvements reach every brand at once.

Consistent by system, flexible by brand

With multiple franchise brands and numerous local sites, designing each one separately wasn’t sustainable, so I set the direction for a shared system instead: consistent where it matters, flexible where brands differ, so improvements reach every brand at once.

Consistent by system, flexible by brand

With multiple franchise brands and numerous local sites, designing each one separately wasn’t sustainable, so I set the direction for a shared system instead: consistent where it matters, flexible where brands differ, so improvements reach every brand at once.

Variables that adapt to every brand

All components bind to semantic variables like brand/primary. Each brand is a mode, so adding one is a new column of values.

Match the campaign, lift the conversion

Each section has a variant per campaign focus. One property swaps its image, copy and stats while the layout stays locked.

One naming convention across design and code

A single source of naming truth means any layer traces straight to its code component, and both sides stay consistent.

Motion guidelines that AI follows across the system

A .md skill file sets timing, easing and stagger, and AI animates each component with motion.dev, so every brand moves the same way.

Built to feel local, optimized to convert in every city

A website that feels local earns trust faster. Each location gets its own city, team and imagery, so customers see a business they recognise, built on a layout and best practices that are proven to work.

Built to feel local, optimized to convert in every city

A website that feels local earns trust faster. Each location gets its own city, team and imagery, so customers see a business they recognise, built on a layout and best practices that are proven to work.

Built to feel local, optimized to convert in every city

A website that feels local earns trust faster. Each location gets its own city, team and imagery, so customers see a business they recognise, built on a layout and best practices that are proven to work.

Every search lands on a page built to convert

Ad groups map to service pages that reuse the home page’s trust and offer sections.

Location-aware copy from ad to page

Location fields populate the ad headline, top bar, hero H1 and click-to-call number.

Systematic approach to image assets

A brand, type and region taxonomy lets each geo-targeted site pull imagery for its area.

From brief to staging site in minutes

I led the builder from concept to launch, turning a one-to-two-day turnaround into a short brief. Every page is built from approved components, so the product team takes a site to staging without a design handoff and designers focus on higher-impact work.

From brief to staging site in minutes

I led the builder from concept to launch, turning a one-to-two-day turnaround into a short brief. Every page is built from approved components, so the product team takes a site to staging without a design handoff and designers focus on higher-impact work.

From brief to staging site in minutes

I led the builder from concept to launch, turning a one-to-two-day turnaround into a short brief. Every page is built from approved components, so the product team takes a site to staging without a design handoff and designers focus on higher-impact work.

One brief configures the build

Brand, location, services and offers map to the template’s components and variables.

The preview renders every change live

Every choice updates the mockup instantly, so the approved preview matches staging.

Approved website hands off to marketing

The URL is set to marketing’s target location, then they push the campaign live.

Letting the data shape the template

Clarity heatmaps and recordings showed where the templates could improve. Changes were A/B tested on live ad traffic, and because every site shares the same components, a winner shipped to every brand at once.

Letting the data shape the template

Clarity heatmaps and recordings showed where the templates could improve. Changes were A/B tested on live ad traffic, and because every site shares the same components, a winner shipped to every brand at once.

Letting the data shape the template

Clarity heatmaps and recordings showed where the templates could improve. Changes were A/B tested on live ad traffic, and because every site shares the same components, a winner shipped to every brand at once.

A/B test on live ad traffic

Google Ads traffic was split 50/50 between the baseline and a variant with sticky Call and Online Form CTAs.

+70% conversions, shipped to every template

Clarity heatmaps showed taps on the sticky CTAs throughout the scroll, so the component shipped to every template.

Learnings

Moving approval from individual sites to the system itself saved the most time. Once Neighborly signed off on the templates, assets and copy, hundreds of sites could go live without each one going back for review.

Learnings

Moving approval from individual sites to the system itself saved the most time. Once Neighborly signed off on the templates, assets and copy, hundreds of sites could go live without each one going back for review.

Learnings

Moving approval from individual sites to the system itself saved the most time. Once Neighborly signed off on the templates, assets and copy, hundreds of sites could go live without each one going back for review.

Turning days of email design into minutes

Lead Designer · Design Systems, Email

Turning days of email design into minutes

Lead Designer · Design Systems, Email