Blog

5 Ways to Highlight Shipping for a Better E-commerce User Experience

Tags:

YvonneBlogPost_51315

Shipping is a big part of the online shopping experience – after all, it’s how the product gets from the screen into the customer’s home – and yet it’s an element that can feel out of our control as shoppers. As we design e-commerce websites, we must do what we can to address shipping concerns and make the online shopping experience as smooth as possible.

1. Showcase shipping benefits in different places.

Free shipping – if you’ve got it, flaunt it. According to this study, shoppers spend on average 30% more when free shipping is included. You want to make sure shoppers know about any shipping benefits such as free shipping with minimum order amount or low flat rate shipping, as it plays a key role in their decision to purchase from this store and can encourage shoppers to add more items to meet the minimum. It’s good practice to display any shipping benefits wherever shoppers will be looking most, such as next to the navigation or search bar, or next to prices and Add to Cart buttons.

Zappos-header
Reebok-header
Asos header
Many e-commerce sites, such as these examples from Zappos, Reebok, and Asos showcase their shipping policies in their headers.
Shoebuy-listing-page
In this category page on Shoebuy.com, each item is listed with free shipping and when each item will ship out – before you even click into the product page.
Everlane Free Shiping example
Everlane’s product page includes “Free shipping” next to the Add to Bag button, which is helpful for the shopper to know as they review product details and decide if they want to add this item to cart.

2. Be upfront about shipping costs.

Shipping costs can make or break a purchase, and users want to know as early as possible to factor it into their decision to purchase. It’s frustrating for users to spend time filling out fields, going deep into the checkout process just to see what the shipping cost is. A good practice is to present the shipping options and costs on the cart page before starting the checkout process. Even better, show the shipping estimates earlier in the purchase flow – for example, on the product page.

Dicks-Sporting-Goods shipping estimate
On this Dick’s Sporting Goods product page, directly under the call-to-action buttons is the expected ship day and estimated cost with standard shipping. Contextual info icons at the end of each line allows shoppers to get more details.
Gap cart with shipping options
On this Gap cart page, the different shipping options and costs are readily provided on the right, allowing the shopper to get a better idea of the final price. The free option is grayed out since this order did not qualify, but at least it’s clear that the option is available and requires a $50 minimum. Additional links, such as “Learn About Shipping Options” are helpful to have nearby, for those who may need more details before they feel comfortable proceeding with checkout.
For Pressed Juicery, the shipping costs are dependent on location due to the nature of shipping fresh juices. A zip code field is nicely implemented within the cart preview dropdown so it’s easy for shoppers to see total costs without needing to navigate away.
For Pressed Juicery, the shipping costs are dependent on location due to the nature of shipping fresh juices. A zip code field is nicely implemented within the cart preview dropdown so it’s easy for shoppers to see total costs without needing to navigate away.

3. Manage expectations for delivery time.

While people love free stuff, shoppers expect free shipping to mean the slowest and cheapest method – packages that might arrive later than expected, which could cause anxiety with the order. Whether free or expedited shipping, it is important to state an expected delivery time. Many stores are becoming more descriptive with naming their shipping options, such as “3-day shipping” and “1 business day shipping” rather than calling it “standard” and “express”.

Delivery time isn’t just affected by the shipping option the customer selects – it also depends on how fast the fulfillment center can get the item packed and out the door. Fresh from the context of a 24/7 online shopping experience, customers often don’t consider that fulfillment centers might operate only on business days during business hours. Be sure it’s clear when a Friday night order actually won’t be shipped out until Monday.

