Web Design

How to design an effective startup website in 6 steps

The complete guide on how to design startup websites that achieve business goals.

STUDIO

Running a startup is hard: I’m sure as a new or experienced entrepreneur you will be all too familiar with those statistics about failing rates of new businesses worldwide. Luckily those statistics don’t stop really passionate and driven people to give their best in at the very least trying.

Only stopping at ideas and imaginary business models won’t get you anywhere though. Creating a website is the first step to putting that idea in front of the people who will hopefully become your first customers.

“It’s not about ideas. It’s about making ideas happen.” - Scott Belsky, Behance Co-founder

Your startup’s website is the very first impression you will give to perspective customers: with very little history and brand image, you only have a couple of seconds to grab the user attention , leave them wanting to know more and possibly taking a valuable action on that same visit (be it signing up, giving away their e-mail address and so on).

This guide summarizes the key points to keep in mind when designing a startup website to achieve your business goals.

Also, If you need more information on how to actually create the website, make sure to check out the complete guide on how to create a website from scratch.

1. Brainstorm, brainstorm, brainstorm

Before even thinking about the looks of your new website, you need to take some time to think about:

  • Who are your target customers?
  • What is the thing you want your target customer to do after visiting your website?
  • In order for them to do it, what should they know?

It may sound very abstract, but if you don’t have this clear in your head, you might jump head straight into showing off in detail all of your product features, while the only thing your target customers needs to know is whether what you offer solves one of their most pressing problems.

Deciding on these 3 things will make it easier to:

  1. Choose a CTA that links to your business goals
  2. Decide on the key information you want to share
  3. Understand the appropriate communication and language style to adopt

2. Highlight your unique value proposition

A unique value proposition is the reason why your target customers should buy from you. It consists of how your product solves one of the problems experienced by the target customer, as well as what makes you different from the competition.

Express clearly and concisely in the language of your target audience what your value proposition is on the header banner, to make sure it is the first thing that visitors see when entering the website.

As this message will ultimately influence users in deciding whether to scroll down the page to know more, it is by far the most meaningful element of your website so make sure to give this one a lot of thought!

For SaaS & tech companies alike, the product itself may not look or sound so “sexy”. So, rather than describing it in a direct and plain manner many startups tend to split their message into two parts:

  1. Visionary Headline
  2. What the product actually is/does

Take a look at the following header message examples for some inspiration.

Inokyo

Inokyo Homepage

Mixpanel

Mixpanel Homepage.

Gusto

Gusto-startup-website Gusto landing page: The animation and header message clearly shows the “pain point” that the software wants to ease.

Just be careful not to get too abstract and visionary, especially when no one knows your company! Too often startups take big established company such as Apple as reference, forgetting that known brands have the luxury to be as vague as they like as their product doesn’t need an explaination.

Slack

slack-startup-website Slack homepage is simple and clear, yet this approach might not have worked if Slack wasn’t such a popular work messaging app. Showing a preview of the app might have been a better option if Slack had just launched.

3. Show, don’t just tell

Describing with words doesn’t necessarily work for every product or service. Especially when it comes to revolutionary products or ideas, showing rather than telling can make a big difference between making the reader confused and bored or excited to know more.

For SaaS and apps, including a demo preview of your product in action is a quick and effective way to ensure the user understands what the product does in practice.

Zenefits

zenefits-website Zenefits includes a demo of their HR software right on the header banner.

On the contrary, when it comes to services that are well known to the masses, there is no need for superfluous words nor explanatory diagrams.

For example, groceries or food delivery services. No need to explain what it is about right? The priority is let the user know a couple of benefits of using their service over a competitor’s.

Instacart

Instacart concentrates on communicating two of the benefits of choosing their service over similar alternatives: fast delivery and free two weeks trial.

Instacart Homepage

Doordash

On the other hand, DoorDash doesn’t splurge on words and instead, chooses beautiful images of different targets of customers that their website visitors could easily relate to.

Door Dash Homepage

4. Choose the right CTA & emphasize it

As the website’s goal is to make target customers take a valuable action for your business, the call to action should be well visible at first sight and should be repeated several times in strategic points throughout the page.

To make it stand out, choose high contrast colors that naturally attract your eye against a more neutral background.

Credit karma

Credit-karma-website Credit Karma CTA button stands out on the white background and is in line with the color palette.

With time, you could also test different colors, text and positioning to figure out which combination leads to higher conversion rates. A CTA that spells “enter email address” might be much less effective than “send me a free ebook every month”!

You can carry out this kind of tests independently or by using one of the many conversion optimization tools available, such as Optimizely or VWO.

Yieldify

yieldify-website Yieldify offers a free consultation rather than asking for contact details.

5. Include Social Proof & Testimonials

Check the website of ANY successful and you will find a “featured on” section naming popular publications such as Tech crunch and Wall Street Journal, or usually at a later stage brand names and customer testimonials. This is not by chance: it is because social proof is one of the many fascinating ways in which human beings take decisions (without realizing).

“We will use the actions of others to decide on proper behavior for ourselves, especially when we view those others as similar to ourselves.” - Robert Cialdini, Influence: The Psychology of Persuasion

This has obvious applications for any business: as we all assume that what many other people do is correct, even when deciding whether a product is worth our money or not, seeing that hundreds other people think it is actually gives us that little extra nudge needed to take action.

mixpanel-website Testimonials on Mixpanel Homepage

segment-startup-website Social proof on Segment website.

What’s more, we also tend to be even more influenceable if that specific group of people is similar to us. That’s why making sure your testimonials & credentials include explicitly the type of people, or company, that you are trying to target can yield even greater results.

segment-startup-website2 The principles of social proof and similarity applied to Segment’s homepage.

6. Minimalism & White space

“Minimalism in web design means simplifying the interface by removing unnecessary elements.”- Muzli

There are many benefits to adopting a minimalistic approach and using white space for your startup landing page. Firstly, ensures that your page is not cluttered so that your user knows exactly where to look at. Secondly, it allows you to draw the attention on your main value proposition and CTA at all times.

Here is an example of a minimalistic yet effective startup landing page that makes use of white space: one look at it and you will know what Tetra is about.

Tetra

tetra-startup-website

Dropbox Paper

dropbox-startup-website Another great example of minimalistic page that also makes use of video demonstration and has very visible and actionable CTA.

Summary: Most important things to remember

  • Easy to understand main value proposition - through text, image, and/or video
  • Highly visible and actionable CTA
  • Simple design and a lot of white space to focus on the important things
  • Provide social proof, possibly from groups of people similar to your target customer