CulinarAlly pantry helper /

 user experience design

I’m one of those people who loves cooking. I make most of my meals at home, either alone or with friends. One problem that arises from cooking so frequently is pantry organization. Who hasn’t accidentally ended up with ten cans of tomato paste at one time or another? Lately, there’s been a big push for things like meal kits for people who don’t grocery shop and don’t want to have to measure their ingredients, but for those of us who prefer to buy our own supplies there’s really nothing out there whose goal is to help us keep our pantries in check (or, if there is, I certainly haven’t found it). I wanted to try to create a tool that would help people like me keep their kitchens in check, so I came up with CulinarAlly—a literally Ally in the kitchen!

I started with user research, aka interviewing every friend or family member I could find that cooks regularly, whether their meals be quesadillas or multi-course extravaganzas.  From this, I created a few key personas which I used to shape my key focus points for the application experience.

 

Key considerations:

  • Accuracy and reliability Catalog pantry contents and access them on-the-go when you need them
  • Time Adding items should be easy, quick
  • Enable laziness (in a good way) Let users know what they can make with only the ingredients they have on hand
  • Cooking as a community Allow users to synchronize with the other people that share their kitchen

Preliminary exercises, including card sorting, showed me where I needed to streamline my app to be most helpful to users. After examining my research notes and personas, I distilled the key features into a site map of the application’s organization.

Before creating clean wireframes, I sketched out tiny thumbnails first, a habit I picked up from book design to see overall flow, with the goal of making the app very clear and consistent. Yellow highlighter represents clickable items or fields. From these thumbnails I created paper wireframes to do more user testing with. I used my discoveries to create final polished wireframes for the app.

Example User Flow:

You’re wrapping up work and are thinking about what you’re going to do for dinner. You’re feeling something southwestern, perhaps with black beans? You open up CulinarAlly so you can see if you have any, and if so what you could make for with them.

1. Home Screen You tap on the pantry option.

2. Pantry + Pantry Search In your pantry, you immediately tap the search function and search for black beans. You do indeed have some! Next, you’ll want to find a recipe that uses them. You tap “Black beans” to automatically open a
recipe search that shows you recipes that use black beans.

3. Recipe Search You decide that out of the recipes you’ve imported that use black beans, you’re feeling enchiladas. You wonder what other ingredients you’ll need to stop and get. You tap enchiladas to open its ingredients list.

4. Enchiladas Recipe You almost have everything, but there are a few ingredients that you don’t currently have in your pantry. You tap to open and add the missing ingredients to your grocery list.

5. Grocery List As you shop, you check off the ingredients you pick up and then clear those items off your list. Once you’ve cleared everything, you hit refresh so your roommate—a linked user of your pantry—doesn’t buy doubles of the things you already picked up!

NB: This project is solely focused on the user experience right now, as the user interface design is not yet complete.

Example persona

Site Map

CulinarAlly pantry helper /
CulinarAlly pantry helper /
CulinarAlly pantry helper /
CulinarAlly pantry helper /