Designing a good homepage is like writing a good essay.

Ana Mason
Ana Mason
Aug 21, 2017 · 7 min read

This article is focused specifically on creating a business to business (B2B) homepage, since that’s where my most recent experience and insights lay.

While working on a B2B homepage redesign, I had the recent insight “Good websites follow the structure of a good essay.”

For a refresher, here’s a brief outline of how to write a Classic Argumentative Essay:

  1. Introduction (Ideally, this should be interesting.)
  2. Thesis statement
  3. Support your thesis through evidence
  4. Anticipate objections
  5. Conclude in a satisfying and effective way.

Source: http://www.austincc.edu/buck/eng/1301/pubtexts/Argument.htm

A lot of the B2B websites follow a similar structure.

  1. Introduction (Main Headline). Declare your service and what’s good about it. This should make visitors want it or stick around to learn more. Also, there’s logical imagery and/or video to keep people around and engaged.
  2. Thesis (Explanation). Next, there’s an explanation of the introduction since the headline tends to be short and not have enough space for storytelling. This is through text, video, images, or a combination of the three.
  3. Support evidence (Product selling). Of course you need to convince visitors why your product is great. You do this via: testimonials, quotes, customer logos, or video walkthroughs of the awesome product. Support evidence typically takes up more room than the other sections.
  4. Anticipating objections (Social proof and more product selling). Sometimes, especially if the product has a lot of direct competitors, you’ll need to anticipate objections. Potential users may be wary of testing out new tools in their business, so as a B2B product you need to allay fears. Some ways to dispel doubt are comparative charts, videos, FAQs, demonstrations (in-person or online), and trial accounts.
  5. Conclusion (Call to actions). The visitor should be convinced at this point to sign up or contact you for a demo.

This framework is used in a lot of the big B2B tech home pages. I’ll show the structure using a few examples from my own research: Dropbox, Asana, Gusto, and Notion.

Screenshots were taken on August 17, 2017. So the site design may be different if you visit any of the home pages yourself.

1. Introduce the product.

  • Dropbox Business: “Work better, safer, together.”
  • Asana: “Move work forward”
  • Gusto: “The best payroll for small business.”
  • Notion: “A unified & collaborative workspace for your notes, wikis, and tasks.”

The approaches vary depending on sector, business size, and the product. Dropbox Business invokes efficiency, safety and colloboration. Asana is much more aspirational, which makes sense with their company brand and product. Gusto is simply stating they are the best option for small businesses. Notion has an explanatory headline, since their product may be a new concept to visitors. All of these introductions are: declarations, short (ish), and peak interest.

Dropbox Business and Gusto main headlines
Asana and Notion main headlines

2. Explain why.

For most products a headline won’t be enough to convince someone to buy or try, so you’ll need to explain more. The thesis offers the chance to do storytelling and product positioning. These statements are typically paired with the main headline. (For Dropbox, Asana, and Gusto, refer to the images above.)

  • Dropbox Business: “Dropbox Business simplifies your work, with a central place to access and share files.”
  • Asana: “Asana is the easiest way for teams to track their work — and get results.”
  • Gusto: “$39 + $6 per person per month. Refreshingly easy. Friendly support. Integrated benefits and HR.”
  • Notion: “With so many tools, it’s hard to keep everyone on the same page. Notion is a new tool that unifies them all. Combined with Slack, it’s all you need to run a team.”
Notion takes things a step further. 1) Declare the problem, which is too many tools. 2) Offer a solution, which is their product.

3. Support your declarations.

Time to bring out the shiny assets! You want to convince someone to test or buy what you’re selling, so you need to take a multimedia approach.

  • For Dropbox Business they start with their pricing table, which smartly, lists all the capabilities per tier. So not only do you get informed of the monthly or yearly cost, but you understand what is available to you. Two birds, one table.
  • Asana begins with a section that declares the overall power of Asana. There’s a button (Learn more) which links to another page with robust break down of the products features.
  • Gusto leads with survey stats on the products use with current users. There’s also a small link to launch a demo. This triggers a very powerful test account experience in which you can explore the capabilities of Gusto. (It took numerous visits to the site for me to actually click this and play with it. I wonder why this doesn’t have more prominence in the page… 🤔)
  • Notion starts with portrait illustrations of the kind of users that would probably use their tool (Programmer, Product Manager, Designer). Then there are screenshots of the product that tie to each of these use cases (Task Board = Programmer, Team Home = Product Manager, Design Specs = Designer).

Of course, there’s more evidence, which I’ll cover next.

Dropbox Business and Asana evidence
=Gusto and Notion evidence

4. Anticipate objections.

To counter any questions or hesitancies visitors may have, you want to show off the product more, supply other kinds of evidence, and answer questions.

Showing off the product.

You want to convey the full capability of your product. This typically involves video, gifs, live demos, images, and text. Basically, creatively show off your product in the best way possible.

Dropbox elegantly demonstrates their product through a slideshow.
Asana uses smooth animation in a video. Gusto has this great demo experience, which is oddly hidden and not really promoted.
Notion shows off their product through video, text, and illustration.

Supplying more evidence.

Flaunt the good things other people (customers) have to say. This can be done via testimonials, a splash of logos from recognizable customers, case studies, positive press, etc.

Dropbox and Asana use the logos from their recognizable customers to let you know you’ll be in good company.
Gusto uses a quote and positive press. Notion utilizes customers Tweets.

Answering questions.

Dropbox Business has a whole section dedicated to answering common questions.

Dropbox tries to anticipate any questions you may have.

5. Recap and conclusion.

Finally, you succinctly restate your thesis and provide a way for people to use your product. Most B2B products have a free version for you to kick the tires (when appropriate or possible).

Of course, some products can’t or won’t offer a free/basic version to let you perform research. Reasons vary, but the solution is typically the same: Talk to us. This usually translates to “Request a demo” or “Contact us.”

Dropbox and Asana’s final calls to action.
Gusto and Notion’s final calls to action.

A lot of these principles can translate to a B2C homepage design, with the biggest difference being you typically want to trigger as many sign-ups as possible. To do that, you’d probably have less qualifying content and more content geared towards convincing a person to create an account. But the principles are the same, convincing a person to take the next step in your customer journey.


TL;DR

Good home pages make convincing arguments for buying a product. You can create a good homepage using an outline for a successful essay.

  1. Main headline. Declare your service and what’s good about it. Keep it short, interesting, and truthful.
  2. Explanation. Explain your main headline succinctly. This is where you provide context for the visitor to understand why your product is great.
  3. Sell. Back up your declarations with evidence. You’ll probably use: images, illustrations, video, gifs, and text.
  4. Drop names and sell more. Keep selling and bring in external validation to make a convincing case. You’ll probably use: customer quotes, recognizable brand logos, positive press, slideshows, demonstrations, and any other creative way to show off.
  5. Conclusion (Call to actions). Wrap up your story in a short and memorable way. Most of all, provide a way for people to proceed, either by contacting you or creating an account.

I hope this was helpful. Please leave comments regarding your own observations when it comes to crafting a good homepage (B2B or B2C).

Thanks!

Writing Ourselves

A publication exploring the ways people document and tell their stories.

Thanks to Ben Yee.

Ana Mason

Written by

Ana Mason

Product Designer. Loves tools that help tell stories. Doodles, bikes, reads. http://www.anamason.com

Writing Ourselves

A publication exploring the ways people document and tell their stories.