A new website for a Lower Mainland roofing company, designed to turn visitors into quote requests.
Homepage — desktop
Client ask
“Better messaging to drive quote requests”
Why
The goal was more quote requests, so everything leads to one action: a quote button in the header of every page, and the form itself in the hero. On phones it becomes a single button, so the headline still fits the first screen.
Trade-off
Less room for imagery above the fold; the aerial video runs behind the headline instead.
What to notice
Client ask
“A more professional, high-trust look; feature the GAF certification and Home Depot endorsement”
Why
Trust decides who gets the call, so the proof sits directly under the headline, ahead of any services copy.
What to notice
Client ask
“An “Our Process” section”
Why
A new roof is expensive and disruptive, so a five-step process answers “what happens next?” before anyone has to ask, and financing is framed as monthly payments.
Trade-off
A longer homepage, so each step is kept to one sentence.
What to notice
[ 1 ] Sketches
Page structure and hierarchy on paper.
[ 2 ] Wireframes
Homepage and service layouts, low fidelity.
[ 3 ] High fidelity
The design system and every page, approved as first designed.
[ 4 ] Build
Built and published in Figma Sites, responsive to phones.
What happenedBoth revision rounds went to copy and photos the client supplied mid-project.
Next timeI'd gather the client's photos, facts and credentials before high fidelity, so revisions refine the design instead of catching up on content.
What happenedFeedback reached me through my partner, and detail was lost on the way.
Next timeI'd join the kickoff call to hear priorities in the client's own words and ask follow-up questions on the spot.
What happenedThe brief's interactive map of completed projects became a Google Maps embed.
Next timeI'd confirm what the build tool supports before features go into the proposal.
© 2026Jonathan Andrew
