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



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.



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



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.



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



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.





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.