Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Improving The Online Shopping Experience, Part 2: Guiding Customers Through The Buying Process

Part 1 of “Improving the Online Shopping Experience”1 focused on the upper part of the purchase funnel and on ways to get customers to your website and to find your products. Today, we move down the funnel, looking at ways to enable customers to make the decision to buy and to guide them through the check-out process.

The purchase funnel and ways to improve the online experience2
Ways to improve the online shopping experience and to reduce the drop in the purchase funnel. Part 1 covered points 1 to 3.

Enable The Customer To Decide Link

Inform and reinforce the customer’s buying decisions by offering in-depth product information. The content on product pages should be relevant and should give the customer a virtual feel for the product. Ensure that your website addresses the key elements of a product page, listed below.

  • Product name
    Product names should contain relevant keywords to help customers find and identify the right product. For a product such as a book, information about the author and edition is required.
  • Images
    Use clear product images, with alternate views. Where appropriate, allow customers to zoom in, see different color swatches, or spin the product around with a 360° view. The product page for a book could get away with an image or two, but apparel should offer most of these options.
  • Video
    Static images are not always sufficient to present a product. Video is a good way to showcase complex products that need detailed explanation or a “how to” demonstration.
  • Pricing and availability
    Clearly list the price and availability. When products have variations (for example, different capacities for a hard drive, or different colors for shoes), make it easy for users to identify size and color combinations that are in stock (see the screenshot for Kohl’s below). And provide sizing charts to avoid surprises and returns later. If your business also has brick-and-mortar stores, allow users to check in-store availability online.
  • Description
    Give customers a clear understanding of your products by providing detailed descriptions, with text and multimedia. Descriptions should be simple, clear and jargon-free. Consider tablet and mobile users by providing alternatives to Flash and Java content, and don’t require mouse hovering to access essential information.
  • Customer ratings and reviews
    Unbiased and unedited ratings and reviews by customers will help visitors make up their minds about products that they may not be familiar with (for example, customer reviews suggesting to buy half a shoe size larger for a better fit will help others not make the same mistake). Many users look up ratings and reviews when they are in stores, not only at their desk, so make ratings and reviews easily accessible from mobile devices.
  • Suggestions of related products
    These could be complementary products (for example, a USB power adapter when the customer is buying an iPod Touch), alternative products (different styles, models or versions) or recommendations based on other people’s purchases (“Customers who bought this also bought…”). Whatever their nature, they should be relevant and valuable to the user, not just an attempt to sell more.
  • Tools
    Give users ways to save and share pages on the website. Businesses commonly do this through wish lists, “Email this page” features, and social sharing and bookmarking. Speaking of social, companies such as (see screenshot below) and Wet Seal are experimenting with social shopping, allowing users to shop with their Facebook friends.
  • Contact information
    Make it easy for customers to reach you when they need help.
  • “Add to cart”
    Last but not least, make the call to action clear and prominent3, to ensure that customers know how to check out.

Key product page elements highlighted on Zappos4
The key elements of product pages on are highlighted.

Kohl’s offers a visual way to identify color and size combinations that are in stock
Kohl’s offers a visual way to identify color and size combinations that are in stock.

Social shopping on Buy.com5
Social shopping on includes: (1) friends who are currently shopping together, (2) a chat window.

Reduce Shopping-Cart Abandonment Link

Customers abandon their shopping carts for numerous reasons, many of which can be prevented by improving the experience.

  • Make the shopping cart always visible and accessible, and display a summary of items in the cart, keeping check-out a click away. As basic as this sounds, some websites still don’t enable customers to get to their shopping cart without adding something else to their order.
    Deal Genius offers no visible way to get to one’s shopping cart.
  • A persistent shopping cart is important. Users who leave the website without completing their purchase should see their items in the cart when they return. If the user is logged in, the cart should also persist across devices, allowing them to seamlessly continue shopping anywhere and anytime.
  • Using the customer’s address or ZIP code, show taxes, shipping options and costs, delivery estimates, and the total cost, thus avoiding last-minute “cart shock.”
  • Give users the ability to update their shopping cart without having to go back to the product page.
  • If you offer promotional discounts or coupons, give users the option to redeem them without making others feel like they are missing out on savings. Let users know how they can get these discounts (“Sign up for our weekly newsletter to get a discount on your next purchase!”).
  • Offer contextual support to answer questions that shoppers may have regarding when their items will arrive, your return policy, and how to contact live help through a phone number, call-back or chat. Display this information in a sidebar, on the shopping-cart page or in a small pop-up window, so that users do not lose the context of where they are.
    OfficeDepot shopping cart7
    Office Depot’s shopping cart features: (1) a persistent shopping cart, which shows the total cost and expands on hover to show its items; (2) the estimated total; (3) options to update the cart; (4) discounts, if applicable; (5) help options.

