Start a projectContact

The front end of a home-services marketplace, and the design system behind it

Better Abode helps homeowners find vetted local contractors. We lead the front end: the design system every page is built from, the pages homeowners see, built with their engineer, and an interactive map of every state.

Client
Better Abode
Sector
Home services
Year
2026
Services
Front-end development, Design system
Visit better-abode.com
The Better Abode homepage on a desktop: the heading “Trusted Pros for Better Homes” above a bar listing vetted, insured, locally operated, licensed and highly rated.The same homepage on a phone.
  • 204Pages, all built from one design system
  • 51States and DC on one interactive map
  • 2Apps on one design system, for homeowners and the team
  • 100Lighthouse accessibility score on the homepage

The challenge

Better Abode’s promise is that hiring someone to work on your home shouldn’t feel like a gamble. Before launch, with no reviews to lean on, the site itself had to earn that trust, on a system Better Abode’s own engineer could keep building with.

Our part

We’re part of Better Abode’s team: in their meetings, on their Slack, with our own Better Abode email. We designed the system every page is built from, built the pages homeowners see, and built the interactive pieces, like the state map.

Their engineer had already built what runs underneath: the database, API and background jobs, the estimate engine behind the cost calculator, and the operations platform that runs the marketplace. What we build plugs into it: contractor sign-ups land in the team’s review queue, the calculator asks the estimate engine for its figures, and pages are put together from the guides and templates the team manages there. We build alongside their engineer, who also lays out pages from our design system. Their editorial team writes the guides.

A design system someone else could build with

We designed the system first and wrote it down on an internal reference site. It worked: Better Abode’s engineer laid out pages from the same parts, and they still look like one site.

The Better Abode design system reference, showing color swatches from dark brown to red, each with its role and shared token name.
Color roles and their shared token names, from the internal reference site.
  1. Marketplace actions on the reference site: primary, secondary and disabled buttons, a states and cities selector, a filter and a ZIP code field with a Start matching button.
    Actions, shown working
  2. A sample contractor card on the reference site, with buttons to preview it at mobile, tablet and desktop widths.
    One card at three widths, with sample content
  3. The cost calculator on Better Abode’s roofing page: the heading “Estimate your Roofing project cost in seconds”, then project, ZIP code and quantity fields, each with a hint under it, and a Calculate estimate button.
    The same parts in use: the cost calculator, live on every service page

Tokens, not hex codes. Color, type, spacing and shape live as named tokens in a shared package, which the marketplace and the team’s operations app both draw from.

Guarded by tests. Style tests check that every component owns its styles, so a page cannot quietly restyle a shared part.

From reference to live page. The fields, hints and buttons on the reference site are the ones homeowners use, so a form like the cost calculator is assembled from tested parts rather than designed again.

Every page a homeowner lands on

All 204 pages in the sitemap come from that system: the homepage and directories, 15 service pages, 51 state pages and 128 guides. Point at a page to scroll through it, or open the live one.

Pages that answer the question. Service pages carry reference statistics, a pricing guide and questions to ask a contractor. State pages carry dated housing figures with their sources, planning rules and local home styles.

Ready before launch. Contractor sign-up and coming-soon forms share one design, and launch controls decide what shows before the marketplace opens to homeowners.

Every guide can be found. Article pagination uses real links, so search engines can reach every guide, not only the first page of them.

Laid out again for the phone

Most homeowners will meet Better Abode on a phone, so each template was laid out again for it, not shrunk to fit.

  • The homepage on a phone, with the trust bar stacked into a list.
    HomeThe trust bar stacks into a list.
  • The menu open on a phone: Services, Locations, Articles, FAQ and About Us, with Get Free Quotes and a close button at the bottom.
    The menuIt opens over the page, with Get Free Quotes and close down by your thumb.
  • The cost calculator on a phone, with project, ZIP code and quantity fields one above another.
    The cost calculatorFields go full width, one to a row, each with its hint.
  • The services directory on a phone: photos of bathroom remodeling, fencing, flooring and foundations, two to a row.
    ServicesFour photos to a row become two, big enough to tap.
  • Popular home styles on a phone: one house, a ranch, in an arched frame with previous and next arrows.
    Home stylesThree houses side by side become one, with arrows to step through.

Tested at the edges. Browser tests check the layouts at the edges of each breakpoint, where layouts usually break.

Touch is its own design. On a phone the map docks its preview for a thumb instead of floating it under a cursor.

Need senior help inside your own team?

We join your meetings and your Slack and build alongside your developers, billed by the hour.

Talk about joining your team

A map you can pick up

Where a directory would list 51 states, we built a map. It tilts toward the cursor, lifts the state you point at and previews it before you go. On a phone it changes how it works, not just its size.

Pointing across the map, recorded on better-abode.com/locations.
The map on a phone with Texas tapped, and a card docked below it reading “South, Texas, View”.
On touch: tap to preview, then go.

Works before JavaScript. The map is rendered on the server and every state is a real link, so it works before any script loads. None of its geometry is sent as JavaScript.

A keyboard that follows the map. Arrow keys move to the nearest state in the direction pressed, so keyboard users travel the map the way it looks.

Made for touch. On a phone the map stays flat. The first tap previews a state in a docked card, and the second goes there.

Room for small states. States too small to point at, like Rhode Island and Delaware, get labels out in the Atlantic, joined to them by leader lines.

Try the map

A 404 that earned a smile

A wrong link is still a visitor, so we built a 404 to match the brand: a front door that opened onto a brick wall. Slam it and the wall took the damage, until a brick fell out and the page offered what anyone with a broken wall needs: a pro. Better Abode has since moved to a simpler page.

Three slams, recorded on better-abode.com.
The 404 page on a phone, with the door above the heading “We can’t find that page”.
On a phone, it swung under a finger.

Grab it or tap it. The door swung with a mouse or a finger. Pushed shut fast enough, it slammed, and a tap, a click or the keyboard slammed it too.

Damage that added up. Each slam shook the frame, dropped brick dust and cracked the wall further, and the caption changed with it. A door already shut knocked instead.

Calm when asked. Visitors who preferred reduced motion kept the cracks and the jokes, without the motion.

Still a way forward. Home, services, locations and the FAQs sat beside the door, so a broken link still ended somewhere useful.

Stack

Next.jsReactTypeScriptTailwind CSSPlaywright

Have your own engineers?

We can join your team the way we have here: in your meetings and on your Slack, working alongside your developers, billed by the hour.

Talk about joining your team
Next projectFlare Web Design Our own site, built as the proof