Designing a Web App Homepage: Examples, Tips and Peeves

by on 20th April 2011 with 5 Comments

The web is completely over-saturated with apps that help you connect with a social network, make grocery lists, manage large projects, decide who will make tea and every other crazy task you can imagine.

With all of this competition, how can you possibly convince visitors that your app is a the proverbial needle among the hay? Today we’ll look at some real examples to see if we can learn which strategies to mimic and which to avoid.

Your App’s Homepage is Extremely Important

You’ve spent tons of time, money and effort creating a web application. It’s a top-notch venture that you’re sure will catch on like wildfire. There’s just one catch, you have to convince people to give it a try.

No matter how good your web app is, you’ve still got to have solid sales tactics that ultimately convince people to click the “sign up” button. Even if the service is completely free and offers a ton of features, you’ve really got to work to win those conversions.

Never assume that just because a user has landed on your homepage that they are genuinely interested in what you have to offer and therefore need only a slight nudge to go further. Odds are, they followed some link with only a vague notion of where they would end up and are in a delicate stage in which they are likely to move onto another site in a matter of seconds if you don’t pull them in.

Your web app homepage is one of your most valuable marketing tools. Resist the urge to just cobble something together quickly and instead put forth your very best effort. Let’s look at some examples to see what we can learn.

Tip: Keep the Design Simple and the Message Strong

Our first example comes from a new service called Kroud. Let’s take a look at the portion of the site above the fold.

screenshot

There’s a lot that I like about this page. First of all, it’s very simple and focused. It doesn’t overwhelm you with empty claims about how the service will change your life, nor does it beat around the bush about what the site is. There’s nothing worse than a page that doesn’t define itself well. If I can’t tell what your app does in five seconds, I’m moving on.

Kroud really nails the task of relating a complex service into a clear message that also serves as a strong call to action: “Create an interactive FAQ page in seconds.” That line is one of the first things I see when I load the page and it immediately conveys exactly what the site does.

The Big Button

Another thing we can learn from Kroud is that big, bold sign up buttons are a good thing! Here’s the Kroud button at actual size.

screenshot

This button is huge and very clear about what happens when you press it: “Start a Kroud”, with the secondary message, “It’s free!”. Notice how this button draws your attention with not only size, but color as well. It’s so much brighter than the other content that your eyes are immediately drawn to it.

Tip: Screenshots are a Must!

Your web app homepage has two primary goals: to educate people about your product and convince them to try it. These are the same goals you see in marketing and advertising from almost every company on the planet.

Imagine a magazine ad or a website for a new Corvette. What do you think that page would look like? There are a million possible designs but one thing would likely stay constant: you’d see the car. Corvettes have a legacy of good design and they know that the best way to show off their latest feat is to show you a photograph of it in all its glory. Who could be convinced to buy a sports car without even seeing it? This would be even more the case if the sports car was not a Corvette but instead something that no one had ever heard of.

This works as a metaphor for your web app home page. Web apps are a dime a dozen and no one has ever heard of yours. Unless you’re ashamed of your poor design skills, people will want to see exactly what the service is going to look like before they take the time to sign up.

The folks at Freckle know this well and chose to top their page with an array of five screenshots.

screenshot

Even though large portions of some of these are covered, the image as a whole really gives you a decent glimpse of what the service looks like.

Features as Screenshots

The current trend in web app home page design is to show off the features on your homepage with little icons. This is a great idea that really increases the aesthetic value of the page and helps break up large blocks of copy. Here’s an example from Ballpark Invoicing.

screenshot

Though icons are better than text, in the case where you really have a solid interface, I actually think screenshots can be a much stronger visual element. Screenshots directly communicate your service while generic icons merely present an abstract representation of what users can expect to see. Check out how Freckle discusses their features.

screenshot

See how the messaging here is reinforced by an image of exactly what this will look like in the app? This is a trend that I’m seeing more and more lately and I think it’s a good one that genuinely improves upon the icon idea of the previous generation of web apps.

As another example, TodayPulse shows three of their primary features in a horizontal strip of screenshots:

screenshot

Peeve: No Screenshots

You may think that screenshots are pretty basic and that no one needs this reminder, but the truth is there are countless web app home pages that don’t give you the slightest hint of what the app actually looks like.

Even if these pages are fairly attractive, like Wordfaire below, the odds of me trying it are much less simply because I can’t see a preview.

screenshot

The old adage “a picture is worth a thousand words” really proves true in this arena. There’s simply no way I’m going to read the seven paragraphs of text on the Wordfaire home page. I’d trade at least five of them for a screenshot without a second thought.

