Menu Planner for Lista

The Menu Planner is a calendar menu on the Lista app, where users can schedule recipes to cook in the future. The idea of this virtual calendar came from a real calendar we used to have in our board in the kitchen. In this calendar we would pin magazine clippings with recipes we wanted to cook. Since this got us into cooking on a regular basis, we thought that a virtual calendar would be the best way to continue doing it as well as motive others into doing the same, with the additional bonus of being able to add recipes from the web.

Since recipes can be found in many places on the site, we located the menu calendar on a tab right below the top toolbar. A drag and drop interface allows users to drag any recipes in the day “slots” in the calendar.

 

sample_menuPlanner-01

 

Multiple recipes can be added to a single day.

sample_menuPlanner-02

 

Clicking on a day with more than one recipe expands a menu from where users can access other recipes scheduled for that day.

sample_menuPlanner-03

 

One of the coolest features of the Menu Planner is the ability to export meal plans into a grocery list. There’s also the option of selecting the recipes that should be exported to the list.

sample_menuPlanner-04

Learn about the UX for 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.