Amazon Checkout - Motion Redesign
2018, Motion Design, UX Design
A quick motion design proposal to improve the delightfulness in the checkout experience. Based on Amazon's mobile app in April 2018.
1. Usage scenario
It’s April, and after a longer-than-usual winter, Alex the grad student is super excited for the summer. He has been using the Amazon app to browse for rompers because he wants to look cute in the sun.
Alex has put several items in his cart, but he does not have the budget to purchase everything. Now that he is ready to proceed to checkout, he needs to remove several items before paying.
2. Current Journey Map
3. Important Learnings
Browsing is fun, but choosing which items to actually pay for is stressful.
There are several factors involved, including price, quality of the item, and delivery date.
Removing items invoke unpleasant feelings.
Such as “missing out”, or “not being able to undo”.
Full image of the item is important.
Alex needs to remind himself how the items look like before deciding to keep or remove them. Alex goes back and forth pages often.
4. Redesign Objectives
⭐ Don't punish users for being fickle-minded, sensitive buyers.
(1) Facilitate jumping from page to page. Give users more clarity where they are in the app or process. The current app's pages always move horizontally from right-to-left, no matter where you are in the process. This makes it hard for users to know where they are, as the spatial placement is not consequential nor sequential.
A confusing, endless loop
(2) Reduce the negative feelings associated with paying or removing items. If shopping for romper is fun, selecting one and paying for it should not be stressful.
5. Redesign Proposal
Differentiating motions, creating a better spatial mapping
How the pages move to-and-fro should be indicative of the progression in the purchasing process. Here I propose browsing to be horizontal, while shopping and confirmation to be a vertical progression.
Overall chart for mapping motion & spatial relationship
Shopping cart drops vertically, whereas browsing remains horizontal. Having lazy-load reduces the perceived load time, too.
Item adjustment (e.g. size, color) is now a child page of the shopping cart. The adjusting action does not create an infinite horizontal loop anymore.
Fixed button to encourage purchase.
Friendlier-looking prices
With motion, the design can reward or warn user – when appropriate – of the amount they have to spend.
Slight delay when the cart is loaded so that user knows where to focus. And the ticker makes the price going down more exciting!
