When I first start working with a new client I always ask them to list two or three ecommerce sites they really like. This serves two functions: so I can get an idea of my client’s tastes, and also to give me something to fire my imagination when I’m coming up with design concepts. Interestingly I’ve noticed of late that there is one ecommerce site that gets cited more than any other as something businesses aspire to emulate – John Lewis (www.johnlewis.com).
What is it that makes this site so good? Why is this site held up more than the sites of the other high street brands as an example of how to do great ecommerce? Here are my thoughts on the matter.
The most prominent feature on the site is the ‘mega-menu’ – the main horizontal list of departments that expands into a hugely informative site plan.
When you have a store as large and potentially confusing as John Lewis’, providing visitors with a clear method of navigating it is essential. In a real store you can rely on people navigating themselves once they are in the right general area of the store, but online you only have seconds before a customer will give up in frustration because they can’t find what they want.
John Lewis’ mega menu is a great example of making the complicated straightforward. It is possible to locate your exact department amongst the hundreds of others before you even have to click a mouse.
If you have a large and complicated store and you are finding that your visitors are not purchasing as often as you would expect, the problem could simply be they are not finding what they want. Try adding a mega menu and see if this improves your conversion rate.
The Engine Room
At the top right of the store is what I refer to as the ‘engine room’ of an ecommerce site:
- Checkout Link
- Account Functionality
These essential tools are clearly and simply presented, and they always appear in the same place on every page. They are the things that visitors need to click on more than once during their shop visit, and (in the case of the search) will often be the first thing new visitors look for when they visit a site for the first time.
Is your engine room nice and clear? Do you have these key features clearly displayed and easy to access? I’ve seen a surprising number of sites where vital things like the shopping cart are buried away in the design. They don’t need to be clever – they just need to obvious.
One thing I really like about johnlewis.com is the limited colour palette. They’ve used pale beige for the background, and that’s about as colourful as it gets. Everything else is black, white and grey. A limited/neutral colour palette is a great idea for your site as it means that your products will stand out (and not be fighting for attention with your branding) and it allows your calls to action to be found easily. In the case of johnlewis.com the buy buttons for the site really stand out with a bright green colour against the neutral beige.
John Lewis have opted for a really simple and clean layout with very few graphical elements. Corners are square, drop shadows are minimal and there isn’t a gradient fill in sight. Again, this allows their product photography to shine and means the site will always load quickly and appear consistently across browsers. Great design doesn’t mean ‘lots of clever design elements’. I tend to approach web design like laying out a magazine page – it’s more about presenting information clearly than it is about making something graphically rich.
Lessons to Take Away
The way to approach design is not to think about how to make it clever and impressive. Instead you should think about how to make your site design best serve the needs of your visitors and your product range.
- Is your site structure easy to navigate?
- Are key features such as search and shopping cart easy to locate?
- Do your graphical elements and colour scheme distract from your product images and your calls to action?
John Lewis have thought long and hard about these issues and come up with an approach to web design which is worth learning from.