UX for Lista Online Grocery Lists v.2

If you have ever been at the grocery store wondering why do you need certain kind of tomatoes or if you can replace “lacinato” kale for “curly” kale for a recipe, then we share something in common. This is exactly one of the motivations for this project. We wanted to add the ability to know where and how an ingredient was used on a recipe while viewing a grocery list.

The “magical” part of extracting ingredients from a series of chosen recipes into an organized grocery list was already in place. This meant that we were already storing the information about the relationships between the ingredients displayed and the recipes they came from. We needed to now create an interface where users could easily sort by recipe in addition to:

  1. Sorting by the existing filters (all, in list, and in cart)
  2. Displaying information about the recipe where an ingredient was used

 

At a high level this is how the user flow in addition to the processing of viewing ingredients looked like:

sample_lista_groceryLists_UX_01

Quick wireframes served us to illustrate the multiple combinations that could result from applying the filters. The set of recipes and the set of views were mutually exclusive. Meaning only one recipe and one view (all, in list, in cart) could be selected at a time, while the first set could be combined with the second set.

sample_lista_groceryLists_UX_02

 

During the more formal wireframing stage we iterated with designs that incorporated elements that would be part of future releases. From an interface design perspective this approach allowed me to create a more flexible layout and better optimize the use of the space.

sample_lista_groceryLists_UX_03

sample_lista_groceryLists_UX_03

Since Grocery Lists are one of the features most used in mobile devices, during the wireframing process, it was very helpful to start the layout of key screens with mobile to account for content and spacing. This exercise also helped prioritizing elements on the screen and made the desktop version more streamlined.

Learn about the implementation of this project.

 

sample_lista_mealPlans_UX_04

 

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.