Improving The Online Shopping Experience, Part 2: Guiding Customers Through The Buying Process
Part 1 of “Improving the Online Shopping Experience” 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.

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
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 Buy.com (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 prominent, to ensure that customers know how to check out.

The key elements of product pages on Zappos.com are highlighted.

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

Social shopping on Buy.com includes: (1) friends who are currently shopping together, (2) a chat window.
Reduce Shopping-Cart Abandonment
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.

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
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 Button” 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.

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
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 Buy.com and Amazon resulted in very different recommendations, as shown below.

Very different recommendations from Buy.com (above) and Amazon (below). - “Enclose” the check-out process 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.

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 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
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 changes 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
- Web Form Design: Filling in the Blanks, Luke Wroblewski
- “Stopping Shopping-Cart Abandonment,” Erin Jo Richey, UX Booth
- “Multivariate Testing 101: A Scientific Method of Optimizing Design,” Paras Chopra, Smashing Magazine
- “The Ultimate Guide to A/B Testing,” Paras Chopra, Smashing Magazine
(al)





Glenn Saladaga
September 22nd, 2011 7:09 amIs 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.
Brandon Holliday
September 22nd, 2011 7:24 amGreat 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.
Design Automaton
September 22nd, 2011 5:26 pmI 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!
Zach
September 22nd, 2011 9:09 pmGreat 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.
Lyndon Cerejo
September 23rd, 2011 5:10 amZach, 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.
Michel H
September 23rd, 2011 1:49 amI rarely find ecommerce articles where I agree with every letter. However, this is one of them. Thanks for this great article!
Sojin
September 23rd, 2011 7:14 amthank 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
Jihane
February 13th, 2012 8:38 pmGood video. But you sound very bitetr about the fact that you had to read from the site.
Kadee
September 23rd, 2011 11:00 amI 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
@produxs
Sean Roberts
September 23rd, 2011 7:05 pmAgreed nice follow up
Marco
September 24th, 2011 3:43 amNice article! Thanks
Ericka
September 24th, 2011 4:38 amWell 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.
josh
September 25th, 2011 10:09 pmoffering signup to newsletters in the checkout with examples? really? lets promote abandonment.
Lyndon Cerejo
September 26th, 2011 4:22 amJosh, take a look at how OfficeMax handles it (https://www.officemax.com/cart/cart.jsp). 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.
Lyndon Cerejo
September 26th, 2011 5:44 amJosh, 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)
Federiko
February 11th, 2012 4:10 pmI was cneikchg around your site and noticed broken links. You might want to change it.
Victoria
February 13th, 2012 6:20 pmHi Terry, Thanks for your comnemt. I wasn’t aware of WP Online Store, but now it’s included in the list above.
JR
September 26th, 2011 7:10 pmI 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 back40design.com/news/m.blog/22/credit-card-transactions-and-e-commerce-what-do-i-need-to-get-started
Sarah BA English Literature
September 28th, 2011 9:07 amA 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.
Susann
September 28th, 2011 3:03 pmThank you so much so useful you must have been thinking of me when you wrote this xx
Richard Ball
October 20th, 2011 3:24 pmwith 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!
Giselly
February 10th, 2012 11:11 pmjosh September 25th, 2011 10:09 pm ofnerifg signup to newsletters in the checkout with examples? really? lets promote abandonment.
Anu
October 27th, 2011 4:18 pmMay I suggest including these in the related reading links:
http://uxdesign.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/
http://uxdesign.smashingmagazine.com/2009/05/28/12-tips-for-designing-an-excellent-checkout-process/
Thanks @smashingmag :)