Questions? (877) 643-7244
FutureNow Post
Tuesday, Mar. 17, 2009 at 4:36 pm

A Strong Homepage Design Dissected

By Brendan Regan
March 17th, 2009

You could say I look at homepages for a living.  Not really, but they’re one of the pages I analyze and optimize for a living.  I saw one I enjoyed the other day, so I’ll talk about the design, what I like about it, and make a few suggestions for improvement.

One of the first things I noticed (and liked) was that the homepage was quite tall.  Many designers seem averse to tall homepage designs, thinking that everything simply has to be above the fold.  The fact is, visitors will definitely scroll if the content is engaging and answering their questions.

For the sake of dissection, I’m breaking it into top section, middle section, and bottom section, so click on a

Top Section of Silverback site

thumbnail to see each section a bit bigger.

Top Section  – Things We Like to See

  1. The correlation between the parent company and the product brand is clear but unobtrusive.  A simple link takes you to the parent company, and the word “presents” above the brand sets up the understanding of the parent/child relationship.
  2. Unique Value Proposition is prominent and below the logo
  3. Key benefits are bulleted for fast-moving personas.
  4. Primary and secondary calls to action are clear, prominent, and the primary button is above the fold.
  5. Bonus: this is of no real value, but re-size the browser’s width and you’ll see the top of the design do cool stuff!

Middle Section – Things We Like to See
Middle Section of Silverback site

  1. Uses graphics to illustrate a process/concept.  Not everyone loves to read; some visitors love diagrams.
  2. Expands on the core concepts with brief paragraphs and uses bolding.
  3. Provides a screenshot of the application, so visitors can get a sense of its intuitive or “magical” interface.

Bottom Section Things We Like to See

Bottom Section of Silverback site

  1. Use of video demo.  Not everyone loves to read or look at diagrams; some visitors love video.
  2. Deeper level of detail about system requirements, pricing, etc.
  3. They support a cause.  This isn’t just a cute gorilla-themed design; they are using a portion of profits to support a cause they care about.

Suggestions for Improvement

I’m obviously a fan of this design, so I’ll offer the site owners a few optimization concepts.

  • Test.  If you’re not already testing your homepage, you’re missing out.
  • You have well written copy, but linking key phrases can drive traffic into the site to get their questions answered and convert.
  • Your “save the gorillas” angle is too easily-missed.
  • The diagram in the middle section could be interactive.
  • Calls to action only at the top of the page.  I’d repeat them lower on the page, even if they were just links in body text.

Now, who else wants some dissection and optimization?

Add Your Comments