Keep Registration Short And Optional Link

Make the registration process optional and short; forcing registration is one of the main reasons why users don’t complete purchases. If you still need convincing, “The $300 Million Button8” should drive the point home.

  • When the check-out process starts, allow registered customers to log in, and provide easy ways for them to recover forgotten account information.
  • Allow new customers to check out without registering. At the end of the check-out process, give them the option to register and save their information for future use. By this time, they will be motivated to simply create a password in order to avoid typing all of that information the next time.
    Simple checkout options at, new users have the option of registering after checkout9
    Sears has simple check-out options, allowing new users to register after checking out.
  • Simplify and minimize the information required during the check-out and registration processes, by logically grouping the most important information first, and putting optional information towards the end. Some retailers, like Adorama, have got their check-out process down to one page.

Streamline Check-Out Link

Streamline the check-out process with relevant recommendations, a progress indicator, an order summary and confirmation.

  • Relevant recommendations can be a valuable reminder to customers as they check out. Like product suggestions, recommendations at check-out should be relevant and useful to the customer, instead of a way to try to sell anything and everything. Buying the same noise-cancelling headphones from and Amazon resulted in very different recommendations, as shown below.
    Very different recommendations from (above) and (lower)10
    Very different recommendations from (above) and Amazon (below).
  • “Enclose” the check-out process11 by removing the header, navigation and footer. This will minimize distractions and guide the customer through the last few steps to complete their purchase.
  • Use a progress indicator to show customers where they are in the process. “Three steps completed. Just one more to go!”
  • Give users a choice of payment methods. If users prefer not to give their credit-card information, allow them to pay by PayPal, Google Checkout or another trusted local payment option. Make sure the third party displays the total amount to be charged before asking for any payment information.
  • Link to your policies in context: link to the privacy policy when asking for an email address, and a link to the security policy near the credit-card fields. This relieves users from having to hunt for these policies and also instills confidence.
  • When displaying the summary page of their order, allow customers to verify (and change, if necessary) the details before confirming the order. This is also a good place to restate the estimated delivery dates so that they can change the shipping method if desired.
  • The final call to action that directs users to complete their purchase (“Place order”) should be prominent. Don’t lose customers at this stage by presenting other options to them.
    Streamlined single page checkout at Adorama12
    The check-out process on Adorama has been streamlined to a single page: (1) progress indicator; (2) multiple payment options; (3) contextual policies; (4) option to make changes; (5) prominent final call to action.
  • Once the order has been placed, display a confirmation page, with the order number, saving and printing functionality, and a summary of the customer’s next steps or options. The order confirmation page for Shutterfly, a photo publishing website, not only tells users what their next steps are, but also displays timelines for the fulfillment of their order and contextual links to the next steps.
    Shutterfly’s order confirmation informs users what to expect next, with contextual links13
    Shutterfly’s order confirmation page informs users what to expect next, using contextual links.
  • If your website allows new customers to check out without registering (as suggested above), then that would be a good time to ask them whether they would like to select a password to create an account and save their information for next time. Highlight some of the benefits of creating an account, so that registering at this stage becomes a no-brainer.

Take Action Link

Congratulations on making it through the 50 techniques in this two-part series. But this is just the beginning. If you kept your users in mind as you read through this article, you may have already identified areas in your online shopping experience that could be improved. Some of these, like presenting contextual links, are quick fixes, while others, like improving findability, will take weeks or months to implement.

When making changes, measure the impact of the changes14 using analytics, multivariate or A/B testing, and usability testing (see the further reading below). Improving the online shopping experience not only will make it easier for users and satisfy them more, but will increase your bottom line!

Further Reading Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18

↑ Back to top Tweet itShare on Facebook

Lyndon Cerejo is a certified user experience strategist in Capgemini's Rapid Design & Visualization practice, with a successful track record with clients including Allstate, American Express, Coca-Cola, General Motors, Merrill Lynch, and Wal-Mart. His key areas of expertise are user experience analysis, information architecture, rapid prototyping, usability testing, online strategy & marketing. He is the co-author of - a book about marketing adaptations on the Internet.

  1. 1

    Is there a pdf version of this, that I can download? I find it interesting and resourceful when designing website for online shopping. It can be a bit tricky figuring out where certain elements should be to form a hierarchal visual, and the viewer/shopper not losing any interest….and losing that sale.

  2. 2

    Brandon Holliday

    September 22, 2011 7:24 am

    Great article. I’m really enjoying this series of articles. I’m currently working on a large-scale ecommerce project and UX techniques that have been featured are a great guide and reference.

  3. 3

    Design Automaton

    September 22, 2011 5:26 pm

    I am having the alot of problems with getting a client to understand this. I am printing this out for him to see very soon, the sooner the better. Cheers!

  4. 4

    Great article. I agree with all these recommendations but I would like to point out that you should consider your target audience and test your implementation before adopting any of these techniques. I recently built a website targeted towards professional adults aged 35 – 60. We included a progress indicator bar during the checkout process. When we did testing we found that users tried to click on the progress indicator to ‘skip ahead’. Some were frustrated when nothing happened when they clicked on the bar. We were shocked by this result. We redesigned the indicator multiple times and retested only to get the same result. Finally we settled on a text version that simply says something like ‘Step 1 of 3: Shipping Address’ etc. For our audience this turned out to be the best solution. The point is that while all these recommendations are good they are not absolute rules to live by.

    • 5

      Zach, that’s a great example! The start of Part 1 and the end of Part 2 point out that these techniques and guidelines should be considered hand in hand with a good understanding of your users and their goals, and any changes made should be validated using different forms of testing.

  5. 6

    I rarely find ecommerce articles where I agree with every letter. However, this is one of them. Thanks for this great article!

  6. 7

    thank you so much for this article!
    as a visual designer I often forget how important it is for a website to be organized and structured in a way for the target audience (customers) to access the information they need fast and easily. It is true that there are many websites that lack these essential factor. These two part articles are definitely a guideline all the designer should follow and take note of

    • 8

      Good video. But you sound very bitetr about the fact that you had to read from the site.

  7. 9

    I think this entire post would be perfect as a short “info piece” or white paper maybe that a UX firm could use on their website. I’m hoping most/all UX designers are aware of those simple, yet forgotten, pieces of the puzzle, but I think it’d nicely serve potential customers and allow them to see what they’re missing and why those pieces are important and essentially, why UX expertise can help. It’s a very easy read and anyone without UX expertise can understand it. Nice follow-up Lyndon.

    Kadee Gray

  8. 10

    Agreed nice follow up

  9. 11

    Nice article! Thanks

  10. 12

    Well the process is already quite straight forward this could enhance it somewhat. I remember learning the Gemini C Group strategy a couple years ago in my graduate webeconmics class and I though that it was relevant. Theoretical at the time and never applied but it was relevant this does kind of touch up on that.

  11. 13

    offering signup to newsletters in the checkout with examples? really? lets promote abandonment.

    • 14

      Josh, take a look at how OfficeMax handles it ( They key to avoid abandonment is to remove distractions and keep the user in the process – and in the example, could be as simple as an opt-in option near the coupon field.

    • 15

      Josh, take a look at how OfficeMax handles it (see their cart). They key to avoid abandonment is to remove distractions and keep the user in the process – and in the example, could be as simple as an opt-in option near the coupon field.
      (for some reason, my earlier reply did not show up)

      • 16

        I was cneikchg around your site and noticed broken links. You might want to change it.

      • 17

        Hi Terry, Thanks for your comnemt. I wasn’t aware of WP Online Store, but now it’s included in the list above.

  12. 18

    I really enjoyed the purchase funnel and the breakdown of the steps. I found another interesting article that talks about educating your customers on what they need to know when starting an e-commerce site

  13. 19

    Thank you so much so useful you must have been thinking of me when you wrote this xx

  14. 20

    Sarah BA English Literature

    September 28, 2011 9:07 am

    A hassle-free and/or optional registration process is so key. Online shopping still has this volatile stigma of distrust ( though it’s slowly subsiding), and sharing personal information along with the commitment of another username/password to remember can make potential customers anxious.
    I love the idea of paring the registration process down to one page. Design is important here, too. Boost customer confidence with security symbols on the page. They should feel they’ve been directed to a safe place to store their personal information online.

  15. 21

    with most eCommerce platform the organisation of its content is generally good, it where designers try and do too much, keeping a shop streamline is probably the most important area to consider, as well as your checkout working, that helps!

    • 22

      josh September 25th, 2011 10:09 pm ofnerifg signup to newsletters in the checkout with examples? really? lets promote abandonment.

  16. 23

↑ Back to top