top of page
Featured Posts

Improving Amazon Mobile App's Shopping Cart Flow

Read prior analysis here.

//Edit: a revised flow with stationary CTA button and subtler page transitions:


Goal of Redesign

  1. Give more clarity to user where they are in the purchasing process.

  2. Keep user happy when they switch from browsing for items to managing their shopping cart.

  3. 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


  • 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


  • 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.



#InteractionDesign #MotionDesign

Related Posts

See All
Recent Posts
Search By Tags
No tags yet.
Related Posts
bottom of page