+ All Categories
Home > Technology > Homepage direction

Homepage direction

Date post: 25-Jan-2015
Category:
Upload: rob-lendvai
View: 229 times
Download: 6 times
Share this document with a friend
Description:
Examples of 'good' homepages.
14
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 Homepages to Learn From Page 1
Transcript
Page 1: Homepage direction

Overarching Lessons1. 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

Homepages to Learn From Page 1

Page 2: Homepage direction

GojeeGood: Instant immersion in product emotionBad: Not clear what the product is exactly (a recipe site with gorgeous photos)

Homepages to Learn From

Homepages to Learn From Page 2

Page 3: Homepage direction

AirbnbGood: Gorgeous and immersiveBad: Call to action gets lost (it's in the upper left)

Homepages to Learn From

Homepages to Learn From Page 3

Page 4: Homepage direction

OverGood: Gorgeous and immersiveBad: Product benefits not immediately clear

Homepages to Learn From

Homepages to Learn From Page 4

Page 5: Homepage direction

GrazeGood:

1. Product is front and center -- the only photographed image on the page2. 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 boring2. Cluttered

Homepages to Learn From

Homepages to Learn From Page 5

Page 6: Homepage direction

EvernoteGood:

1. Clear explanation of benefits2. Good information hierarchy: Pithy benefit > illustrations > benefit supheaders > detailedexplanations

Bad:

While benefits are clearly explained, how the product works remains a bit mysterious.

Homepages to Learn From

Homepages to Learn From Page 6

Page 7: Homepage direction

DoxoGood:

1. Design reflects the product - homepage for a product meant to reduce clutter is clean and clear ofcutter.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 onthe page.

Homepages to Learn From

Homepages to Learn From Page 7

Page 8: Homepage direction

KashooGood: Information hierarchy; above the fold how-toBad: Looks like a template, unoriginal

Homepages to Learn From

Homepages to Learn From Page 8

Page 9: Homepage direction

BarkBoxGood: Pithy explanation of product; great information hierarchyBad: Product shot is a bit small; page feels a little empty

Homepages to Learn From

Homepages to Learn From Page 9

Page 10: Homepage direction

BirchboxGood:

1. Clear product illustration2. Page has cohesive feel that evokes the product3. Clear call to action

Bad: Feels somewhat generic

Homepages to Learn From

Homepages to Learn From Page 10

Page 11: Homepage direction

SeamlessGood:

1. Product immersion2. Quick, functional call to action

Bad: Cluttered

Homepages to Learn From

Homepages to Learn From Page 11

Page 12: Homepage direction

XeroGood: Makes a potentially 'scary' product seem humanBad: Gives no information about product unless the video is played

Homepages to Learn From

Homepages to Learn From Page 12

Page 13: Homepage direction

BilleoBad:

1. Boring2. Generic graphical elements3. No clear call to action - the 'ZipThru' button is not clickable.

Homepages to Learn From

Homepages to Learn From Page 13

Page 14: Homepage direction

RescueTimeBad: Complicated product not clearly explained.

Homepages to Learn From

Homepages to Learn From Page 14


Recommended