Lista Online Grocery Lists v.2

The first iteration of the Lista web app was a simple grocery list interface. As we iterated on the app we circled back to the grocery list function with the idea of optimizing the layout, making viewing details of an ingredient flexible enough for both desktop and mobile views. At the same time we added the ability to view recipes included on a list and to filter ingredients by a selected recipe.

 

 

sample_lista_groceryLists_01

 

Recipes included on a grocery list can be viewed by clicking on the “Recipes” button at the top of the list. Selecting a recipe filters ingredients used on that recipe.

sample_lista_groceryLists_06

 

Accessing the details of an ingredient shows its category and the recipe where it is used.

sample_lista_groceryLists_03

 

As ingredients are organized according to their category or aisle in the grocery store, the use of icons makes it easy find on the screen.

sample_lista_groceryLists_05

 

sample_lista_groceryLists_04

We have built the Lista web app in a responsive way so that is agnostic to a particular device and instead adjusts its layout when needed.

Learn about the UX for this project.

 

Project Info

  • My role was to design the UI, UX, and iconography. I was also in charge of coding the HTML and CSS.
  • Created while working at Lista company which I Co-Founded.