Amazon Shopping Cart Optimization
Objective: Refreshed design and updated functionality for this hard working shopping cart.
Challenges
While the Amazon.com was used by over 130 million people yearly, it had not been visually updated in 7 years prior to this redesign.
The UI was outdated and was visually “busy”.
The UI did not include product images, scarcity or product availability messaging.
Every cart action required a complete cart refresh, causing a lot of friction.
Project Goal
Redesign the cart to help quickly parse it’s contents and guide buying decisions, improve messaging at the item and page level, provide more information like scarcity and product availability messaging to help inform our customers, and add inline ajax interactions for seamless cart manipulation.
The cart redesign went out in 10 iterative changes.
Results
Each of the tests we did were successful worldwide and resulted in significant increases in engagement and sales. The most successful tests included the addition of scarcity messaging and the improved proceed to checkout box with the fully landed cost.
Before and After Cart Comparison
Cart Before:
Unoptimized, visually busy. lacking meaninful functionality
Cart After:
Clean design, smooth transitions, added user features.
Design Changes
Visual Refresh using new brand guidelines developed for Amazon by myself and the designers of the Retail Customer Experience UX Team. This was the beginning of the Amazon design system.
Improved proceed to checkout box
Added product images
Improved scarcity and product availability messaging
Added inline Ajax cart interactions
Delete / Move to Cart became links instead of buttons
Changed right rail products from recently viewed to related items
Detail Views
Product Block
Before the redesign, the cart didn’t have product images, making parsing difficult, in particular for products with high visual affinity like apparel. Other enhancements included the addition of scarcity messaging and making availability message more prominent, especially when the item is not in stock. This also made the item block consistent with other checkout pages.
Metrics:
Reduce clicks to the detail page from the shopping cart
Increase cart conversion
Proceed to Checkout Box
In the redesign, the proceed to checkout box was changed from a very messy and visually busy design to a cleaner design with a better visual hierarchy.
One of the most important elements to this change was the addition of the fully landed cost within the cart. This alleviated a major pain point for new users, who before the redesign would have to add payment and address details in checkout before being able to see the fully landed cost.
Metrics:
Reduce checkout abandonments
Reduced time-to-checkout
Alerts
The old cart alerts consisted of a complete sentence for every changed item, which was very heavy and space consuming for the page, pushing the first cart item well below the fold. The alerts were redesigned to be grouped by price changes and changes to sellers, and this enhancement made the first item in cart visible above the fold for a user with up to 7 messages.
Metrics
Increase cart conversion
Interactions
Many of the customer interactions on the page are cart manipulation actions: deleting items, updating quantities, or moving in and out of save for later. Before the redesign, each of these actions required a full page reload. By making these actions inline we eliminated a lot of friction. The series of Ajax actions for delete, update quantity, save for later and move to cart were designed with the intention of creating an easy to use and fluid experience that would allow customers to more effectively use their cart to make purchasing decisions.
Metrics:
Reduce unnecessary page transitions
Improve page latency
Summary
Results
Each of the tests we did were successful worldwide and resulted in significant increases in engagement and sales. The most successful tests included the addition of scarcity messaging and the improved proceed to checkout box with the fully landed cost.
What I learned
I learned that even the most minor changes can lead to incredible results within an experience. Every detail and every word counts.
Other Amazon Projects
I worked with the Subscribe & Save team at Amazon to redesign the Manage Your Subscriptions page.
As part of the Amazon.com International Design Team, I redesigned Javari.co.uk as a responsive website for multiple countries in multiple languages.