What’s in a good pre-launch/landing page? Well, we can definitely say that a landing page should catch a user’s attention and incite them to take some course of action that benefits your cause. Whether this be subscribing to a newsletter or signing up for your website, these pages need to be the Money Beets of your website.

In designing Weeve’s landing page, I had to consider many things:

Who’s our target audience?

What is it that we do exactly? (this might seem obvious, but I’ll speak more to it later)

What are we trying to get users to sing up for?

Do we use words? Pictures? Videos?

Damn, it has to look good too.

If these questions are not answered properly, having a landing page will actually hurt your website more than not having one at all.

What not to do

Look at Iranqseo Web Marketing and die a little inside. They are a Web Marketing website, isn’t that ironic? A site that claims to market you (or your business) on the internet, yet they are not short of looking like a they need a bit of internet marketing.

Some blatant woes include

Who is the audience? Is it just any person who wants to market themselves? Or is it businesses? Or both?

The video is way too long and doesn’t offer real information.

I can see what they do, but why did they name it “Clean Version” and “Dirty Version”? Why would I want something Dirty? Wait, is this actually a porn website?

It isn’t very aesthetically pleasing :<

Now obviously this is an extreme example and not every landing page looks like this, but the point is that a well thought out landing page can go a long way.

What to do

Let’s look at a good landing page. I’m going to use an example that probably everyone knows: Groupon.

When we first go to groupon, we are met with

First off, it’s clean and it looks good. Those drinks on the left sure make me thirsty, I wonder if this site has something to do with those drinks? Right away I get a feeling of social, with some sort of vacation-ish feel. I mean, the name itself kind of tells me that. Groupon? Group-on? Get your group on? I don’t know, but it sounds social.

What’s also cool is that there’s a giant “1” in a green circle, which means that this is the first step in a series of steps. People like being guided and fed with a baby spoon instead of finding out content themselves. And at this point, if users are wondering what exactly Groupon does (if they didn’t already know from the massive amount of facebook posts), they can click on the How It Works link up top.

And now you’re asking, “but the link not IN MY FACE!”. And my answer is, “It doesn’t have to be, and it actually kind of is”. It’s the only visible link inside the toolbar, which is a black color, which means it stands out the most, which means your eyes will be drawn to it at some point or another. Whew.

Once you choose your Location, you are brought to Step 2, which a cool animation.

The same looking form, this time asking for your email. By this point, you should be convinced enough to fill in that field, which then brings you to all the Groupon goodies.

Let’s talk about how brilliant the How It Works page is.

Simple 3 step process

At the top of the page, there’s a 3 step process that is simple, catchy, and informative. You feel a little vulnerable after reading it because you feel like there’s no reason not to sign up. The steps are large, at the top of the page, and exactly the first thing Groupon wants you to see when you land on that page. You can then notice that they put their logo (the green G) in a few places, mainly inside the picture right under. Awesome! They plant these little seeds inside of you while not being too intrusive.

Recent Deals and setting expectation

As if you are not convinced enough, they give you a rotating square of recent deals that you might want. This nails the “what exactly is it that we do?” point right on. You get to see these deals explicitly as an example, and what’s brilliant is that the rotating box actually closely resembles what you will see when you browse through deals after you’ve signed up. It’s a way to create recognition. Sometimes you get websites that have great landing pages, but once you navigate further, you feel let down because it wasn’t what you expected. However, Groupon sets up this expectation for you at the landing pages and allows you to recognize the same content later and go, “hey! I remember seeing this at the landing page!”. Maybe not so enthusiastically.

Credibility

Lastly, there’s some credibility on the right of this page. It always helps to have the biggest freaking news groups to feature your company, and it always gives those moms and grandmoms a better feeling to see that a trusted source has verified this website.

That’s Groupon for ya.

Bring it on back

Let’s bring it back to Weeve now and take a few moments to prod at what I’ve tried to do.

First, I answered some of my own questions:

Who’s our target audience? People who like to donate to community projects. Age group is 20-60.

What is it that we do exactly? Community Projects, people donate, become a social philanthropist through crowd funding.

What are we trying to get users to sing up for? For a pre-launch page, just for people to subscribe to a newsletter and get beta invites

Do we use words? Pictures? Videos? Words seem fine.

Damn, it has to look good too. Okay, I’ll try :<

Of course I could go into much more detail in answering these questions, but that would take a long time, and it’s better to try doing something first and getting feedback and making it better. I knew I wanted something simple, and I liked the 1,2,3 process that told people what it is that we did. But it also felt like just having those 3 points wasn’t enough, so maybe I could add a sentence or two to sum up what we did. It was only a pre-launch page, so I didn’t need to go into all the details about our features, as we hadn’t even finalized on them yet. We chose blue as the main color for Weeve because it represents social, which is a big player in Weeve. However, other colours like green and orange bring out “donation” and “funding”.

So as a first few attempts, I came up with

Three different flavours of the same thing. You’ll notice that just by changing the colours, you get drastically different feelings for each one. The very first one gives a more energetic feel and definitely pushes for a social environment. The second is more subtle, and feels like it’s politely asking you to subscribe with an English accent. The last one tries to bring out the empathetic emotion within you and puts you in a spot where you are compelled to subscribe.

What I feel I did right was that I clearly told the audience what Weeve was in a 3 step process along with a sentence. There was only 1 action, so users knew that it was a site for them to subscribe to our invite list. What I didn’t do was think about who I was targeting. But with a very simple and minimalistic look, a wide audience will be acceptable to your design, so I was lucky. However, I felt like the blue and pink flavours were too extreme in that they tried to pull too much emotions out of visitors. Also, I didn’t want to set any expectations that I couldn’t meet later.

I felt like that middle one was in the right direction in terms of feel. I played around a bit and came up with

Cool, I liked that one. It had a more modern feel to it and stayed quite neutral. I also shortened the sentence below and added a catch phrase. You’ll also notice that the third point changed from “Earn Rewards” from the previous mock-ups to “Social Philanthropist” (spelt wrong too). This is another case of “what exactly is it that we do”. If we had launched the page with “Earn Rewards” we would’ve been setting the wrong expectations!

There still is a problem with this design though. It gave an end-all-be-all feel. Because it was a pre-launch page, I should be able to take this design and eventually morph it into a landing page once the application goes into beta. I wouldn’t be able to do that with this design. The way the text is laid out, it would look awkward if it placed it near the top extra content underneath it. Users who saw the pre-launch page should see a future landing page that has a similar layout and feel as the pre-launch page so they feel like they are getting what they are expecting.

So I made this, which is what you see at the pre-launch page right now.

It stays relatively neutral with the gray background, but I added more blue to it to push the social factor just a bit. Vertically, it might not balance out, but it’s very natural for the eyes to start at the top of the page and make its way downward. The main reason I went with this is because I can now use this pre-launch page and create a landing page that looks similar or has a similar feel. For example

This way, I stay true to my audience’s expectations and create a consistency throughout developing Weeve as a product and brand.