List Clean Up Feature

To improve the creation and readability of grocery lists we created the “List Clean Up” feature for Lista. With this feature, users can compress their grocery lists grouping ingredients of the same kind and quickly eliminating redundancies or ingredients they already have.

 

When a user creates a grocery list or adds ingredients that are already in their grocery list the user is alerted that the list can be “cleaned up”.

sample_lista_cleanUp_01

 

By selecting to clean up a list, the user is taken into a wizard flow. The flow begins by marking off ingredients the user is very likely to have.

sample_lista_cleanUp_02

 

Then, ingredients are grouped by category and by kind. So for instance, the vegetable “pepper” is shown under “produce”. Since there is also a “red bell pepper” in the list, this is grouped under “pepper”.

sample_lista_cleanUp_03

 

Users can access more information about the ingredient by clicking on the information icon. This triggers an overlay that shows the recipes where the ingredient is used, as well as the quantity that is needed.

sample_lista_cleanUp_04

 

After marking off any other ingredients the user already has, a summary is shown communicating how much the list was compressed.

sample_lista_cleanUp_05

 

The user can opt to continue the flow and go over each of the remaining ingredients specifying quantities needed. This can make it quicker to access this information while shopping at the store.

sample_lista_cleanUp_06

 

sample_lista_cleanUp_07

 

Project Info

  • My role was to design the UI and UX. I was also in charge of coding the HTML and CSS.
  • Designed while working at Lista company which I Co-Founded. This feature is currently under development.