{"id":156,"date":"2021-06-01T22:11:50","date_gmt":"2021-06-01T22:11:50","guid":{"rendered":"https:\/\/clarity.microsoft.com\/blog\/?p=156"},"modified":"2025-07-30T08:30:34","modified_gmt":"2025-07-30T15:30:34","slug":"streamline-your-purchase-funnel-with-clarity","status":"publish","type":"post","link":"https:\/\/clarity.microsoft.com\/blog\/streamline-your-purchase-funnel-with-clarity\/","title":{"rendered":"Purchase funnel – streamline with Clarity"},"content":{"rendered":"\n

Since the launch of Clarity last year we have successfully onboarded thousands of online businesses from small stores to major retailers. During this time we have noticed that some sites are better at sales conversion than others thanks to their purchase funnel. <\/p>\n\n\n\n\n\n\n\n

From this learning, we have identified many ways that you can optimize the design of your online store to streamline your purchase funnel. Every minor improvement that impacts your customer adds up, with no change being too small when it comes to streamlining your purchase funnel and boosting conversion.<\/p>\n\n\n\n

<\/a>Try it out today<\/a> and optimize your purchase funnel!<\/h3>\n\n\n\n

Your purchase funnel<\/h2>\n\n\n\n

Barriers to entry on your virtual store are a lot lower than a physical store however, conversion rates are also lower as it is just as easy to leave. In addition to this, customers visiting your online store can be easily distracted often doing multiple tasks whilst browsing. Without a doubt, this distraction and ability to leave easily gives sales conversion rates at around 2-3%, and on smartphones, it is even lower. As a result of our analysis, we have seen conversion rates for online stores vary from under 1% to as high as 8%.<\/p>\n\n\n\n

A well-designed site lets visitors pass through the purchase funnel smoothly and complete the transaction quickly. Optimizing the design of your online store, especially the purchase funnel is vital. Therefore it can have a significant impact on your bottom line.<\/p>\n\n\n\n

Product page – the start of the purchase funnel<\/h2>\n\n\n\n

Product pages are found at the beginning of the funnel. A good product page needs to provide information about the product, images, specifications, and reviews. It should easily allow the user to add the product they are currently viewing to their cart or shopping bag.<\/p>\n\n\n\n

Unfortunately, product pages contain a lot of information and so they can often be overwhelming and distracting. Remember that a good product page is designed with the end goal in mind. This should be to encourage the user to take that next step and add it to the cart. At the same time showing relevant product information, even on smaller form factors like smartphones.<\/p>\n\n\n\n

Additionally, users need to select the right size, and, the product color before they add it to their cart. A well-designed product page makes it very easy to select the right product features.<\/p>\n\n\n\n

Below we compare the bad vs good examples of product pages (curated from real online stores on clarity).<\/p>\n\n\n\n

The right size<\/h3>\n\n\n\n
\n

Bad Example<\/h4>\n\n\n\n
\"\"
Size selection is very subtle with a low-contrast border around the selected size that is hardly visible.<\/em><\/figcaption><\/figure>\n\n\n\n

Good Example<\/h4>\n\n\n\n
\"\"
Size selection is clear, leaving no doubt which size is selected here.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n\n\n\n

The color trap<\/h3>\n\n\n\n
\n

Bad Example<\/h4>\n\n\n\n
\"\"
Multiple clicks on the color palette because the product image does not change. The user thinks the selection has not happened even though they have selected the burgundy color.<\/em><\/figcaption><\/figure>\n\n\n\n

Good Example<\/h4>\n\n\n\n
\"\"
The selected<\/em> color matches the product image, with no unnecessary clicks on the color palette.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n\n\n\n

The right quantity<\/h3>\n\n\n\n
\n

Bad Example<\/h4>\n\n\n\n
\"\"
Multiple clicks are needed to increase the quantity, especially prevalent in grocery store sites.<\/em><\/figcaption><\/figure>\n\n\n\n

Good Example<\/h4>\n\n\n\n
\"\"
User can select their desired quantity of orders of the same product with just two clicks.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n\n\n\n

The cart page<\/h2>\n\n\n\n

The cart page is where a user can see all the products they have selected for purchase.<\/p>\n\n\n\n

A cart page should make it clear to the user what the next step is: checkout (ideally above the fold). Users are usually distracted when doing things online and your cart page should be clear and deliberate. It should not take attention away from the purchase.  <\/p>\n\n\n\n

 Avoid any links and information that don\u2019t lead the user to the goal of proceeding to the checkout phase of the purchase funnel.<\/p>\n\n\n\n

We have seen many sites with lots of dead clicks on their cart pages. This happens when the user clicks on an item that is already in the cart. We surmise that after adding the product to the cart, some users want to go back to the product page to learn more about it, change color\/size or continue shipping.<\/p>\n\n\n\n

It should be straightforward for users to increase the quantity and a well-built cart should have simple controls. They should let you change the quantity without having to return to the product page.<\/p>\n\n\n\n

\n

Bad Example<\/h4>\n\n\n\n
\"\"
Crowded page with multiple distractions. For example, a discount offer (not clickable), international vs standard checkout, a live chat bubble, a product up-sell, and so on. The item in the cart is not clickable (leads to dead clicks).<\/em><\/figcaption><\/figure>\n\n\n\n

Good Example<\/h4>\n\n\n\n
\"\"
Uncluttered text with a clear CTA<\/a> (call-to-action). Easy checkout and a click on the item take the user to the product page.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n\n\n\n

Checkout page<\/h2>\n\n\n\n

Checkout pages arguably have the most friction of any page on an online store. This is where the customer needs to provide a lot of information and as we all know filling out forms online is one of the most painful experiences on the web, especially on smartphones.<\/p>\n\n\n\n

The majority of sales at an online store are made by first-time users providing a lot of information about themselves before the purchase is complete. Each new field creates an opportunity for the wrong information to be entered with errors needing correction before the user can move forward. Consequently, the best-designed checkout pages ask the user for information that is essential for completing the purchase and nothing more. When errors occur, clear messaging directs the user\u2019s attention to the information that was skipped or needs to be corrected.<\/p>\n\n\n\n

\n

Bad Example<\/h4>\n\n\n\n
\"\"
A text validation error is difficult to see. Users on smaller screens have to scroll up to see what field they need to fix.<\/em><\/figcaption><\/figure>\n\n\n\n

Good Example<\/h4>\n\n\n\n
\"\"
A friendly error message on top of the Continue to Shipping button tells the user where and why the error occurred.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n\n\n\n

How to use Clarity to streamline your purchase funnel<\/h2>\n\n\n\n

We recommend that you begin by identifying the steps that make up the purchase funnel on your site. Clarity\u2019s filters pane can help you isolate user sessions that reached a particular step in your purchase funnel. The following image shows how you can use the filters page to only see the insights and playbacks for all sessions where the user visited the cart page and came to your site from Facebook using an iOS tablet.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once the dashboard has been filtered down to a session(s) that include a specific page in the purchase funnel, you can find many signals that can be used to identify friction in the purchase funnel. The following figure shows common signals to look out for when identifying friction in the purchase funnel. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n