The Ultimate Guide to UX Design for eCommerce | Spot Studio
-

The Ultimate Guide to UX Design for eCommerce

eCommerce UX Design Guide

When it comes to UX design for eCommerce websites, many businesses we speak to seem to value their own brand experience over what will help the users. There’s a notion that they simply need to sell their style and the users will buy, in those immortal words, just like that.

You can only imagine the amount of head-to-desk slamming we’ve done over the years.

As sales are massively impacted by poor usability, good UX is, in our opinion, the most important feature of any eCommerce website design. This means making sure that all content delivered to the user is relevant, valuable and has a definite purpose. But where do you begin?

Let me preface this article by stating that everything you are doing must be optimised for mobile. With the dramatic increases in actual purchases being made on mobile devices, don’t for one second consider a website design that won’t function effectively on both mobile and desktop.

I’m just getting that out of the way here so I don’t have to hammer the point home every second sentence.

So let’s start.

Understanding the Business

Though it ought to go without saying, you need to understand what the business is and what it does before you begin any work on optimising any website. This may seem simple – and it is – but you need to make sure you are asking yourself the right questions in order to get the right answers.

When working with clients, the first thing we perform is an in-depth evaluation of all their current market standing, their content, how the company is set up and what their strengths and weaknesses are. This gives us the best possible vantage point to begin the UX design process.

Evaluating Current UX Design

There are a variety of ways that this can be carried out, and at Spot Studio we combine the following 3 to deliver the best evaluation we can.

User Session Viewing

Perhaps the most helpful of all practises, we watch how actual customers use the website. By monitoring these sessions we can see how the business’ target market is engaging with what already exists.

This helps us understand where the UX is already functioning properly, but also where there are bottlenecks and exit points. Identifying these key areas will help us create cures later on.

Heat Maps

A/B Test Hugo Carter

A little less robust than session monitoring, heat maps are a valuable tool to understand where exactly your user’s attention is placed. This will show you the most important parts of the current on-page content, and those that are redundant. We personally like Hotjar for this.

Click here for our case study on how heat maps helped us improve our client’s conversion rate.

Behavioural Design Discussions

Here’s where the specialists come in. At Spot Studio we have an in-house behavioural psychologist that works alongside our UX team to discuss each element of the webpage.

Approaching the website as a set of behavioural triggers, you need to unearth whether the triggers are effective, relevant and with the right goal in mind.

Research

When it comes to research, there are two key areas that any eCommerce UX designer will need to focus on: the competition & the market.

blog_1b

Competitors

Without analytics data it’s not possible to know exactly what your competitors are achieving with their UX, however, we use a rule of thumb to judge which are performing the best:

the bigger, the better.

Pretty simple.

The bigger the business, the more likely they will have their own in-house UX team, and the more likely they are to be doing things right. Of course, this won’t always be the case and you’ll have to judge for yourself. Some big businesses will be more ignorant than you can imagine.

When you do find a company that you think are doing things right, ask yourself the following questions:

– Why have they designed their website like this?
– How am I, as a user, being guided through this website?
– Do I have any questions about their products that aren’t answered?
– Do I like the website and, if so, why?
– Do I feel compelled to read their resources, click their links, make searches?

You see, understanding good eCommerce UX design isn’t a strict science… You need to be creative too.

Market Research

Really, there’s no more valuable source of information than your clients themselves. But how do you get them to talk?

Well, everyone likes little gifts, and seeing as they’re your customers (and provided you’ve been doing everything right), they’re probably fans of yours already.

What we suggest is sending vouchers or small little products to your most valuable customers. These will be the more likely to respond and are most likely to purchase again. Making them feel like valued customers won’t hurt in the long run either.

Simply ask them what they think about your website, and what they think can be improved. Don’t give them a mountain of questions either – we’ve found that 3-4 works best.

Personas

If you’ve read anything I’ve written before, you will know that I like to talk about on-page narratives. A lot. But that’s because they’re very important. I like to think of each single web page as a story that the user is the protagonist in, with each element a plot point in that story.

Sure, the user isn’t strictly a character of my creation, but by writing the narrative to suit a character like them, I can get them to follow my plot and make that purchase.

But before I begin writing any of the narrative, I need to know who my characters are, and what will inform their decisions. What will trigger them to perform certain actions and how I can ensure they’ll behave as I want them to.

As we discussed above, session monitoring is excellent for this, as is your market research. But this is where analytics data becomes incredibly useful too.

Creating client personas for UX Design Planning

Creating Client Personas