Tip: Let Users Play with a Live Example

The concept of “try before you buy” has existed since the dawn of the salesman. It’s a simple concept that will persist for as long as there are products. Commitments suck, especially when there is uncertainty involved. By letting a user try your web app first, the uncertainty is taken away.

It’s extremely important to keep in mind that the “try before you buy” even applies to free services! This seems confusing but it’s really quite simple. Even a free service eats up my time, a resource which I find quite valuable and won’t trade for just anything. Signing up for a free web service still feels like a commitment; one that I don’t want to make unless I’m really sure I will like the product.

The concept is simple, create a way that users can poke around and kick the tires of your app without inputting a single bit of information. We see this in action below for Pen.io. This is another page without screenshots but is made a bit better by the inclusion of a link to an example so you can see what you get from the service.

screenshot

Again, it’s great that Pen.io includes this, but the execution is stronger back on Kroud where the link to the exampe page is reinforced by a preview.

screenshot

Peeve: Lengthy Tours

Some web apps will take you on a ten minute excursion that explains their service in great detail. Don’t get me wrong, information is good and if I’m paying for a service, I’m going to want it. But should a “product tour” really be so work-intensive?

screenshot

If I click a link that says “Take a tour”, what I really want to do is see the app. A live example like we just discussed in much stronger than 2,000 words explaining what it will be like when you finally reach the point where you are allowed to actually try it out. Some sites even build a modified “smart” live example that walks you through the process. This is a great way to let users try out your service while really ensuring that they get the point and see what you want them to.

Again, it’s not necessarily bad to rant about your features, but remember that it’s important to allow users to just jump in and see what they think.

Include a Video

Another idea for showing off your web app in action is to include a short video right on the homepage. If a picture is worth a thousand words, then one minute at 15-30 frames per second is priceless! A video accomplishes the same goal as the example and screenshots, only it’s more dynamic than screenshots and a more structured experience than a free-form testing ground.

Aviary does a good job of this by showing off a time-lapse of their image editor creating a complex photo manipulation.

screenshot

One of my current favorite implementations of a web app home page video is Greplin. Here a video pops up when you load the page, but if you don’t start the video after a few seconds, it turns into a slideshow of screenshots.

screenshot

Peeve: Cartoons that Never Show the App

For some reason, the cool thing to do right now is throw together one of these videos as a fun little cartoon. This is often a great idea but the problem that I have is that after two minutes of some boring little animation I still have little to no idea what the app is actually like!

The two videos below from Minus and Summify are good examples of this. Granted, they eventually get around to almost showing you an illustrated version of the app, but only at the very end and even then, it’s a small, abstract peek.

screenshot
screenshot

Closing Thoughts: A Recipe for Success

All of the advice in this article is aimed at the two primary goals for your web app home page, which we’ve already discussed: education and enticement. First, strip all the clutter out of your design and whittle it down to the most important elements so that visitor can focus on the vital information without distractions.

In your messaging, make a bold statement about what the app does and who it’s for. We didn’t discuss that latter point much today but there’s a strong argument that suggests that you’ll win more conversions by clearly identifying your target audience. Example: “MyCoolWebApp helps designers and developers organize client and project information” is better than “MyCoolWebApp organizes client and project information”. Also be sure to point out any important features and why visitors should use the app.

Once you’ve got your messaging squared away, it’s time to focus on presenting your product to your audience. Three great ways to do this are screenshots (several if you can swing it), live example accounts and video tours (the kind that actually show the product). The goal hers is to reduce the amount of uncertainty surrounding your product. The less uncertainty there is, the less users will be hesitant to sign up.

This all of course assumes that you have a quality product. If your interface is lame, then by all means, hide it from the public and stick to boring, lengthy descriptions instead!

Comments & Discussion

5 Comments

Comments & Discussion

5 Comments

  1. Kayla Knight says:

    All great tips here. We’re in the process of redesigning our own website (it’s app-like), and as of right now we don’t have an introductory homepage, but it’s something we’re going to implement in the redesign. This is a great overview and guide that’s needed for the core features…for this project and of course any future projects I’ll have as well :)

  2. Shane says:

    Great article, I’m I’m a position where I’m designing a web app and this has provided some great insight. Thanks ;)

  3. Jatin says:

    I really liked you point about keeping it simple (you should have give sub-title as KISS: Keep it simple, studip). Nice article, definitely worth reading & sharing.

  4. Really a great article. Simplicity really could be the best way to do it.

  5. Abd Al-Ala says:

    very useful and interesting, am about start to design an app home page user interface.Cheers

Leave a Comment

Subscribe
Membership
About the Author