Recipe App Concept

Objectives & Goals

• Efficient way to track and find grocery lists and pantry items.
• Simple method to keep pantry items updated based on grocery lists and recipe completion.
• Quick discovery of both current and new recipes that match pantry items.

My Process

Background

One night while looking for something interesting in my recipe app to make on short notice, I became frustrated. I needed to make something now, and I had no idea what was in my pantry or what recipes I could easily make without a trip to the store.

My app had a pantry section for everything I had in my cupboards, but it was never up to date because I wasn't constantly updating it when I bought or used ingredients — so I certainly couldn't rely on it.

I was also looking at a finite list of recipes which I had added to the app. I love that I can keep them all in one place, but on that particular night I wanted something new and different.

Bottom line, to correlate any recipes (new or existing) with ingredients I had on hand was not going to happen without an hour of digging on the web and in my cupboards. A quick Google search and a trip to the store it was.

The next day I did some research on other apps that offered the full functionality that I was looking for, but none of them really fit the bill. I found several that focused primarily on the pantry organization, but the recipe section was woefully inadequate, either pulling recipes way out of my comfort zone or not letting me add my own collection. And there were plenty of apps for just recipes or just pantry organization.

From this was born the idea of My Kitchen App. It had to have the following sections:

• recipes - this is the primary focus, where I can add new ones either via a URL or through manual entry
• a section for new recipe ideas that are pulled from my favorite recipe sites
• a section for meal planning to plan meals ahead
• a section to catalog what's in my pantry
• a shopping list feature

What makes my app different is how all of these sections function together.

The basic functionality that I came up with started with the essential premise that the recipes section and the pantry section must have a tight integration.

• When a recipe is made the appropriate amount of ingredients are pulled from the pantry so you can keep a good accounting of what’s available.
• Recipes should have a list that shows how many/which ingredients in your pantry are and are not available so if you want to make something now you can easily choose something.
• Every recipe should have nutrition information specifically pulled from the items in your pantry that you will be using, rather than just generic information, which will enable the user to more tightly control elements of their diet that they are interested in (calories, salt, sugar, fat, etc.). This nutrition information should also be available in the user's profile to help track daily/weekly/monthly intake.
• The pantry section must enable the user to scan a barcode, look up an item, or select from a list of previously added items so the user doesn’t have to “guesstimate” very much (if at all).

You can find the full list of feature and functionality requirements in my Figma file.

In the beginning

Before starting any designs I had to make some basic decisions.

I knew I wanted the design to be fairly simple to let the recipes shine - no textures or gradients everywhere to confuse the eye.

Then, because this app would be mostly used in the kitchen I decided to create a mobile first design, which meant I had to choose a mobile operating system to focus on - Apple or Android. In the end I decided to use Material Design with a native Android interface.

Sketches

Before getting too deep into the design software I wanted to do a couple of quick sketches to get some baseline of where I wanted elements to live on the screen. I went through a couple of iterations before firing up Figma.

Wireframes

Rather than get too far into Material Design details I started with basic wireframes to establish the layout and basic content of the app. The wires started out very rough, but I continued to refine them until I felt ready to move onto the visual design part of the project.

Visual Design

Once I felt the wires were at a good point I started finalizing the font, choosing colors, and establishing final spacing based on Material Design UI.

I choose to stick with the Roboto font, which is the standard Android font. I personally like the way it looks and as it fits well within the Material Design guidelines I didn't feel the need to complicate the design with elaborate typography.

When considering the psychology of color, reds and oranges are traditional colors for food-related apps. I considered these as my primary color, but in the end I wanted to have a different color for each section that fit well in a single theme. I went with a dark blue that worked well with the four section colors of aqua, red-orange, yellow-orange, and yellow. In this way the color of the app bar will also give the user an indication of what section they are in along with the section title.

Desktop Adaptation

Once the mobile version of the site was fleshed out I decided to create the desktop version for each of the main section's landing pages. These key screens give a good idea of how the mobile content adapts to a much larger screen.