Improving Amazon Mobile App's Shopping Cart Flow
//Edit: a revised flow with stationary CTA button and subtler page transitions:
Goal of Redesign
Give more clarity to user where they are in the purchasing process.
Keep user happy when they switch from browsing for items to managing their shopping cart.
Make removal/editing of item less confusing.
1. Shopping Cart Dropdown
Dropdown - Principles
Overlay: shopping cart is a layer "above" browsing
Choreography: shopping cart screen scales from small to full screen and from top to bottom, starting from the shopping cart icon. The scale animation is asynchronous (width is faster than height) and uses the deceleration curve.
Choreography: shopping cart icon "sinks down" in the same axis as the screen drop down, gets replaced with a collapse icon.
Items Loading - Principles
Hierarchy through offset and delays
The items are loaded first (to replace placeholders).
Second is the summary at the top
Last is the subtotal price.
This is to remind user of the list of items they have chosen (via visual) before the look at the subtotal. The subtotal is also accentuated via a delayed offset animation.
2. Shopping Cart Item Pop Up
Principles
Obfuscation & overlay: the main shopping cart page is still in the background but darkened, as it is not the current focus.
Parenting: the subtotal price is the parent of the item pop up, hence the subtotal is not obfuscated. The item's price is also placed near and below the subtotal price.
Continuity-choreography: the pop up box appears and scales up from the selected section
//Bonus: Alternative Pop Up Loading
The pop up here appears from the image thumbnail instead of the whole selected section
3. Item Deletion
Principles
Parenting & value change: subtotal price is changed when the child (item) is removed.
Continuity-aware: after the removal of the first item, the second item moves up the list.
References:
