Designers: Approach a personal task you hate doing as a UX design exercise

My personal journey into meal planning

Saara Kamppari-Miller
Designer Geeking
7 min readSep 12, 2017

--

Disclaimer: I hate meal planning. But I’m a user experience designer—that means I can design an experience for meal planning. With that mindset, I can do this thing that I don’t like doing, and perhaps start building meal planning tools that other people who hate meal planning can also use.

Citrus Marinated Chicken with a Corn and Bean Salad

There are lots of cooking related services out there: Blue Apron, Hello Fresh, Plated, The Fresh 20, Epicurious, and so forth. Over the years, we have tried several of them, but my significant other and I weren’t satisfied with the options available to us. So, we are starting talking about how our own meal planning service would work.

What we like from the meal planning and recipe services we have used:

  • Reusing ingredients between meals, especially those produce items that you would end up throwing out half of when cooking only one dish.
  • Cooking a double amount of protein early in the week to reuse later in the week to save time and energy.
  • Using spices to enhance flavor profiles on otherwise basic meals.
  • Learning about flavor pairings and cooking methodology (so we can improvise more effectively when needed).

What we’d like to see improved compared to the services we have used:

  • A easily modifiable meal plan and shopping list (digital and printed) that also works for your regular shopping too.
  • Better options for avoiding or modifying ingredients. This means having a better understanding of what a particular dish is, and if an ingredient is the star of the show, a supporting character, or simply an extra that won’t be missed.
  • Smart options for increasing or stretching the number of servings a meal makes. Sometimes you have guests in town that doubles an entire recipe, and sometimes you simply have an infant who is learning to eat solid food.
  • Customized meal plans that take in multiple factors, including past modifications.
A mostly-Mexican inspired style meal plan. 25 items on the shopping list for 4 meals. Plus Corona and extra limes.

We know what we want our meal planning experience to be, but it doesn’t exist. But we still need to do meal planning now (like right now — I’m literally procrastinating about making our next meal plan by writing about designing a meal planning service). So what’s a designer to do?

Make a prototype!

Mindset shift: It’s not meal planning, it’s making a prototype. I hate meal planning, but I love prototyping experiences.

Hyper-focus: Because I have a user base of 1 right now (me) with immediate needs (tomorrow), the prototype has got to be the recipe card itself so I can cook a meal. Not the website. Not the new recipe entry interface that confirms that you used every ingredient in your instructions. Not the interface for removing a meal from a plan and getting suggestions for other meals that would fit in nicely with the meal plan as a substitute. No, just prototype the thing that I actually need to get food on the table.

Using my first recipe card prototype

Designing a Better Recipe Card for Meal Planning

Call me old fashioned, but I like using printed recipes in the kitchen. They can sit on the counter next to my messy prep area and I can annotate them any way I like. Afterwards, I can throw out the recipes I don’t like, and add the good ones to my found recipes binder to reference again when I’m searching for something to cook. It took me a while to truly adopt this trick though, because at first the frugal side of me said “why throw out recipes, people pay money for recipe books!” Eventually, after posting multi-inch stacks of Blue Apron recipe cards to on Craigslist, I determined it’s more practical to only keep the ones I would enjoy cooking again. It’s much harder to remember afterwards how much I liked a particular recipe or not when there are hundreds of them to review.

My first goal is to design an okay online layout with a great printed layout to be printed at home. Later, I’ll dive deep into better on-screen and perhaps even voice supported recipes.

I knew this recipe so well that I could recite the exact ingredient list and steps from memory to a friend over the phone while driving a car.

A recipe card can be designed in many different ways for different needs. A shorthand recipe card is useful if you have made a dish before, or you’re an expert in the kitchen who can improvise and enhance as they do.

For example, I have a shorthand recipe card for something I’ve made almost a hundred times since I was a teenager: brownies. I know exactly what baking methodology each step requires, but someone who is following this recipe for the first time would be lost!

However, for a meal planning service, I want to lean on the side of teaching cooking tips, time effectiveness, and clarity to avoid “oops” mistakes.

Recipe Card Style Influence and Direction

While I admire the photo plus text style of Blue Apron (a recipe plus ingredient delivery service), that photo heavy style doesn’t translate well to recipe card that is printed at home from a meal planning service .

However, I do like that every single recipe fits onto a single sheet of paper, and how they chunk the instructions into sections with a quick descriptor of the overall step. So, the recipe card prototype design needs to fit every recipe onto a single sheet, while providing a clear overview of steps involved.

Comparing my prototype recipe cards from week 1 (left) and from week 2 (right)

The difference between my 1st prototype and my 2nd prototype

I made the perfectly* designed recipe card and shopping list prototype for week 1. It was actually html based. I read up about the latest and greatest print CSS and wrote a custom stylesheet. But it was a pain to actually fill out with recipes because I manually created the html.

*I’m poking fun at myself here. Of course it’s not perfect, but I was so enamored with making it look pretty that I momentarily forgot the good-enough practical side of prototyping that I advocate.

I had to give up the very visually designed layout (for now) to instead use a prototyping tool where I can focus on creating the content. For me, for now, the right prototyping tool is Google Docs. Yes, the formatting options are limited. Yes, I have some sloppy copy-pasta formatting goofs. But it works and is good-enough at approximating the layout design for the recipe card and the shopping list.

Shopping list prototypes

Yikes! Look at all those colors in the “not-pretty” prototype! I would not ship a product like that, but it was something I needed during the process of creating the meal plan to make sure I captured all the ingredients for the meals in the shopping list.

Week 2 of prototyping a meal planning service: Meatballs x2

Designers: Approach a personal task you hate doing as a UX design exercise

So, is it working?

Yes. I still hate meal planning, but combing through the recipes and making notes about how to improve the instructions for a hypothetical someone else gives me much more motivation than just doing meal planning for myself. I put in the extra effort to prototype a recipe card, instead of just viewing random websites on the computer screen. Honestly, making the prototypes of recipe cards and printing them out has actually made my life easier when it comes to doing the cooking throughout the week. Even if some of my instructions are in short-hand and not what a final meal planning product would look like. For example:

  • Cook Fish Do something, cook fish with lemon slices.

In an ideal world, this would become one of those side projects that becomes a real company. But that’s not my goal right now. My goal is to eat healthy, and that means cooking every night. And cooking every night means having a meal plan. So I’ll keep chugging along, prototyping the most useful thing, in the most practical way, to meet the most important needs first so I can cook every night, and eat healthy.

Do you do meal plans? Do you wish you did?

Tell me about your current frustrations and share any tips in the comments below!

--

--

Saara Kamppari-Miller
Designer Geeking

Inclusive DesignOps Program Manager at Intel. DesignOps Summit Curator. Eclipse Chaser.