{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Let’s say you have a great product or service. 

Let’s also say that whatever SEO, SMO or PPC strategy you’ve used (or not used) is successfully driving traffic to your ecommerce site, and that when those potential customers have clicked through to your homepage, or landing page, you're confident that it ‘looks good’.

Finally let’s say your site even provides a fine user experience. No real complaints. Everything works as it should.

So now what? 

Is there anything more you can do to convince that traffic to stay a little while longer? To not bounce straight back to the SERP? To respond to calls-to-action? To increase your conversion rate?

Using the five techniques laid out in this previous article, five persuasive web design techniques, I’ll be taking a look at various ecommerce homepages that either tick one, or even all of the following persuasive design boxes.

  • Clarity above all: does the homepage answer the following questions - what is this site about? What can I do here? What is there to stay for? And most importantly, will I get the information I need?
  • Visual appeal: visual appeal is instantly more recognisable than user experience. Is the homepage attractive, while still being simple and clear? Most people have a good general idea of what an ecommerce website should look like, so it should also be familiar.
  • Strong visual hierarchy: make whatever is the most important thing on your page the biggest thing, then size the remaining elements accordingly. Also make call-to-action buttons stand out from rest of the page with a single bold colour.
  • Keep attention at all costs: with larger than life images that captivate and hypnotise, with photos of people, especially if they’re smiling, making eye-contact, have open body language and who are a natural, real-life example of a customer, not obvious stock photography.

    Also the use of surprising, unexpected images and copy will stand your site out from the rest, as long as it’s relevant to your brand.

  • One primary action per screen: Think about exactly what each individual webpage’s function is and make that abundantly clear. Perhaps don’t provide too many calls-to-action too soon, take the user on a journey first.

So with those points in mind, let’s take a look at some beautiful examples of persuasive design...

Travel Alberta

A simple call to-action, the promise to take the user on a journey and, while reigning in the hyperbole as much as I possibly can, an extraordinarily evocative image that makes me want to be in Alberta.

Westin Finds

Another gorgeous, overlarge image from a travel company. This page has one highly effective, primary action, directly in the centre.

 

Soho Fixed

Huge images, simplified text and the deployment of scarcity. Check out the 'sold' image in the bottom right corner.

Whipping Post

An immense amount of white space that only helps to make the gloriously large product images stand out even more. A single call-to-action. A strong visual hierarchy. Clarity above all. This ecommerce homepage has it all.

Spotify

Just a single call-to-action, that contrasts with the gigantic and evocative image underneath. This promises a journey for the customer to suit any mood.

Banana Cafe

A use of space and design that borrows from the flat design of Windows 8 and assorted other contemporary sites, but looks highly appealing, especially with the contrasting, overlarge black and white video playing in the background.

The reasonably happy looking models also make it different from other trendy apparel sites.

Greats

The product images are some of the largest I've seen, and look all the better for it. Hovering over the image reveals the most vital information. The user can continue to scroll down to reveal more products in a similar fashion.

This is ideal for an ecommerce store that maybe has fewer products to offer.

Soyuz Coffee Roasting 

Beautiful image that promotes relaxation in the user, with a subtle product placement from a natural looking model.

The page also encourages the user to embark on a scrolling HTML journey through the history of the brand.

Simple Banking 

The clear and easy to use homepage matches the bank’s mission statement. This is also a good example of using lots of white background to drive attention to what’s important on the page.

Minga Berlin 

This wryly subversive image is incredibly captivating. Also who doesn't love free C02-neutral worldwide shipping?

KitKat

Not strictly an ecommerce site, but this hilariously inventive product website is well-worth spending a some time on just to admire its affectionate satire.

 

Juliana Bicycles

Large and attractive product images directly on the homepage, with just a teasing amount of detail that encourages the user to click-through.

 

Nike - Jordan

Two simple and well defined calls-to-action, a gigantic product image and a clear sense of purpose make for a tremendous product landing page.

Jeni’s 

A strong sense of visual hierarchy and simple and clear design.

Huit Denim

The focus on narrative encourages the user to explore before they've even begun to think about what jeans they want. 'Do one thing well' is a very strong and persuasive statement to make.

Diesel

The blurring of the two areas the user isn't hovering over is a great way to draw attention to the specific products of interest, while still not hiding them completely.

 

Daniella Draper

Again, very simple design, abundantly familiar and clear navigation throughout.

Create Pilates

Fantastic sense of identity with the huge image and use of 'natural' terribly focussed model. The primary action of this homepage couldn't be clearer.

Booking.com

Booking.com's special haunted homepage takes you through a beautifully rendered HTML5 experience, which encourages you to scroll up a hauntingly lit staircase and visit the seven highlighted hotels, with a little blurb for each revealing how these locations came to be so ‘haunted’.

Read more about this experience here in Booking.com's journey into fear.

7 Diamonds

Finally an exquisitely laid out homepage that uses gorgeous photography to hold the user's attention.

With many thanks to AWWWARDS for some of these award nominated examples.

For more examples check out 14 more examples of beautifully persuasive ecommerce design.

Christopher Ratcliff

Published 4 December, 2013 by Christopher Ratcliff

Christopher Ratcliff is the editor of Methods Unsound. He was the Deputy Editor of Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

686 more posts from this author

Comments (12)

Comment
No-profile-pic
Save or Cancel
Stuart McMillan

Stuart McMillan, Deputy Head of Ecommerce at Schuh

Some great looking sites Christopher, feels like there is some airbnb influence to some of these, which is no bad thing! I had a look on mobile and most of them look pretty good, I'd actually say some of them are more persuasive on mobile than on desktop, given the general standard of mobile experiences.

Is there any evidence that these are actually persuasive? They make look beautiful, but do they convert more. I'd certainly hope they do, but would be great to hear some numbers.

about 3 years ago

Avatar-blank-50x50

Vaine Loera

These are some brave companies to explore new ways to layout the estore. It would be interesting to know if sales increased after moving away from traditional estore set up.

about 3 years ago

Avatar-blank-50x50

Ellie

We are constantly explaining to our clients that investing in good quality images can make or break traffic and attraction to your site so I must admit I have enjoyed this post!

about 3 years ago

Avatar-blank-50x50

Dan Lindop, Director at Surefire Media

This just goes to show how important it is to invest in photography - without such strong images, these layouts just wouldn't work. Stock shots are all well and good, but capturing a brands spirit can only really be done with custom photography.

about 3 years ago

Avatar-blank-50x50

Lenka Istvanova

Wow, thanks Chris for sharing this. I love websites with minimalist approach which don't try to sell everything they offer at one page. I like the KitKat example, will definitely check their website.

@Stuart I believe they do generate more sales although would be interesting to see some of the websites' statistic before and after overhaul.

about 3 years ago

Avatar-blank-50x50

Louis Rix

Thanks Chris,

The sites you have listed are nice sites indeed but they are all (bar simple banking) from the lifestyle vertical (travel, clothing, music etc). I believe it's easier somewhat to makes these sites look pretty and they appeal to a certain niche / target audience that expect that type of look & feel when they visit a site.

However, take the finance/insurance vertical that has to appeal to a wide audience and has to get across a clear message in terms of how the service works and what to expect on the journey and i'm struggling to find great examples. Could you list any that you have seen that fits the bill?

We're in the middle of a re-design at the moment and would like to get your thoughts.

Louis

about 3 years ago

Avatar-blank-50x50

Tom

Love this article, some great inspiration here. The big bold photography and clean white space really works well. Less is more.

about 3 years ago

Avatar-blank-50x50

design bookcase

I add Minimum[book], ecommerce italian responsive design.

about 3 years ago

Avatar-blank-50x50

Ed Mandell

Great post, but surely there is a compromise on performance with some those sites and the huge, high resolution images.

All very well looking great but if it takes ages to load?

about 3 years ago

Avatar-blank-50x50

Robinson

Hi Christopher, really liked your e commerce website themes. They are just awesome. The web design techniques are also very useful in designing a website. Thanks for sharing this lovely post.

almost 3 years ago

Avatar-blank-50x50

neha

Big bold pictures can really work..i just love this article..clean white space is great..quality is important as awalys...!!

almost 3 years ago

Avatar-blank-50x50

angelina

nice post..great use..some great inspiration here. The big bold photography and clean white space really works well. Less is more.

almost 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.