Don’t start with the home page

~ 27 November 2006 ~

…if you’re building a web app.

Too often it’s the accepted modus operandi to begin image comping, rapid prototyping, or iterative design by designing the home page first. While this practice works well for “brochureware” sites and other forms of brand-heavy design, it’s often a myopic approach for applications that are more utilitarian in nature.

If you’re comping the UI of a web app, forget the home page for now, as you’ll find the design of such will fall into place once you’ve mastered the UI for the more critical components. For nearly all web-based apps, the pre-login home page is merely marketing speak; a means of converting visitors into users. The post-login home page is almost always a dashboard; a summary of changes to important data since last login, and a springboard for new actions. Occasionally the home page is the primary raison d’être, e.g. Mint, in which the dashboard is the primary destination. But this is typically the exception rather than the norm.

Instead, begin with the core action(s) of the application and its interface. If your app facilitates recipe storage and retrieval, start with the Add Recipe and View Recipe screens. If your app offers invoice creation and management, start with the Create Invoice or Send Invoice screens. These screens and their siblings will inevitably dictate what should and shouldn’t appear on the dashboard or home page.

22 Comments

This is something I, too, have been preaching lately — not so much for web apps, but for content-heavy sites like the news sites I spend most of my time working on. I think the concept can apply to many different types of sites.

I’ve even been using the same terminology (“core actions”) to talk about the things I focus on first instead of the homepage — which, in my case, is usually things like reading stories, commenting on stories, viewing the weather, clicking through photo galleries, and so forth.

The bottom line, I guess, is that in most cases the homepage is still not where most people will spend all of their time — it’s just a jumping off point. So, I tend to give most of my attention — and especially my upfront attention) — to those places where people will spend most of their time.

I’m using this method in designing my new personal site (not a web app). So far, I’ve found that not only does the final design end up being better but this method forces you to think about execution much more than you would just designing a general home page.

I am in agreement with you on this one. In previous sites I have built, focusing on the actual functional pieces helped everything fall together on the home page. If i were to build it in reverse order, it may have been tougher.

Like Jeff said, it doesn’t even have to be for an app - but for sites that are content rich or are constantly updated, I think this is the best option as well.

5
Lulu ~ 27 November 2006

Thus, the importance of task analyis and synthesing to understand the big picture and lead to a most optmised homepage or any landing page for that matter.

Goal directed design is the key. Find out what people are trying to achieve, the homepage almost builds itself.

I have used this method for most of my designs, from small to big apps, web and desktops. Always works.

And totally agree with Jeff that people dont come to your websites to stop and stare at your homepage. Give them most obvious ways to do stuff they came to do. The way to get this right? dont start from the homepage in your design process.

Sites are like books…. You can’t design the cover without knowing what the book is about.

I preach this day in and day out at my office. It’s taken a while to get them all to listen and understand, but they are finally coming around. My advice to my fellow designers: Don’t give up! Persistence pays off.

Very good advice I believe. What helps me when developing an app is that I take the mockup and start clicking around on the image. If I find myself wanting to click where there are no buttons, I put some buttons there.

Following Jeff’s comment, how many people will even visit your homepage (given that most users will arrive at your site through a search engine/blog post)?

Personally, I’ve found designing the information-rich (content) pages first works better for me anyway - playing first with those pages that have more constraints rather than trying to fit a nice homepage design around ‘busier’ pages.

That’s a very interesting point. My only contradiction to your claim is those who have a slight case of OCD. Some designers, I being one of them, have a hard time moving past something, or going (seemingly) “out of order.” Sometimes I have a hard time skipping something, because it weighs on my mind while I’m working on something else, interfering the entire time. However, don’t get me wrong, I think you are absolutely right. I can’t tell you how many times I’ve revisited the “home” page after building an app, because I realized what important factors I wanted to display on a “pre-login” screen. I’m going to try your advice again, though, and hopefully I can move past the “home” page this time. Great advice.

14
Jon ~ 29 November 2006

I agree 100%. I can’t seem to convince my coworkers however. We spend 80% of our time (and budget) on the home page and 20% on the rest. When really it should be the opposite.

Are there any statistics out there that shows how long a user spends on a home page? I thought I saw stats at one point, but I can’t recall were that was… It would be helpful to back my case!

That speaks volumes…
I’ve been jabbering on about building a community website, and can’t get past branding the homepage. Brainstorming the functionality is in progress. Moving on with that sounds like the way to go then.
Check out thinkature.com for brainstorming ideas, it’s way cool for online flowcharting ideas for new domain applications.

17
Nigel ~ 30 November 2006

Thanks for this post… It reinforces something I’ve thought for the past year now!

18
josh ~ 30 November 2006

The theory makes a lot of sense to me but I prefer doing a rough mock-up of a homepage to get the feel of the design first. This is after ive done a complete story board for the entire site. I just like having an idea of what i want the feel of the site to be and doing a rough homepage puts it all into place. But then after that i start with the “Coolest” part of the site. Like a portfolio site i start doing the gallery page first. And sometimes the Homepage will completely change from my mock up but having it roughed in to be able to look at and make sure im not deviating from my design concept works the best for me.

It’s good to see we are not the only ones facing this dilemma. I agree that actual development of the app has to be the top priority. However, it is often difficult to educate users about and otherwise provide a “hook” for your product without some serious focus on the homepage. I agree with Jon that the correct tradeoff is probably around 80/20.