The ecommerce experience funnel
In the world of ecommerce there are lots of funnels to be found — try Googling it, you’ll see what I mean:
Mostly marketing
These diagrams aim to explain the process that users go through to reach purchase. Metrics can then be assigned to them to determine how successful a process it is. They’re known as funnels because there are always more people at the top tapering off to the few that purchase at the bottom.
However the majority of funnels out there are related to marketing or the discovery journey. They often use quite vague language like ‘awareness’, ‘consideration’, ‘prospects’, etc. This might well be how the user is thinking but I prefer terms that relate to concrete actions that a user takes, which is much more useful for designing.
Another problem is that in a lot of these funnels the website isn’t accurately represented: they are usually missing at least one step that users go through. If you just have a funnel that tracks website visits and then basket additions, you’ll fail to learn whether it was the landing page, the listings page, or the product page that has the biggest room for improvement.
Ecommerce websites actually lend themselves to a funnel as the steps a user must go through are pretty fixed. As a result this is a structure the vast majority of ecommerce websites use (whether they know it or not).
For whatever reason an ecommerce website *experience* funnel is not one you find out there very often. To remedy that, here’s my simple funnel expression of how ecommerce websites are constructed and the requirements at each step so users will convert.
The funnel
This structure consists of pages that are found in almost all ecommerce sites. Even if you have nothing else on your site, with these four page templates you should be able to make sales.
I’ll now take you through those stages of the ecommerce experience funnel—you can jump to the part of the article to read more about what’s required to make a success of each of them:
Landing
The landing pages are the equivalent of the shop window in a physical store and the job here is to show users what the site offers and encourage them to ‘enter the store’. It should also explain how it differs from other sites out there. Most users will arrive here.
Read more about landing pages.
Listings
This is similar to the inside layout of the store and the job here is to help users compare different options to find something they want to buy, often by splitting products up into categories. You might need filters to help them do this.
Product
The product pages do the job of a product’s packaging in a real-life store. It needs to show off the thing despite you not being able to see it. It also must convey all the details and information a user needs to know to be confident in making a purchase.
Read more about product pages.
Checkout
This is where the user comes to purchase and often organise delivery (often this step will begin with a basket). It’s a somewhat standardised process so there are conventions to learn but also things you can do to make it quick and convenient to pay.
Not all sites will require every step of the funnel. For example, if you’re selling a single product then it’s possible to just have a product page without landing or listings. And if you’re only selling a few products you probably don’t need the listings filtering functionality.
Read on to go through the funnel step by step and be sure to check out the range of informative links too.
Landing pages
In reality any page can be a landing page, as in web analytics terms it simply describes the location that users enter the site. However most websites create pages specifically designed for a user’s introductory experience. In ecommerce it’s no different and that’s the type we’ll be focussing on here.
A good site thinks about where the users are coming from and presents them with a page that recognises they will have a few key questions that need answering. In the early days of a website the homepage will be the dominant landing page for the majority of users.
As websites grow and marketing effort intensifies it becomes useful to have specific landing pages for certain campaigns. This is particularly important for paid search where the page and headings need to match the keywords that people have been searching for, or users won’t think the content is relevant for their needs.
Be it a homepage or a campaign landing page, the requirements are the same.
Requirements
As this represents the top of your funnel — in traditional retail terms think of it as your shop window — you need to consider the first impression you give of your website and company.
You need to tell people what you offer and why you’re different and you need to do it quickly. New users are fast to bounce if they don’t see the benefit of what you offer: very few people have the patience to hang around when they don’t immediately understand it.
In particular they need to understand how buying from you is better than buying something similar from a site like Amazon, where they probably already have an account. Their commitment to you is low at this stage.
You also need to show and prove to your users that you are of sufficient quality to be trusted. Only the companies with big marketing budgets and well-established brands can dodge this requirement.
Success
Landing pages have a very clear metric for success. They succeed by pushing people deeper into the site, usually onto listings pages, so this is the main conversion rate to watch.
Pretty much any other metric is a distraction. A low bounce rate is good for all landing pages as you don’t want users leaving but this comes second to users going to the next step in your funnel. Having a clarity of purpose makes designing easier as everything you do can be measured against a goal.
Having a clarity of purpose makes designing easier as everything you do can be measured against a goal. It means the link or button to search should be visually obvious.
The concept of attention ratio is useful here too. This ratio is defined by the number of links on the page against the number of primary actions you want them to take (which should always be one). An ideal page would have a ratio of 1:1 (one page with one link to the goal). Practical considerations mean you’ll almost certainly need a few more links, but the aim should be to keep that ratio as close to 1:1 as possible.
If you’re getting to a ratio of 30:1 or 40:1 this means there is big room for improvement. All these extra links are distractions from the main thing you want users to do, and add cognitive load to their visit.
Listings
The listings page is where users come to look through the products you have for sale. These pages are sometimes referred to as category pages, as this is where products are displayed by category, or search pages when users have entered specific search terms. Despite the possibility for different names they look very similar and mainly display a list of products.
If you’ve taken your users from your landing pages to this point then they should understand who you are and should be interested in what you’re selling. Now they want to see the actual options for meeting their needs in your product range. This usually means sifting through lots of options with the help of a set of filters to narrow things down.
They will use this page to get a sense of the products you sell by judging them en masse — for example the range of prices available. They will also look at products individually to understand how they differ from each other.
Requirements
The core things you need for almost all products are name, price, images, and an indication of product variations (like size and colour). You may need more than this if your product is more complex but each product should be presented consistently so it is easy to scan down the page and find information.
What other elements you require on your listings page will depend on what you’re selling and your audience. Consider what information is needed to give users enough detail to differentiate and choose a product.
Are you selling something that is expensive, featuring locations or impressive detail? Then photography will be an important part of your offering. Are you selling something more functional like cleaning products or computer parts? In this case what the product looks like matters less compared to how it performs, making it a more rational purchasing decision, so focussing on product data makes more sense.
This stage of the funnel is about helping users find the right product, and as humans we are limited in how much information we can store in our head at any one time. If your site is small (with around 10–20 products) then you may not need filters and search fields, but they become more important the bigger a website gets. The more products you have, the more filters you will need to help people whittle things down.
Success
A listings page is successful if it moves users onto the product page, so this is your core conversion rate to watch. There’s a bit more nuance to this as you want users to go to a product they might actually buy. This can be a fiddly thing to understand but a high number of listings page views per session in your web analytics could be a clue to look at this further.
If the user is viewing the listings page a lot it might be because they keep going to products that aren’t right for them and then returning to listings. This suggests the listings aren’t explaining product differences very well. This might be backed up by a lower time on page for products compared to listings, which isn’t what you’d normally expect.
To find out the truth you’ll need to dig into more qualitative data to see how users are actually behaving on the page. Research such as visitor recordings and user testing will help you with this. It’s always a good idea to get a sense of how your users think and what motivates them towards making purchases.
Product pages
The product page is where all the details about an individual product live. It doesn’t matter whether your ecommerce site sells physical items or experiences, they can be considered products as long as they have attributes to be shown and described. The product page performs a similar role to packaging where the customer can’t see or touch the actual item but still wants to understand both the specifications and what it looks like.
I would argue that this is the most important step in the ecommerce funnel, because it has to convince users to buy. It’s probably where the user will spend most of their time considering the purchase. A good product page can also be found directly via social media, email, or by getting to the top of Google search results.
Requirements
When shopping, whether consciously or not, the user will cycle through three different modes of thought before making a purchase, and the product page must solve for each of them. I categorise these modes as dreams, realities, and fears. Not all products require the user to consider all three but the more expensive and complex the product, the more all of them will be needed.
Dreams
The dreams phase is the first stage and it is where the user needs to feel excited about what is being offered. You should appeal to their senses and get the user to *want* to buy the product. Without this they won’t make the effort to dig into the details of the item.
Ideally the user should see themselves owning or experiencing the product and the benefits it will bring them. Elements that promote this should appear obviously on the page (often near the top). This is typically done through the likes of high resolution photos, videos of products in action, or carefully written descriptions.
This stage may not apply much to practical or technical items (e.g. cleaning products, DIY materials) but for almost everything else it is important. Done well, this will elevate your site above others selling similar products.
Realities
The details section follows the user’s excitement about the product on offer and helps get them into thinking about the practicalities of making the purchase. The user now starts to get rational and consider whether the item meets all their needs.
Things like feature lists and specifications will help the user reach a decision. It could be clothing coming in the right fit; food being ethically sourced; hotels having a pool or gym; or a car having the right colour options. Every product requires this kind of information or it is incomplete and some have details that are bespoke.
For all products the most important of these realities is whether it comes in at the right price. This is where most of the contemplating takes place and will determine whether this item is the right choice for the user.
Fears
This is about allaying the users’ fears and it is more important the more money a user is spending. This is where they need to be reassured that the product does what it claims and that the website isn’t exaggerating.
The website can provide a lot of information here but it’s also helpful for a user to consult others’ experiences. As well as things like FAQs, shipping information, and returns or cancellation policies, you can assist by displaying customer reviews and ratings for the product. All products require some level of information here but it particularly matters the first time a user purchases from a site.
Success
The ultimate success metric is whether users click that ‘buy now’ or ‘add to basket’ button. For expensive products you should see your page as a source of leads (where users go on to purchase later) as much as instant purchases.
This page must work for users who are immediately ready to buy as well as those who want to study every detail before making a purchase (any store will get a mix of these users). It is by organising your information into clear sections you can allow the confident buyers to scan quickly through, or the more meticulous to dig into the details.
Checkout
The checkout flow is the sharp end of the ecommerce funnel: if the user has got this far then they have shown that they are very keen on what you’re selling and are ready to make a purchase. The checkout is the functional step of getting the requisite information to make that happen.
It’s often the most formulaic part of the site and as a result it is an area where you can find a lot of design advice. Despite this, plenty of mistakes still get made by companies: according to ecommerce specialists the Baymard Institute, 70% of users still abandon their baskets (combined from 40 studies, as of early 2019).
Checkout flows are essentially about form-filling and users often find this dull. As a result they don’t pay too much attention and are prone to making mistakes. Whatever you can do to make this easier and more reassuring is valuable here.
Requirements
There are really only four potential sections to a checkout flow. You may not need all of them but you shouldn’t need any more than this. These four are the basket or product customisations; delivery information; billing information; and payment details. These steps could be separate pages or they could just be sections on a single page, as long as they are split out so it is clear for the user what is required at each point.
1a. Basket
When a user can buy multiple products on your website at once then you’ll require some kind of basket functionality to contain the products they want to buy. This should also give at least an estimate of shipping cost.
1b. Product customisations
If you don’t have a basket then you’re likely to have a product customisation section, which tends to only exist on more complex services or experiences. Examples are seat selections for trains and planes or booking add-on services. These should come first in the checkout, as they are likely to relate to the product page that the user has just been looking at, so it naturally continues that journey. This way you ease the user into the checkout flow and get them to build their commitment to buying by making the product more personal.
2. Delivery information
If you will be sending items to customers you’ll require the user to choose which delivery service they want, an address to deliver to, and probably a phone number for delivery drivers to contact. It’s important to show this near the start as it could alter the price and you want to allow users to see this early rather than spring it on them at the end. In addition if a user is keen to get something by a certain date they’ll want to find out quickly if this is possible.
3. Billing information
Billing information is a step which is going to be required by almost all sites as it checks payment card details match the person paying. It is required by most payment providers, and usually means a name and address (you can speed up this step by asking the user if it’s the same as the delivery one, which it often is). You should ask for an email address by this point so you can contact them about their order — and if it’s a digital product, this will form the delivery mechanism.
4. Payment details
Finally we reach the payment details, which is a step every flow must have. Here users enter their all-important card details, or choose a payment wallet (sometimes this can be entered earlier to encompass other steps). This usually comes last in the flow because it involves a third party provider and you’ll want to be sure you’ve collected everything you need first before sending users to them.
Success
The linear nature of a checkout flow means there’s a clear metric as to whether something has succeeds or not: either the user proceeds to the next step and ultimately pays or they don’t. This makes it easy to monitor the data and see whether it is working. You should have a funnel measuring how successful these steps are and the one with the lowest conversion is your first port of call to improve.
It is often worth starting all of your website improvements here. It should be easier to get someone who has entered the checkout flow to convert, over someone who has just landed on your site.
The checkout flow is one step in the ecommerce chain whose days may be numbered — certainly in the sense of having a custom one for every store. With the convenience of payment wallets on mobile like Apple and Android Pay containing all of a user’s details, they can just pay with a fingerprint (or a face).
If you’re going build a direct relationship with your customers, then your checkout will have to be super-smooth and easy to use to compete against the massive convenience of single-tap payments.
Want more?
I hope you’ve found this guide to the ecommerce funnel useful, if you want more ecommerce UX design advice then take a look at my book Designing Ecommerce Websites.
