Happy Dance! We’re launching Dishcrawl in the next few days and I get to do one of my favorite things~ redesigning our landing page!
Here’s what we currently look like (above the blue line= above the fold):
CURRENT AFFAIR OF THE LANDING PAGE
Pretty simple and boring, eh?
Here are the three landing pages I’m basing the redesign on. The observations made on these landing pages are my own.
The first is Performable. Performable is all about landing pages so you’ve got to think they’ve spent some time on their own. The second is 37 Signals. I hear they’ve done a lot of work on optimizing their front page. The third is Wufoo, another landing page that has been optimized for conversion. Again, everything above the blue line is considered above the fold on my browser.
Comparing these landing pages side by side is pretty awesome. You see a lot of similarities. Here are the few I notice. Can you find more?
SIMILARITIES IN LANDING PAGE DESIGN
- Value proposition is about a sentence and placed on the top left hand corner.
- All have logo on top left quadrant.
- Top right hand corner explains the product in further detail via screen shot or product breakdown.
- Further information about the product below the fold. I like that.
- Big clicky clicky “call to action” buttons
DIFFERENCES IN LANDING PAGE DESIGN
The differences are small, but noted nonetheless.
Performable
- 3 ”click me” links. One under the value prop on the top left, and another one below the fold that says “get started now”. Both link to the same page of signup. The third being the image of a landing page on the top right. Clicking expands the image to show you how a landing page is edited in Performable.
- Below the fold, Performable uses the space to show the viewer what other exciting reasons there are to use the product.
37 Signals
- 37 Signals has a couple products. Each product listed on the top right. Each product links directly to another landing page (shown below), where you can see the same principles of similarity as mentioned above repeated.
- Below the fold, 37 Signals uses the space to establish credibility to their customers. Kind of a “we are awesome because these people use our product and this is why”.
Below is an example of another 37 Signals landing page for their product, Basecamp. You can see it has similar qualities to the first three pages we just reviewed.
Wufoo
- Wufoo has two main calls to action. The first is the “sign up for free”, and the second is the “tour”.
- The links below assume that the person on the page is looking for more of a reason to signup. There are two “why us, see how awesome we are” links, one “gallery” link that gets you started creating right away, and one “sign up and get x free!” link that brings you to pricing and purchase.
The similarities in the differences: Each company is basing the content on the landing pages on what a person they assume will be viewing the page will want to see.
- Performable assumes persons looking at this landing page are decision makers with ability to spend budget. They focus on the primary reasons to use the product as a single user and how it can help benefit their business.
- 37 Signals’ landing page assumes this is either someone who needs to get buy-in for purchase from an executive, or an executive trying to manage a business. Therefore the content on the landing page screams “all the big players or interesting folk are using it.”
- Wufoo has a much more playful appeal. It wants you to have fun doing something boring- like creating a survey.
THE WILD CARD
I decided to look at a fourth site. OkCupid! Totally random. 
OkCupid is interesting. They want you to sign up and have you get started right away. Nice how they make the site more personal with a female “welcoming” you into her lair of dating. As you’ll notice, the left bar is all about signing in and giving you little sound bytes on why OkCupid is the best dating site to use. I love the headline. The first thing I saw when I came to this page was the headline, “Join the best dating site on Earth”. Hells yes I want to be a part of that!
The difference between OkCupid and these other landing pages is the decreased emphasis on “what” the product was. They assume the viewers are here because they want to be here. They only want you to get started with that matchmaking! Nothing else. Similar concept as the rest of the pages- below the fold: they remind you on the bottom left corner “Join now”.
HOW CAN WE APPLY THESE DESIGN PRINCIPLES TO OUR LANDING PAGE?
Before and after…
IMPROVEMENTS TO OUR LANDING PAGE
- Followed the model of logo on the top left. Purely for entertainment purposes
- Added a strong value proposition on the top left quadrant of the page
- Maximized the space below the fold by adding reasons people should use the site
- A below the fold clicky clicky to get people into the site
- Added a big call to action button
- The dark brown color in the middle of the page should flow all the way down rather than being a box… makes the site seem like flowing chocolate
- I divided the page into four quadrants- they are so prominent on Performable, 37 Signals, and Wufoo
- Defined dishcrawl
- Added more images and depth to the previously flat page
- Added the “sign in” or “get started” links on the top right
I’m happy with the results. By looking at the different landing pages, the improved one definitely seems more lively and full of energy. Hopefully this will increase the clarity of the product to viewers as well as increase our conversion rates on the site.
*****UPDATE 6.25.10******
So here is the landing page we actually rolled out… you’ll see I didn’t use the bevel on the pictures, and we changed the buttons not to look so horrible, changed the logo to to have less shadow, and changed the color of the background to be a little deeper brown. After looking at our front page on different screens, I realize that my laptop screen is teensy! On many larger screens, the view below is the view you see. That kind of messes with designing with creating content “above the fold”, and is something to take into consideration, however this page, whether displayed in full or not, still looks awesome and gets the point across in a simple fashion.
compared to
Voila! Hope my experience helps yours.
~LadyLeet