Shopping Cart UI Design

Recently I have been revamping the design of Bieyang’s mobile app. As an e-commerce application, the shopping cart is probably one of the most important pages to our users and it becomes critical for us to improve the user experience.

Bieyang’s shopping cart design

Checkout is a long and complicated flow and I won’t cover everything in this article. Today I will only focus on the shopping cart page. Our goal was to simplify all the various inputs based on our users’ behavior, including:

1. Delete items
2. Edit quantity
3. View item detail

There are many shopping apps in the market and various shopping cart design. But basically the debate is alway between aesthetics and functionality(easy to use). We can put those designs into 2 categories. I will use Zara and Wish as the example of each category to analyze the difference of design intention.


Zara: Aesthetics first functionality second.

Zara’s App uses ‘edit‘ button to view/hide ‘edit quantity’ and ‘delete item’ to keep a clean layout. However, the disadvantage is that users have to take extra clicks to edit quantity or delete items.

Diagram of Zara app’s shopping cart

Wish: Functionality first aesthetics second.

On the contrary, Wish’s App simply puts everything on the page. Users can modify almost anything with just one click. Please note the word — ‘Almost‘: for the ‘edit quantity‘ button, although it looks like it is a one-click action, it actually takes 3 clicks to finish the task. And of course, too many buttons make the layout less sophisticated.

Diagram of Wish app’s shopping cart

Functionality or aesthetics? Data drives design.

Personally, I am a big believer of ‘Form follows function.’ But a good design should not give up aesthetics because of functionality. Sounds like a dilemma? It is the challenge to the designers. Back to the topic, the problem I was facing is how to balance those 2 factors and deliver a product that meets our users’ need. To answer this question, I calculated the numbers of users who delete items, view item detail and edit quantity in the shopping cart page:

From the data above, we can easily see the weight of each action and the conclusion of the design: ‘delete items‘ and ‘view item detail‘ are commonly-used actions and users should use less clicks to accomplish the task; ‘Edit quantity‘ button is rarely used and it is ok to take extra steps. Looks like Wish is the winner? Yes and no. Yes, because it is easier to use functionality wise, and no, because its design can still be improved.


Bieyang: Data + innovation

Based on the data and aesthetic requirement, I want the page to be both easy to use and cleanlooking. Here is my solution: I keep the ‘delete’ button on the page, so users can delete any item with one click. However, I removed the ‘edit quantity‘ button to keep the layout less noisy. Users can edit the quantity in the detail page after they click the item.

Diagram of Bieyang app’s shopping cart

If you wanna see more my works, please visit my website atwww.chengfolio.com

Leave a Reply

Your email address will not be published / Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>