Featured Posts

Improving Amazon Mobile App's Shopping Cart Flow

April 19, 2018

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

 

 

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:

https://material.io/guidelines/motion/material-motion.html

https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

Share on Facebook
Share on Twitter
Please reload

Related Posts
Please reload

Generative Music | Latent Space Sequencer

December 13, 2018

1/10
Please reload

Recent Posts
Please reload

Search By Tags