Think of this as simply putting faces to the anonymous internet users that visit your eCommerce website. Client personas are the stereotypical members of your market. They give you someone to directly sell to, which will help a great deal when it comes to deciding on UX features.

We find that it’s best to create at least 3 separate personas to give yourself a fair estimation of your target market. These personas should embody the characteristics of specific demographics of your market base.

Want to know more about creating client personas? Read our Digital Marketing Guide for 2018.

eCommerce UX Design for Pages

By now you should have enough information on your market, your current website design and your competition to start designing the new website.

So let’s take a look at what the important landing pages for an eCommerce website should contain.

The Homepage

They always say you should never judge a book by its cover, don’t they? But everyone does. And in the world of eCommerce it’s even more prevalent.

When a user lands on your website you have 0.05 seconds to convince them that you’re worth their time. That’s a about the length of a single frame on TV.

You need to convince them that you’re trustworthy and will have what they’re looking for in the blink of an eye. So how do you do it?

The Top Line Banner

Ever since we were children we’ve been taught to read from top to bottom. It’s ingrained in us. Which means that when a potential customer lands on your homepage, their eyes are going to start at the top and work their way down.

So what do you do with this knowledge? You convey important, sales driven information in the top line banner.

Top Line Banner ecommerce ux

In about 2 inches of screen space, Clarks have managed to convey an incredible amount of information. Important information about needs, wants and desires. Let’s dissect it.

Needs

The top line is extremely helpful, linking to all the key informations a customer needs. Store locator for bricks and mortar purchases, their help section, the customer login, the shopping bag and the eCommerce checkout. These are for those who are either there to make a purchase or require help.

Wants

Here we have all the store section or category links; everything that the customer could want will be found here. They can even search for what they specifically want in the bar.

Desires

Here Clarks give their potential customers some desire fulfilment. Everyone who makes an online purchase dreams of getting free things, cheap things or things as soon as they can.

Your Value Proposition

This is the reason why your customers should choose you, and it requires some really smart, snappy copy. Below we have a fantastic example of how to do it right.

Value proposition for eCommerce UX Design

So simple, yet so effective. The copy,

“You called. We answered.”

shows precisely how valuable Muc-Off are to their customers. They listen to what they have to say, and not only that, they deliver what the customers are looking for.

You, as the customer, become a valuable part of the company itself, with your own opinions affecting the company’s business choices. And as this is a specialist athletic products company, you really want to know that they care about your niche.

Top points to the copywriter for this one.

Funnelling

Make it as simple as possible for your customers to find what they want as soon as they land on your homepage. Sure, you may want to give up the above the fold space to announce new products or special offers, but below this you want to immediately pull people through to your shop.

Speaking of which, Pull and Bear have decided to forgo the value proposition entirely and immediately funnel people through to their respective departments.

Funnelling from homepage eCommerce

You have to admire the simplicity of the layout here. It says,

“We both know why you’re here, so come take a look at the clothes”.

No fancy gimmicks, no thrills, no buffering videos. Straight to the point.

Clarks menu ux design

Going back to Clarks, we can see a different way of approaching funnelling. Hovering over an item in the store menu, you are delivered each item category, speeding up your online shopping experience.

They also include a selection of ‘popular items’, leveraging buyer proof to upsell their products. More on this later.

The Fountain of Knowledge

So you have created excellent, funnel driven links above the fold. Nice. But there are those intrepid shoppers who always want to know more. But what do you give them? Knowledge.

For those who aren’t satisfied to simply click through to your shop, you have the opportunity to demonstrate your expertise and the added value of buying from your company. This is where your content strategy will come in and where you can really show off your smarts.

Lush homepage UX design guide

Uniquely, Lush intermingle their expert content with products and customer reviews. These articles support the sales of their products and introduce their prospective customers to the specialist knowledge that the company can offer.

Now, to some eyes, this may look like a mishmash of nauseating perfumery, to others this reflects the bubbly, effervescent nature of Lush itself. So take head. If you’re considering this route for your eCommerce UX design, we urge you to evaluate whether this suits your business and be cautious to not overdo it.

The Qualifiers

Here’s where you can sing your accolades. But don’t warble. No one likes a warbler. Use this bottom section to demonstrate your credibility as a manufacturer/developer/seller of products in nice, plain and simple terms. Show your customers that you’ve been in the news, that you have unique qualities and things that you’re proud of.

Homepage Qualifiers for UX design

Lush have used this space to inform their customers that their products are all ethically manufactured and tested, handmade and with naked packaging. That’s called knowing your market.

