April 2018

Clarifying Shipping Information for International Customers

  • Date: April 2018 – present
  • Role: UX Design and Front-End Development
  • Design tools: Sketch
  • Development IDE: Coda

Problem

Adorama regularly ships internationally, but many international customers were unhappy when they received their items. The site was not providing clear information about all fees associated with international shipping and customs. The business owners only requested a change to the checkout page. However, in order to provide the best user experience, I explored the entire workflow from product page to checkout to find out where improvements could be made.

Research & Discoveries

I researched at least 30 websites. I discovered that Adorama was solving a unique problem.

Many online shopping sites do not offer international shipping, even to Canada. Of those that do, the vast majority provide a localized shopping experience where product prices are displayed in the local currency, and shipping destinations are restricted to a single country.

For instance, the website is first localized to Canada (ex: IKEA, Sephora pictured, Target), which automatically sets prices and shipping to CAN dollars.

Sephora offers Canadians a localized shopping experience.
Overstock makes their Canadian localization page very obvious.

I also discovered that many companies will also not allow customers to associate a US billing address with a Canadian shipping address, or vice-versa. They must both be Canadian (or American).

E-commerce sites reviewed: OfficeDepot, IKEA, Sephora, Target, Overstock, REI, Williams Sonoma, Michaels, Sears, HomeGoods (doesn’t ship), Shop.com, QVC, Macys, Nordstrom, Zappos, JCrew, JC Penny, GameStop, ebay, NewEgg, BestBuy, Walmart, Cars.com (no CAN), plus competitors (Abe's of Maine, Keh, B&H, RitzCamera, MPB, Samys, and BuyDig).

Conclusion

Adorama offers a non-localized, cross-country international shopping experience.

 


Design Patterns

Although I was solving a unique problem, I did uncover a few patterns that could be used on Adorama’s website:

Supportive Help Pages

For most sites, the best place to look for shipping information was in the help pages. Adorama’s help pages did not include all information about international shipping. In fact, while most international customers would only be able to select FedEx International Shipping, the help pages did not include any information about this shipping method.

No FedEx shipping information on Adorama’s help pages.

Easy to Access Shipping Information

Shipping information often showed up where appropriate, well before checkout. For instance, Nordstrom advertises its shipping information in the header on the homepage.

Nordstrom homepage features a link to shipping details.

Clear and obvious International shipping information

For some websites, international shipping rates was clear and obvious in the cart. JC Penney (pictured), Nordstrom and, Adorama competitor, B&H (pictured) were good at this.

JC Penney does a good job explaining the choices between international shipping options.
B&H clearly explains the differences in international shipping fees.

User Workflow and Wireframes

After all the research and collecting design patterns, I started on clarifying the user workflow and the wireframes. The workflow would following the following order:

  1. Help Pages  – First the help pages, accessible via the footer, would need to be updated to include new language about FedEx International Shipping. This task was sent to the business owners to complete and finalize.
  2. Product Pages (Wireframes presented)– The next place customers would learn about shipping is on the product pages.  The product page features improved language and tooltips, as well as an updated shipping information section.
  3. Cart and Checkout (Screenshots presented) – The final place for customers to learn about shipping fees.  The cart and checkout pages include clarified shipping information, as well as an updated tooltip. (Note that changes have already been implemented at the time of this post.)

Wireframes for International Shipping project


Front-End Development & Next Steps

The development work was done by me. As of April 2018, only changes to the cart and checkout pages have been implemented. Additional development work will be created in May, or possibly June, for the product page modals.