Comments (31)

  1. It is great, however it has one outstanding flaw: It’s Mac only.

    While I love Mac’s, the reality is that 90% of the online world is on PCs.

    Why ignore 90% of the market?

  2. @ Mark: Good point on the app itself. I agree, but I wonder what percentage of their target audience (web designers, mostly, I’d guess) are mac vs. PC?

  3. Hey Brendan,

    yes I had the same thought about most designers using Macs.

    However, what about us marketers on PCs? I was about to sign up and hand over the $49 and then I saw the Mac only blurb.

    I mean a Usability service for $49? How good is that?

    I feel actively discriminated against(lol) not to mention jealous.

    Here’s hoping they come up with a PC version real soon.

  4. Great analysis. Can these tips be applied to any home page? If you’re in the helpful mood, what do you think about our recently changed Home page?

    Thanks and look forward to any suggestions.

  5. Extremely useful for all product managers and webmasters. Thanks a lot. Following these simple steps and also analysing your page for image and code size improves the overall performance.

  6. They do such amazing work at Clearleft. Definately a company to follow, if you want inspiration for great design!

    And the Silverbackapp website is a good example of this.

    On top of that, it’s a great product. Especially if you do Coffee Shop Usability Testing. But I agree with all the others: They should *really* consider making it for Windows also, I’d definately pay for that!

  7. I liked the page also, I think the bounce rate is pretty low for this page.

  8. I agree that this is a well-designed, unique site. Furthermore, it appeals to all types of customers with text, pictures and video clips. The color stands out and is likely to be appreciated by most people. This site is a good example of making yourself unique without ostracizing yourself.

  9. @Gwen: yes, i think all of the ‘best practices’ i highlighted are transferable principles of design. part of the reason why i chose to post about this site is because it’s targeted to a very narrow audience, yet still follows these types of proven practices.

  10. Nice analysis! I really loved the concept of the parent company. I would also like to add one point and this is also a question for everyone – I think putting the same weight on download and buy now is reducing the chance to buy now and causing friction. What you all think?

  11. [...] hier deze website als voorbeeld van een goed ontworpen homepage en legt ook perfect uit waarom. Lees het artikel A Strong Homepage Design Dissected op [...]

  12. Can dissect my page anytime :-)

    Sometimes it is better to niche of course, i.e mac over p.c but Im sure similar software is out there waiting. Whether it has cool design is another matter.

  13. [...] A Strong Homepage Design DissectedMarch 17, 2009 [...]

  14. Dividing the page up in three is good idea, Brandon. However I’m not sure this dissection works for every other niche.

  15. @Brendan Thanks for the update. This post came a great time as we’ve started testing out home page and have found the tips quite helpful.

  16. Marc- because that 90% is 90& irrelevant to design.

  17. Brendan Regan: If you are educating those who have never used the word design before or seen anything that resembles something that has been designed, I find your article informative. If this article intended to communicate with designers….oh boy…I just don’t have the time to explain it to you……

  18. @john Missale: Glad you found the article informative. I would wager that most of this blog’s readers aren’t designers by trade, and are learning to use all available tools/skills to convert visitors into customers. That being said, we welcome all types and try to all learn together.

  19. Yeah, the save the gorilla campaign is too easily lost. I had to scroll down a bit before it showed up. Even when it did, it was too easy to miss. I would place that piece of info somewhere on the upper part of the upper part (pardon the apparent). In fact, I would also suggest testing it as the last banana bullet to see how the response for that is. Any comments on how that would turn out to be like?

  20. I’m a designer and I use a PC.

  21. [...] Nous sommes lĂ  dans un très bon exercice de minimalisme avec une bonne mise en scène des bĂ©nĂ©fices et des boutons d’appel Ă  l’action au format XL. Vous apprĂ©cierez au passage le cĂ´tĂ© nounours de ce gorille ainsi que le thème “jungle” qui rĂ©chauffe la page. Pour une analyse plus poussĂ©e c’est ici : A Strong Homepage Design Dissected. [...]

  22. Thanks for the article and the feedback guys. Glad you liked the site.

    We’ve got a few ideas on how to make the page work harder, such as the inclusion of testimonials or product buzz. We’d also like to add more tutorials and quick start guides.

    As for the “save the gorillas” angle, keeping this subtle was actually a strategic decision as we didn’t want it to come across as just a marketing ploy — we actually do want to help.

  23. Nice post, thanks for sharing. Its also interesting to see what people have to say. I kind of agree with Marc on his PC vs mac comment

  24. I saw everyone of these blogs…. soooo coooool…. I don´t see anything so nice in my country… But I have to tell(write), that your blog is one of the most beautiful from this 47 blogs…sorry 48 with yours. Very good inspiration…thnx

  25. [...] Nous sommes lĂ  dans un très bon exercice de minimalisme avec une bonne mise en scène des bĂ©nĂ©fices et des boutons d’appel Ă  l’action au format XL. Vous apprĂ©cierez au passage le cĂ´tĂ© nounours de ce gorille ainsi que le thème “jungle” qui rĂ©chauffe la page. Pour une analyse plus poussĂ©e c’est ici : A Strong Homepage Design Dissected. [...]

  26. I think generally “mac” owners want to continue considering themselves as a unique elite crowd. If an application is for Mac only I think it’s more likely to get used by the Mac community than a cross-platform application because it’s then not quite as special.

    That said, I love Mac’s, but I don’t use one. =)

  27. That homepage is pretty cool, I think I might do a redesign on mine!

  28. Great cartoon style design.

    By the way – now that Mac can run Windows I think that the difference will be smaller.

  29. We’ve got a few ideas on how to make the page work harder, such as the inclusion of testimonials or product buzz. We’d also like to add more tutorials and quick start guides.

  30. You have very clearly explained the website & improvements it requires Brendan..I also think that the simpler, short but interesting content will draw more people to the website as compared to lengthy content if its not interesting. Thanks for sharing the drawbacks..I’ll also try to make flawless designs for the websites…

  31. I think split testing is really the key. everything should be above the fold concept can be beneficial for some kind of websites but not all. Instead this pattern of top, middle, and bottom section is mostly used and seems to be easy for users.

Add Your Comments

 

Print this Article
Share

More articles from Brendan Regan

Marketing Optimization Blog
FREE Newsletter Sign-Up
send it once every: