Work / Harbor & Pine Concept project
Helping homeowners choose a $20,000 roof with confidence.
Harbor & Pine replaces roofs on period and coastal homes. We built a refined brand and a site that answers the two questions every buyer has: which material, and how much?
The challenge
What wasn't working
Harbor & Pine spent hours on consultations with homeowners who were shocked by the price or hadn't thought about materials yet. Many never booked again.
The old site showed a handful of photos and a phone number. It didn't explain the difference between asphalt, metal and cedar, or give any idea of cost.
"I have no idea if this is a $10,000 job or a $40,000 job."
Homeowners in Greater Portland with older or high-value homes, researching a once-in-30-years decision over several weeks, often with a partner.
Goals
What the new brand and website had to do
Better-prepared leads
Consultations with people who know their budget.
Sell the right material
Help buyers understand trade-offs, including premium options.
Reflect the quality of the work
A brand that matches the homes they roof.
What we learned
Insights that shaped the design
Showing realistic costs up front attracts serious buyers and saves everyone time.
Buyers want lifespan and cost side by side, plus how it will look.
Editorial layout and calm language suit people researching carefully.
Brand solution
Coastal craftsmanship
Aa Bb 123
Colour palette
Voice and tone
Considered, warm and precise. Speaks like a trusted advisor.
- Refined
- Knowledgeable
- Calm
- Honest about cost
Website solution
Key design decisions
Each decision is linked to the goal it supports.
Roof cost estimator
Home size, pitch and material produce a realistic price range in seconds.
Goal 1: Better-prepared leadsGoal 2: Sell the right materialMaterial comparison cards
Asphalt, metal and cedar with lifespan and installed cost per square foot.
Goal 2: Sell the right materialEditorial layout and serif type
Generous space and a classic serif match the period homes Harbor & Pine works on.
Goal 3: Reflect the quality of the workFour-step process
Consultation, proposal, installation and walkthrough set expectations for a big project.
Goal 1: Better-prepared leadsGoal 3: Reflect the quality of the workConsultation form with a timeline question
Asking when they plan to replace helps prioritise ready buyers.
Goal 1: Better-prepared leads
Desktop and mobile
Designed for the phone first
Measuring success
How we'd know it's working
| What we track | Target | Design decision that supports it |
|---|---|---|
| Estimator users who book a consultation | Above 12% | Booking button inside the estimator |
| Consultations that become signed jobs | Above 50% | Leads arrive knowing the likely price |
| Share of jobs using metal or cedar | Growing over time | Side-by-side material comparison |
| Leads planning to replace within 6 months | Over 60% | Timeline question in the form |
This is a concept project based on a fictional brief, so these are the targets the design is built to reach, not reported results. For client projects, we agree targets like these at kickoff and report against them after launch.
Try it yourself
See the live concept website
Open the working site and try it on your phone.
Next project
