I own 100% of the visual design and animation in this project
In 2018 we added a feature to pHin app called "Shopping List". User can make a list of chemicals they need and send it to their preferred retailer through pHin app and pick it up in the store.
Designing the icon was challenging. We couldn't use a shopping-cart or a basket, because the items were not added to a cart for check-out. The customer is just adding items to a list, but we wanted the icon to give a shopping impression. Also to make the multi-step flow engaging and fun, I was asked to start the flow with an EMPTY SAD icon and end it with a HAPPY one to make the user feel achieved. 
The concept I came up with is a paper that is pinned to a shopping bag, the character is the LIST which looks grey and sad, but when finished, order is made and items are ready to be picked up, so the character is the BAG which is colorful and happy.
Again to give it some livelihood, I added minimal animation to the icons (Lottie export)
Here is a screen recording of the shopping list flow. (I speeded it up to focus only on icons)
Back to Top