Ever have leftover groceries in your fridge and don't know what to make of it? This problem sparked the idea for Chefster. Tell the app what you have, and it will generate matching recipes for you.
I'm part of a 3-designer/1-developer team working on this app, and I led the interface design and helped to carve the branding direction.
This app started as a group design project that I worked on with my friends Andrew and Maggie in 2013. We coined it "College Leftovers," as we initially targeted college students. The goal of the app was to provide a fun and easy way to maximize food consumption. We realized that many students, myself included, didn't use up leftover groceries in time or didn't know how to put together leftover groceries into something edible.
Initial sketches of the leftovers to recipes flow
I drew up a basic skeleton of the flow in Illustrator and saved it into pdf to use as a "click-though" prototype. (This is back when tools like Invision wasn't popular yet.) We tested the design with fellow classmates, and they all loved the idea but felt that it took too much effort to get recipes.
Wireframes for click-through prototype
We designed a tab bar nagivation with three primary features.
In response to the feedback, we removed unnecessary steps, such as answering the initial yes/no question and inputting ingredient amount, as well as reframed the language to be more direct and less inquisitive.
Recipe search and view flow
For visual design, we went with a warm color palette that goes well with food photography. I chose the slab and sans serif font combination to give a feeling of both "fun" and "gourmet."
When iOS 7 first came out, we felt driven to modernize the interface. Additionally, we wanted to optimize the checklist feature. Version 1 was very cumbersome in terms of viewing missing ingredients, and it was hard to keep track because you can only view one recipe at a time.
We added a Shopping List tab for easily tracking recipes and ingredients. Users can add to the list from the recipe page.
Recipe to shopping list flow
In this version, we introduced subtle branding elements, creating a custom logotype and further refining the iconography. I refreshed the interface once again, using a white and beige base, reserving color for focus areas and imagery. I also wanted to bring back the personality from Version 1's design through the typography.
We worked to optimize recipe viewing with a 3-tab navigation and also added a Favorite feature for saving recipes. We're currently in the process of implementing the app with help from a developer friend. Stay updated with our progress here.