The Footer

Also known as the matrix of links. There’s no point in getting particularly fancy about the footer, simply put all of your relevant links there. It’s the done thing, and customers will expect it. Link to your help pages, your contact, your social media accounts, the album of your family pets. Whatever is important to your business should be found here.

homepage footer for ecommerce ux

Contact

Whether it’s over the phone, via live chat or via email, your customers will want to speak to you, or at least know that they can if they need to. This will help incredibly with your credibility and accountability, meaning that users are far more likely to trust you and to make a purchase. As such, you need to make it as clear as possible that you aren’t a faceless entity. Reassure your customers that behind the screen there’s a human being just waiting to help.

It may be impractical for your company, but a direct phone number is incredibly handy for this, and will make it a lot easier for client queries to be resolved. Do avoid using any 08 numbers, however. Although they’re free nowadays, people will still get confused and are wary of running up massive mobile phone bills. And whilst we’re at it, don’t use a mobile number – they don’t inspire credibility.

Read our case study on how we increased our clients leads by over 300% with a click to call button.

Notes on Homepage UX

Whilst this list may seem basic, and it is, that’s because these are really the only sections that your eCommerce homepage needs. The last thing you need to do is start overcomplicating matters with a bunch of noise that will distract your user from the purpose of your website: to sell them things. There are additional sections you might like to include, such as a newsletter sign up or a gallery section, but you will have to decide whether that is valuable to your users or not.

Hint: 9 times out of 10 it won’t be.

Don’t have time to read this post right now?

We have a PDF for you containing the entire blog post. Just fill in the form below and we will mail it to you.

You may unsubscribe from these communications at any time. For more information on how to unsubscribe, our privacy practices, and how we are committed to protecting and respecting your privacy, please review our Privacy Policy.

The Product Page

The second most important page when it comes to eCommerce UX design, the product page needs to be smartly crafted to generate (at bare minimum) a deposit in the cart. So let’s take a look at how to optimise the usability of your product page.

Product Images

 

Your product images are your primary weapon. They are what will first draw your users’ eyes and can, in a split second, determine whether they will buy from you or not. Something as innocuous as poor lighting can make your operation seem makeshift and therefore untrustworthy, so follow these guidelines closely to ensure you don’t let yourselves down.

Use Natural Lighting

Make sure that the picture looks as real as possible. You might secure a sale with fancy lighting, but if the product doesn’t look like a picture, you’re dramatically increasing your chances of having it sent back to you.

Give A Sense Perspective

Your customers wants to know exactly how big the thing is, so give them a sense of perspective. Take a photo of the product next to a recognisable object.

Show Your Products Being Used

This will simply help the customer visualise themselves using your product in a specific situation. And visualisation is key to the sale. Just ask any estate agent.

Photos That Won’t Clash

Make sure the photos you take will not clash with the branding on your website. Keep consistency in the pictures and make sure they work with your colour palette.

Optimise Your Photos for SEO

As we wrote about recently, Google is displaying images in mobile search results. This means that to make sure you have the best chance of getting traffic on your site, you need to optimise your photos with Schema.org markup. Click the link above for more information on how to do this.

Show Uniqueness

What makes your products your products? Is there some fine detailing? A special quirk? Make sure you get this across in your pictures, or your clients might never know about it…

For more on product photography…

Product Specs

Give your customers everything they need to know about your product to make an informed purchase. For things like bags, explain the exact dimensions, whether they’re waterproof, whether they have additional pockets, a security pouch, how much weight they can handle.

Clothes need to have specific dimensions outlined, or at bare minimum, a description of how your business classifies medium, large and small clothing.

Ux Design for eCommerce product page

ASOS do this extremely well, outlining all the product details the customer might be interested in by using very simple language. Explaining how the product should be looked after in the first person adds a nice touch of personalisation, and describing the size of the model and the product they’re wearing really helps the customer judge whether this is the fit for them.

Colour Options

Far too many companies will stock the same product in different colours, but not explicitly show this on the website. By not only putting this information on the product page, but linking to the alternate colours, you will give customers who like the product, but aren’t sure the colour is for them, an additional nudge to make the purchase.

Show colour options on product page for eCommerce

Pull and Bear have a simple box to click, loading images of the same product on the same model in a different colour. Such simplicity, but incredibly useful for browsing customers.

Returns Policy & Delivery

