Web Design

Homepage Teardown: Five Patterns the Best Service Websites Share

For most service businesses, the homepage receives more traffic than every other page combined, yet it is usually designed last and by committee. The result is a page that tries to please everyone, a rotating carousel, four competing buttons, a slogan nobody remembers. The best homepages on the web were built by teams who made the opposite trade: one message, one action, proof everywhere. This teardown examines four very different homepages, Stripe, Basecamp, McKinsey.com, and HubSpot, and extracts the patterns that transfer to a service firm of any size. None of them require a bigger design budget. All of them require sharper decisions.

Joshua Agonya Pi'Rwot

By Joshua Agonya Pi'Rwot

Founder, Business Growth Accelerator

Executive summary

Your homepage gets more traffic than every other page combined, and most waste it. This teardown of Stripe, Basecamp, McKinsey and HubSpot shows the hero, proof and CTA patterns that actually move strangers to act.

Section 1

The five-second test: say the thing

Run a five-second test on Stripe's homepage and a stranger can tell you what is being sold, to whom, and why it matters. Run the same test on a typical agency or consultancy homepage and you get back adjectives. Nielsen Norman Group's homepage usability guidelines have been blunt about this for years: a homepage must communicate what the company does immediately, in one or two plain sentences. The pattern to copy from Stripe is not its gradient or its animation budget, it is the discipline of naming the buyer and the outcome in the headline itself. Basecamp does the same thing with a completely different aesthetic: an opinionated, text-heavy opening that names the pain of running projects over scattered tools. Two visual extremes, one identical decision. If your headline could sit on a competitor's site unchanged, it is not a headline. It is wallpaper. For the step that usually comes next, see [Case Study: How Category-Leading Brands Built a Movement with Storytelling](/blog/case-study-how-built-a-movement-with-storytelling).

Section 2

Four homepages, four hero patterns

The four sites below represent four distinct hero strategies, and each one is coherent: the headline, the proof, and the call to action all serve the same buying motion. That coherence is the real lesson. Stripe pairs a product claim with recognizable customer logos because its buyers need instant legitimacy. Basecamp pairs a long sales letter with one repeated signup action because its buyers need convincing, not browsing. McKinsey leads with research because its buyers are not going to click a button worth millions, they need to be impressed slowly. HubSpot leads with a free entry point because a small first yes suits its volume model. Pick the pattern that matches how your buyers actually decide, then execute it without mixing in pieces of the other three. Mixed hero strategies read as indecision.

Section 3

Attention stays near the top, design accordingly

Nielsen Norman Group's eyetracking research on scrolling found that roughly three-quarters of users' viewing time is spent in the first two screenfuls of a page, with attention dropping sharply after the fold. That has a hard implication for homepage architecture: whatever lives in the first two screenfuls does most of your persuading, and whatever lives below is seen by a committed minority. The best sites respect this. Stripe places its claim, its proof, and its primary action before any scroll. Basecamp's long page works because every screenful is self-sufficient, a skimmer who stops anywhere still gets a complete argument. The common service-business mistake is inverting the pyramid: a vague hero up top, with the genuinely persuasive material, results, names, numbers, buried at section six. Audit your own homepage by screenful. If screenful one could not close a deal alone, rebuild it first. A useful companion to this piece is [Design Strategy for Service Businesses: How Your Website Becomes Your Best Salesperson](/blog/design-strategy-for-service-businesses).

Section 4

One action, fast, the unglamorous wins

Two final patterns are invisible in screenshots but decisive in analytics. First, a single primary call to action. Every additional competing button splits intent and muddies measurement; the best homepages make one action visually dominant and repeat it, exactly as Basecamp does. Second, speed. In a documented 2021 A/B test published on web.dev, Vodafone improved Largest Contentful Paint by 31% and recorded 8% more sales and a 15% better lead-to-visit rate, on the same design, just faster. Speed is a conversion variable, not an engineering nicety. This is the standard ConvertOS, the web-design module of LeverageOS, holds a homepage to: one message, one action, measurable speed, and proof above the fold. If you cannot say which single action your homepage is engineered to produce, that is the first conversation worth having on a strategy call. If you are turning this into practice, [The Marketing-to-Sales Handoff: Where Service Businesses Lose Their Best Leads](/blog/marketing-to-sales-handoff) maps the adjacent system.

FAQ

Direct answers for operators.

How do I write a homepage headline that converts?

Name the buyer, the outcome, and the mechanism in plain language, then stop. A useful template: 'We help X achieve Y through Z.' Test it with the five-second rule: show the page to a stranger for five seconds and ask what the company does. If they answer with adjectives instead of a service and an audience, rewrite. Cleverness can come back later; clarity cannot be retrofitted.

Should my homepage use a carousel or background video?

Almost never. Carousels rotate your message out of view, and Nielsen Norman Group's attention research shows most viewing time concentrates in the first two screenfuls, you cannot afford to gamble that real estate on slide three. Background video adds load weight, and documented web.dev case studies tie slower pages to fewer leads and sales. A static, specific hero with real proof outperforms motion in nearly every service context.

How many calls to action should a homepage have?

One primary action, repeated down the page, plus at most one quiet secondary path for people who are not ready. Basecamp is the cleanest public example: a single signup action everywhere, nothing competing. For a service business the primary action is usually booking a call. When everything on the page funnels toward that one step, both conversion and measurement improve immediately.

Joshua Agonya Pi'Rwot

Written by

Joshua Agonya Pi'Rwot

Founder, Business Growth Accelerator · Country Director, AVODA Group Uganda · EMBA

Joshua helps service-business operators turn scattered marketing into a clear path from first attention to booked call. He is Founder of Business Growth Accelerator and Country Director of AVODA Group Uganda.