Post Natal Part 5: Homepage Design Iteration Examples

Posted by Jeff Dwyer

Jul 14, 2014 12:28:00 PM

This is part of our "Post-Natal" series on the development of see Building for the rest of the series.

So I'm sure we can all agree that the homepage is pretty important. It's the one thing people are guaranteed to see. It needs to load fast and then you've probably got 1.7 seconds to tell people what you're about.

Oh and most people don't read the words.

If you haven't already read it, How I increased conversion 2.4x with better copywriting is Amy Hoy's fabulous how-to on homepage design and I totally subscribe to her philosophy. My takeaway from her piece is that the homepage should tell a very clear, quick, focussed story. Do NOT start with features. Start with the problem. Dive deep on the problem. If readers can tell that you understand their pain, they'll give it a go even if they don't understand your solution. If they just see features & pricing and a testimonial you make them do all the hard work of figuring out whether this solution is right for them.

So with that in mind, let's see what we actually came up with. (You'll see a big Hoy-style rewrite about 4 revisions down).

Iteration 1: Too focussed on the product

This was close to placeholder, but it's worth looking at to see where we started. I did a lot of hand-wringing about the difference between "Decision Tool" and "Opinion Comparison". You'll see that I flop back and forth between "Simple Group Opinion Comparison" and "Group Decision Making" throughout these iterations. The reason is that I HATE the idea that a tool would make a decision for you. That's just a horrible idea. ForceRank is supposed to improve communication. But that sounds a little wishy washy and "Decision Making Tool" is about 300% easier to read than "Opinion Comparison Tool".

The second theme in here is explaining the "Force" part of ForceRank is unfortunatey a word with a very unhelpful connotation to Jack Welch's Vitality Ranking which is a way to rank employees reward the top 20% and then cut the bottom 10%. I wanted to make it clear that that's not what we're doing here because I think the demand that things be ranked is a great feature of Since you can't have two #1 priorities you are forced to make hard choices. The bonus of making these hard choices is that I think it makes you more empathetic towards the eventual decision maker. Too often I see situations where each stakeholder wants their project #1 and has no sympathy for the eventual decision. 





Iteration 2: Make it interactive

This was a great idea that I got from Maggie Steciuk. She just kind of mentioned it in passing but I really liked the idea of letting the user actually play with the thing without signing-up.

Part of this stems from the fact that we have an enormous onboarding challenge. Rarely are people walking around wishing for just exactly the kind of solution that you've created. But this leads to a real difficulty when getting people started. In every user test I did, I got huge positive feedback about the idea. People were really jazzed about the potential and said they absolutely felt the pain I was describing. But then when they land on the "Create your first question page" everything grinds to a halt. What problem should they do first? Hmm. What are the possible choices? Those aren't easy questions and that's fine, but it also means that task #1 is a serious time commitment from your user and that's not great.

The idea with interactive homepage is to give people a bit of the payoff/reward of ranking and comparing results with a dummy set of data. The user tests I did of this were positive. People seemed to have a much better sense of what the product could do for them. That said, it definitely didn't fully solve the issue of bootstrapping them.


Iteration 3: Personas

I think one of the best things about ForceRank is that it can help even out the playing field between introverts and extroverts, people that dominate meetings and people that prefer email. Hopefully the tool can provide a way for introverts to contribute ahead of time, while providing a great jumping off point for the meeting itself. I write a bit more about this in The Personality Zoo: Meeting Zoology.

As part of that I wanted to give people personas to resonate with, so we made some nice personas.


 Iteration 4: Cave in and call it Decisions

As mentioned above you can see here that I've axed the confusing "Group Opinion Comparison" wording. Starting to get a bit Amy Hoy-ish. Do you see anything about what the product "does"? No, you don't. Describing the pain.

Also Mike convinced me that the picture of my couch was lame.



Iteration 5: The Full Amy Hoy

Allright, this is my pass at a full "describe the problem" long form homepage. I get a little crazy with icons. And I go on a bit of a rant about how this is not groupthink. I'm trying to avoid the "This Tool Will Make Your Decision.

Also I brought the couch back because I have no taste.


 Iteration 6: Simplify. Simplify. Simplify.

 Watching users read the previous page it was obvious that they didn't, well, read the previous page. This iteration relies heavily on the idea that the interactive parts of the tool are going to show exactly what we're doing. And it hopes, (possibly incorrectly) that the quick hits on top are enough to describe the problem.

Also more CTAs and I finally decided that couch needed to go.




Iteration 7: Long Form

I wrote a blog post But What Is The Minimum Viable Product? which was pretty popular so I had some much better screenshots of use cases. I've always liked long-form pages as well. They seem like they do little harm for people that are ready to convert. I think short-short-short homepages have great click thru, but I've seen in AB tests how easy it is to increasing the click thru rate of the homepage and end up with those people just falling out of the funnel one step later because they're not a good fit. Since ForceRank takes some work to setup your first question, I'd rather pre-qualify people then make them click through into a hard task just to understand what the product does. Make sense?


So that's the current state of the homepage (at least before we unveil our super awesome new integration). What do you think? I'd love to sit back and hear about the multitude of ways in which I screwed this up.

You can read the rest of this series in Building ForceRank a retrospective about the entire process. 

Try ForceRank Free

Topics: Tech, Product Design


What is ForceRank?

ForceRank is a prioritization tool for product managers. It helps people identify priorities, make tradeoffs, compare results and finalize a plan.

Try ForceRank

Recent Posts

Recent Posts

Follow Us