With the first iterations of online stores this information was stored way at the end of the purchasing process. Finally revealed when the client was finally ready to buy, I can’t be the only one who has seen a 2 week delivery time, or an additional £5 P&P cost, sighed and immediately closed the tab. Being upfront about this information means that the customer can be more informed about their purchase and shows that you don’t want to waste their time.

Returns and Delivery options on product page

We’re not suggesting that you offer to come and pick the product up from wherever the client is, but tell them what their options are. If your delivery options are simple, outline them here too, there’s no need to link them to another page. Added clicks just means the customer is more likely to get bored and leave your website.

Shop The Look

This was a stroke of eCommerce UX design genius and whoever first thought of it deserves a massive pat on the back.

So you’ve spent all that time and money and effort to get professional photos taken with a model. Your wardrobe department has done an incredible job of matching items to make those photos really snap. But now you expect your clients to search around the site to find the combination themselves?

SHop the look for ecommerce good ux design

Your customers might not want to dress exactly like the model, right down to the socks. But maybe they just really want those socks. See, providing the best eCommerce UX design means giving users the options they may want. Not what they all need. Which leads us seamlessly onto our next product page feature…

You Might Also Like…

Also known as the ‘Related Products’ or ‘Our Customers Also Bought’ section. It’s the fantastically versatile cousin of the Shop the Look section and can be utilised in different ways throughout your website. For instance, on the Clarins website, the customer is offered two options: products they might also like, and products that the current item works well with. These two sections present two very important UX functions; one done well, one not so.

Clarins you might also like section on ecommerce site

Although it’s not explicit, the ‘You Might Also Like’ section shows products that past clients have bought. With more explicit copy such as ‘Our Customers Also Bought’, this section would give the customer social proof to prompt the click-through. It’s the second section that I like, however. Clarins are make-up experts, and here they are giving you their guidance to not only make a purchase, but on how to use their make-up. Extremely subtle up-selling, but a very nice touch.

Amazon, the undisputed champions of eCommerce UX design, approach this slightly differently. The first image is from the product page itself:

Amazon upselling on product page

Here we see the page after you have added a product to your basket:

Amazon product page UX design examples

Never one for subtlety, Amazon is a machine designed to make money. They know it, and all their customers know it too. Here Amazon repeat that these items are frequently bought together to really nail the point home. The distinction between these sections is simply in the copy (which will affect different customers in different ways) and gives Amazon more space to cross sell.

Now, this won’t work for every eCommerce company, but bigger marketplaces can get away with a lot of things that boutique shops can’t. Think about the bloke shouting about his apples in Lewisham high street compared to the clerks in New York’s Macy’s. Is it right for your brand to cross sell so vocally? Or should you be more subtle about it?

A Note on Cross-selling and Upselling

Though these terms can be used pretty interchangeably, there’s a definite difference between the two.

Cross-selling is a strategy used to sell related or complementary products. For instance, when you buy a ‘Universal Remote’ on Amazon they will show you that customer also bought batteries.

Upselling is used to sell customers a more superior product, or add value onto the purchase order. Apple are a great example of this, giving their customer the option to add things like memory or better processors for a set price.

Apple upselling example on website

Which technique you decide to use will depend upon your business model and how customers make purchases on your website. Most importantly, cross-selling and upselling should be used on the product pages in order to keep the user in shopping mode. Not on the checkout page when they’re in purchasing mode. Speaking of which…

eCommerce Checkout UX

You’ve managed to get your customer on your website, they’ve added products to their basket from your product pages, now they’re ready to make a purchase. Don’t mess it up now! Thankfully, with this eCommerce UX design guide, you’ll find it pretty hard to.

Don’t Make Them Register

Now this might seem slightly counterintuitive. As a marketer, you want those email addresses and contact details so that you can find out who you’re selling to (or, more likely, market to them later). But people don’t want to be marketed to, and more often than not, just want to make a purchase…

Think about those times you’ve been hungover, buying paracetamol. Your jittering hand just wants to drop a couple of quid and get the hell out of there. You don’t want to tell them your name and email address and create a password for the next time you might want to buy paracetamol, do you? Your customer knows that there’s no need for them to register in order to buy what they want, so don’t make them do it.

 

Boots checkout process for ux design

 

Unless you are selling paracetamol, in which case you will have to get your customers to register.

Cut Those Forms Right Down

Get rid of all those ridiculous form fields. You don’t need their age, their gender, their title. Just take the information that is vitally important. You need a delivery address, their name and their card details.

To make filling in this information even easier, give the customer a checkbox to confirm that the billing address is the same as the delivery address. And whilst we’re at it, give them real-time, inline validation.

