UX for Lista Menu Planner

The idea of the Menu Planner for Lista came from the need of making meal planning easier and quicker with the added advantage of being able to plan with any recipe available on the web.

We started shaping the experience by translating the analog board we had in our kitchen where we used to tag clippings of recipes from magazines, into a digital interface where users could drag and drop recipes they would collect on Lista. A key requirement was to make the Menu Planner available throughout the site so that as a user would find a recipe card, this could be added to a day in the planner.

sample_menuPlanner_UX_01

The idea was to offer a great deal of flexibility in the Menu Planner, so that:

  • Multiple recipes could be added to one day.
  • Recipes could planed for up to two weeks.
  • One or more recipes could be “bumped” from one day to the next day, pushing with it recipes on the following slots.
  • Recipes added to one day in the planner could be exported into a grocery list.
  • Users could select which recipes to export into a grocery list when exporting from the planner view.

 

sample_menuPlanner_UX_02

During the wireframing process we iterated with different designs looking for a layout that would be intuitive and flexible enough to work both on desktop and on mobile. Once we felt comfortable with the design we implemented it and continue to iterate. In the process we ran a usability test and realized that while people liked the ease of planning, it wasn’t obvious for them how to remove recipes. Also, having the ability to plan meals for the next week wasn’t enough. People wanted to use the Menu Planner to not only plan their regular meals, but to also plan special dinners in advance. We also discovered that the ability to export recipes into a menu was something people liked a lot, but in a few cases it didn’t work as expected since some of the recipes they would add to Lista weren’t parsed correctly on a timely matter.

With these issues in mind we set to resolve immediately the “short hanging fruit” which was making the ability to remove recipes more intuitive and add more days in the planner for people to plan their special dinner plans in advance. The parsing of recipes is something more complex and since it only occurs in very few cases, is something we are still planning to tackle in the future by improving our parsing system in addition to enabling users to enter ingredients whenever our engine is unable to do it.

 

sample_menuPlanner_UX_03

A great lesson from this process was to test the main interactions sooner. The ability to delete a recipe from the Menu Planner is something that we could have caught from the beginning. We could have also conducted user surveys to understand better how users would be using the meal planner and anticipate better the amount of days that the planner should provide.

Learn about the implementation of this project.

 

Project Info

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