What to put on your homepage

Navalha’s old homepage had eleven sections, a hand-coded carousel and a headline about reinventing the barbershop. Its analytics told a shorter story: 68% of visitors never scrolled past the first screen, and the demo button sat in section nine.

When we rebuilt the site in Framer this year, we didn’t start with sections at all. We started with the questions a shop owner asks in the first minute, because a homepage that answers those, in order, needs far fewer parts.

Four questions, in order

Visitors arrive from an ad, a search or a colleague’s link, and they all ask the same things. The order matters more than the design.

What is it?

Say what the product does in plain words on the first screen, with a real picture of it. Navalha’s now reads “the booking app barbershops run their day on”, over a screenshot of the counter at 9am.

Is it for me?

Name the people it’s for, so the right ones lean in and the wrong ones leave early. Navalha shows a one-chair shop and a ten-chair shop side by side, because its 140 barbershops run from one to the other.

Can I trust it?

Proof is the section most homepages overfill. We keep three kinds:

• A real screen from the product, never an illustration.

• A number customers produced, with the unit spelled out.

• One quote with a full name, a role and a company.

A note on logo rows

A row of customer logos only helps when visitors know the names. Twelve barbershops nobody has heard of read as filler, so Navalha’s logo row became one line: 140 barbershops.

What do I do next?

Give one action, with the same label everywhere it appears. Navalha’s is “Book a 20-minute demo”, in the nav, after the proof and at the foot of the page.

What made the cut

The finished homepage has four sections and a footer, built from the same forty components as the rest of the site:

Everything else moved to its own page: pricing, integrations, the changelog and the careers list. People who want those still find them through the nav and through search.

Answer first, design second

The handover took two hours. A week later, Navalha’s marketing team was building its own launch pages from three page templates, and the homepage stopped being an engineering ticket.

You can run the same check on your own site today. Write the four questions on a sticky note, scroll your homepage and mark which section answers each one.

Anything that answers none of them can move to another page, and anything missing is next week’s work. If you’d like us to do the marking with you, start a project and we’ll begin with your first screen.