Homepage direction
0 likes330 views
This document analyzes the homepages of various companies to identify best practices. It discusses how effective homepages immerse users in the product, clearly communicate benefits and functionality through information hierarchy, and include an above-the-fold "how-to" explanation. Some exemplary homepages highlighted include Graze for featuring the product prominently and Airbnb for its immersive and gorgeous design, while some less effective pages, like Billeo, lack clear calls to action or are boring and generic. The document provides lessons on crafting optimal homepages.
Homepage direction
- 1. Homepages to Learn From Overarching Lessons 1. Immerse the user in the product from the get-go. 2. Communicate benefits and function through clear information hierarchy. 3. Be fresh and original. 4. Show a 'how-to' explanation which begins above the fold, but doesn't dominate the entire page. 5. Have a focused and strong call to action. 6. The page should be 'on-brand' -- consistent with the product message, packaging and copy. Homepages to Learn From Page 1
- 2. Homepages to Learn From Gojee Good: Instant immersion in product emotion Bad: Not clear what the product is exactly (a recipe site with gorgeous photos) Homepages to Learn From Page 2
- 3. Homepages to Learn From Airbnb Good: Gorgeous and immersive Bad: Call to action gets lost (it's in the upper left) Homepages to Learn From Page 3
- 4. Homepages to Learn From Over Good: Gorgeous and immersive Bad: Product benefits not immediately clear Homepages to Learn From Page 4
- 5. Homepages to Learn From Graze Good: 1. Product is front and center -- the only photographed image on the page 2. Great information hierarchy - elements other than box photo and call to action take a backseat. 3. 'How it works' section header is above the fold. Bad: 1. A bit boring 2. Cluttered Homepages to Learn From Page 5
- 6. Homepages to Learn From Evernote Good: 1. Clear explanation of benefits 2. Good information hierarchy: Pithy benefit > illustrations > benefit supheaders > detailed explanations Bad: While benefits are clearly explained, how the product works remains a bit mysterious. Homepages to Learn From Page 6
- 7. Homepages to Learn From Doxo Good: 1. Design reflects the product - homepage for a product meant to reduce clutter is clean and clear of cutter. 2. Video to explain unique product is embedded in the page in an organic way. Bad: The above-the-fold how-to section isn't labeled, and doesn't seem to go beyond what's already on the page. Homepages to Learn From Page 7
- 8. Homepages to Learn From Kashoo Good: Information hierarchy; above the fold how-to Bad: Looks like a template, unoriginal Homepages to Learn From Page 8
- 9. Homepages to Learn From BarkBox Good: Pithy explanation of product; great information hierarchy Bad: Product shot is a bit small; page feels a little empty Homepages to Learn From Page 9
- 10. Homepages to Learn From Birchbox Good: 1. Clear product illustration 2. Page has cohesive feel that evokes the product 3. Clear call to action Bad: Feels somewhat generic Homepages to Learn From Page 10
- 11. Homepages to Learn From Seamless Good: 1. Product immersion 2. Quick, functional call to action Bad: Cluttered Homepages to Learn From Page 11
- 12. Homepages to Learn From Xero Good: Makes a potentially 'scary' product seem human Bad: Gives no information about product unless the video is played Homepages to Learn From Page 12
- 13. Homepages to Learn From Billeo Bad: 1. Boring 2. Generic graphical elements 3. No clear call to action - the 'ZipThru' button is not clickable. Homepages to Learn From Page 13
- 14. Homepages to Learn From RescueTime Bad: Complicated product not clearly explained. Homepages to Learn From Page 14