Nike estimated shipping dropdown
Nike’s cart page includes a dropdown of shipping options. Even though they use descriptive names for their faster shipping options, they still include extra clarification that “Two-Day” means 2-3 days, and “Next-Day” means 1-2 days.
Sephora’s shipping details (triggered by clicking on the shipping callout in the header) provides a clear table of expected shipping timelines – order day to ship day to arrival day. This also makes it clear that weekend orders actually get shipped out on Mondays.
Sephora’s shipping details (triggered by clicking on the shipping callout in the header) provides a clear table of expected shipping timelines – order day to ship day to arrival day. This also makes it clear that weekend orders actually get shipped out on Mondays.
Staples Checkout delivery availability
In Staples’ checkout process, the Cart Summary on the right indicates when each item will become available to ship, establishing expectations that some items in the order may take longer to arrive.

4. Don’t forget about international shipping.

Even if you’re a US-based business and international customers may be a small percentage of sales, it is important to address how international shipping works. You may actually be losing out on international orders because international shipping policies are unclear. Even within the US there could also be different shipping rates for the 48 continental states versus Hawaii and Alaska.

Optimizing an e-commerce store for international customers can be much more involved – you can go as far as setting up different subdomains for each country so the proper language, currency, taxes, address fields format and inventory is reflected. At the very least however, an e-commerce store should be able to easily answer the question “Will you ship to my country?” and not alienate potential international customers.

Tattly shipping description
Tattly’s product page includes a simple bit of text about shipping right below the price, mentioning that international shipping is an additional $6.
Sephora Cart with International buttons
Options for Canada and International are right below the checkout button on Sephora’s cart page. This helps catch any non-US shoppers right as they’re about to checkout and direct them to the right experience.
Sephora-Cart-Canada
Clicking “Canada Checkout” gives an explanation about switching to the Canada shopping experience.
Sephora-Cart-International
Clicking “Ship International” will ask customers to select their country from a list before continuing onto the proper experience.

5. Specify shipping carriers.

Some customers may not trust certain carriers. For me, the UPS guy will just leave items in front of my apartment door at risk of being stolen, and I’ll take that into account when buying an expensive item. USPS will try to jam everything into my mailbox, which means crumpled packages – ok for clothing, but not okay for fragile items. As a shopper, I consider these experiences as I select a shipping option. If the store can’t provide options for different carriers, at least show who the carrier will be so the customer can know what to expect.

Casper cart page
Casper, a mattress e-commerce, offers free shipping on their orders, including the text “Free shipping via UPS: $0.00” on their cart page. Such a large and infrequent purchase being made online will cause customers to have anxieties about how it’ll be delivered (especially since this is a mattress!), and mentioning UPS is helpful for customers to know what to expect.
Bellroy delivery options
Bellroy’s product page lists the delivery options directly within in the product details. The information shows the carrier/method, estimated days, price, and even if there’s tracking. These details may be useful to shoppers who don’t find Smartpost reliable or are willing to upgrade shipping just for the tracking ability.

Conclusion

The e-commerce shopping experience doesn’t just end at the thank you page after checkout – the experience extends all the way to the moment the customer opens the box (and beyond that if returns are involved).

The key is often transparency and managing expectations. Customers have the best experience when everything meets or exceeds their expectations. As designers we can implement these details to provide the best possible shipping experience and improve the overall UX of the e-commerce website.

To recap these UX considerations for shipping:

  • Showcase shipping benefits in different places
  • Be upfront about shipping costs
  • Manage expectations for delivery time
  • Don’t forget about international shipping
  • Specify shipping carriers

What aspects of shipping do you care about most when shopping online?

Illustration by Andres Maza.

Popular This Week
25 Must-Have Pages for Your E-commerce Website
January 30, 2015

25 Must-Have Pages for Your E-commerce Website

By Yvonne Weng
Building a Responsive jQuery Carousel Plugin from Scratch
November 26, 2014

Building a Responsive jQuery Carousel Plugin from Scratch

By Max Rolon
Taking Control of Image Loading
July 29, 2013

Taking Control of Image Loading

By Patrick Kunka
Text-align: Justify and RWD
March 12, 2013

Text-align: Justify and RWD

By Patrick Kunka

Like what you’re reading? Sign up for the Barrel newsletter and receive updates.