If they have entered some data wrong, highlight it immediately, don’t make the customer click confirm then go back through your form all over again.

Inline validation for good eCommerce UX

Source

Put The Blinkers On

Customers are here to make a purchase now. So don’t give them any distractions that might prevent them from doing this. Remove navigation options except the vitally important ones – perhaps to change billing details, or simply to return home – so they don’t find themselves moving away from the eCommerce checkout process. If they are going home, give them the option to save their basket with their email, even if you are using persistent carts.

And draw their eyes down to the next step.

Harrods CTA on checkout page

Here we see Harrods have used their famed rich green to draw the customer down to their next stage in the purchase. We can excuse the use of a title field here to keep up appearances. It’s Harrods after all…

Shipping

Surprise shipping costs are one of the chief reasons customers will abandon carts and leave your checkout. That’s why we suggest you place your shipping options up front on the product page itself. However, here you need to present a precise calculation of the costs and an expected delivery date.

Be as exact as possible and explain what shipping options your clients have. For an example of how not to do this, see below.

Delivery options for eCommerce

Surprisingly the option to collect from the warehouse is more expensive than the other (international) delivery methods combined. Though it doesn’t stop there. When you click on the express delivery box it simply updates your price.

There is no indication of what you are paying for, or what your expected delivery date is. Sure, it’s being taken care of by a third-party company, but your user needs to at least have an idea of what the added cost means.

An additional admin charge of £19.99 is also completely ridiculous and will make customers question your service. I mean, why would it cost twenty pounds for you to not collect your item? And is this on top of the cost of the item itself?

A good shipping section won’t lead your customer to ask any questions, it will lead them to choose the option right for them and move onto the purchase itself.

Put Credit Card Details Last

Entering your details is a fiddly process. You need to have your card out, you need to flip it over and you need to check that everything is entered exactly right or you’re going to have a bad time. That’s why we say put payment details last!

Get all the easy stuff out of the way first. Then when they come to the ‘complicated’ stuff, they’ve already made a commitment that they have to see through. It’s a simple psychological trick, but it works wonders.

Make Them Trust You

You might have one of the most reputable businesses in the world, but when it comes to entering their card details online customers are rightfully cautious. Reassure them that their transaction will be handled safely. Secure the deal with https (people will be looking for it in their URL field), and use images of security badges as a visual aid. Add a link or expandable areas for your privacy policy. Throw everything you can here, because the customer needs to know that you can be trusted with their bank details. This is also increasingly becoming an SEO ranking factor. So just do it!

You really don’t want to let yourself down at this stage by having a dodgy looking couple of fields on a blank page.

SALES!

This is rule 1 of retailing. If you’ve got a sale on, make sure your customers know about it. Even if the price differences aren’t that great, the psychological impact of saving some money makes the customer think that they have the upper hand.

UX Design for Sales

The eCommerce UX Design Checklist

In short, here are our eCommerce UX design recommendations:

  • Evaluate your business and your company first before you begin any design work. Understand how you operate and how your eCommerce store can integrate with your current activities.
  • Investigate who your competition is and understand where they are winning and where you are losing. Focusing on your weaknesses will yield the best results.
  • Develop client personas in order to best understand what your customers are looking for. This will inform how you design your store.
  • Your homepage needs to be simple and straight to the point. Include your value proposition and easy to use navigation tools.
  • Where relevant use qualifiers to support your business.
  • Give your users links to additional information that will help them down the buying cycle. Don’t distract them with noise.
  • Use your footer to give all relevant links that the user might need.
  • Contact options need to be prominently displayed, not only so customers can contact you, but so that they know they can contact you if necessary.
  • For your product pages, make sure you use striking but life-like imagery.
  • Give all the product specs, colour options and delivery and returns options on this page.
  • Use upselling and cross-selling (depending on how your business operates) in order to boost average order value.
  • Remove any extraneous steps or fields to your eCommerce checkout process. Make sure that the user can’t be distracted from what they’re doing here.
  • Don’t announce a sudden delivery charge!
  • Make sure the search bar is omnipresent on your website.
  • Don’t over categorise your products. Use filters instead!
  • If you’re holding a sale, make sure that it’s prominently located on your website.

As we strive to create the ultimate guide to UX design for eCommerce, we will be coming back to this page to update regularly. Subscribe to our mailing list if you want to be kept up to date!

Like our eCommerce UX design guide? Subscribe for more!

by:

Philip Likos-Corbett

Information Architect

The smartest, best looking and most captivating guy at Spot Studio, Philip also writes these biographies.