Overview:

This recipe selector makes finding a lunch recipe fun and easy. Users can get help finding a recipe by answering questions about their preferences, or they can look through all of the recipes to find one on their own.

I independently designed and developed this recipe selector using Articulate Storyline, Microsoft Powerpoint and Word, and MindMeister.

Why a Recipe Selector?

I love sharing recipes with friends and family. One problem I run into frequently, though, is how to help them choose a recipe that they’ll like. If we’re cooking together, I can ask them a bunch of questions about what they’re in the mood for, what ingredients they want to use, etc.

But if they’re prepping on their own, they’re left to their own devices. And looking through a list of recipes isn’t very helpful, unless they’ve made them before and remember what each dish is called.

Sometimes I tweak the recipes, too, and emailing a new recipe document isn’t very efficient. I don’t always remember who wants which recipes, and emails can get lost in the shuffle.

After creating several lunch recipes, I wanted a means of sharing them with people who would also enjoy them. I had the idea to create an interactive online tool, similar to eLearning modules that I’ve designed before.

In order to (1) offer help in choosing something to make and (2) keep everyone updated with the most current recipes, I designed and developed the “What Should I Make for Lunch?” recipe selector.

If users want help finding a recipe, they can answer a series of questions asking them to select one of two choices. After they’ve answered all the questions, they’re given a recipe that fits those preferences.

If they’ve made these lunches before and know what they’re looking for, or if they just want to peruse the options, they can instead go straight to the list of all recipes.

Once they’ve viewed a recipe within the tool, they can also click a link to download a printable recipe, which can be easier for people who don’t use devices in the kitchen.

How I Made It:  

I designed and developed the recipe selector from start to finish. To create it, I worked through multiple designs and iterations, incorporating feedback from actual users to streamline the experience and make the tool more fun.

I began by using Microsoft Word to storyboard the experience of choosing a recipe, including task analysis and action mapping to identify essential components of the selection process. I moved on to mapping out the interactions necessary for the selection in MindMeister and creating a series of mock-ups in Microsoft PowerPoint to hone the visual design.

Then I moved into Articulate Storyline to create branched interactions with variables and conditions dictating the progress of the activity. By incorporating feedback from users, I made adjustments to the tool and finally published it on my website and shared the selector more widely.

Storyboarding and Mapping:

I envisioned the recipe selector in three parts: introduction, guided selection, and recipe repository. I broke down the selection process into a series of binary choices, imitating the actions I would take if helping someone choose a recipe personally.

Narrowing the focus to binary choices (lentils or black beans? light and fresh or hearty and warming?) was conceptually important. Choosing a recipe requires weighing multiple factors, which is cognitively costly.

In accordance with Mayer’s work on cognitive information processing in eLearning, I knew I wanted to follow the principle of segmenting. This principle encourages breaking larger bodies of information into smaller, digestible (no pun intended!) chunks.  

Choosing between only two options at one time reduces cognitive load, which increases the likelihood that users will complete the activity and enjoy using the tool.

Once I had the selection process outlined, I could finalize the storyboard to reflect each decision point.

Mockups:

Before moving into Storyline, I used PowerPoint to narrow in on the visual design to unify the experience. I landed on a design incorporating a kitchen countertop, to mirror what users will actually be looking at when they prep these recipes.

I tried a few different designs for the introductory information, but ultimately I wanted to differentiate between the title/informational slides and the interactive components:

For information-based slides, I used the countertop background as a neutral blank slate. For user interactions, I moved onto the cutting board, the primary locus of action for a chef prepping their ingredients.

I also wanted to provide an option to print the recipes, which would be very ink-intensive if printed directly from the selector.

Since the aspect ratio of a piece of letter paper differs from the aspect ratio of an on-screen display, I needed to scale the content accordingly.

The printable recipes retain a similar feel to the recipe cards — they have the same font and two-column structure — but they substitute a white background and black text.

The URL at the bottom reminds the user where they can find the recipe selector for next time!

Development in Storyline:

Once I had the visual design more-or-less finalized for the introduction, selection slides, and recipe cards, I began programming the selector in Storyline.

This is one of my favorite parts of creating eLearning, since it draws on my background in formal logic as a philosophy professor. Programming branching interactions that change based on variables and conditions is something of a big logic puzzle.

I wanted to prioritize the selector option on the title screen, so I emphasized this button with a similar coloring and size to the title and subtitle. But if users prefer, they can go straight to all the recipes, a deemphasized option.

Appealing again to Mayer’s evidence-based recommendations, I relied on the personalization principle to guide the framing of the on-screen text. The personalization principle recommends using “polite wordings” to guide users through eLearning. So, I made recommendations and suggestions, rather than dictating the user actions.

Variables and Conditions:

One priority in the development process was using a single slide to house each recipe. Users can access this slide from the selector, or they can access it from the “All Recipes” slide. If I need to update a recipe, I want to minimize how many slides I need to change.

So, depending on which route users take to arrive at the recipe slide, they should see different buttons. If they arrive from the selector, they should have the option to re-do the selection process to find a different recipe. If they arrive from the recipe repository, they should be able to go directly back to that repository.

To accomplish this, I set variables that adjust depending on whether users click the button to go through the selector or the button to view all recipes. Then when they arrive at the recipe slide, it will conditionally display a different button accordingly.

This was a fun feature to program, and I was happy about making future recipe editing more seamless.

User Feedback:

I asked a few friends to work through early versions of the selector to gauge ease of use and utility. They unanimously thought the tool was “cool” and “fun,” which is pretty important for a completely voluntary eLearning activity that’s designed, ultimately, to help people select a recipe at home when they want some inspiration.

Based on their feedback, I did make a couple changes. One was ensuring consistency of language so it’s clear what the end-of-activity options are. It wasn’t initially obvious whether they were going back to the title slide or back to the first choice in the selector, so I used the same language that they saw on earlier buttons to increase the clarity.

I also adjusted the recipes so that the ingredients were listed by volume, rather than weight, since not everyone has a kitchen scale. While I personally prefer the weights, I didn’t want this to be a barrier to use. I’ll keep the weighted recipes for my own use.

Outcome:

Since publishing this activity and sharing the link more widely with other friends and family, I’ve received positive feedback on the recipe selector. One common theme is that figuring out lunch is kind of annoying, and this selector helps alleviate that.

I am also satisfied that I can update recipes as needed without spamming everyone with emailed PDFs of the adjusted recipes.

Future Directions:

One option for broader use is to share the activity on my Instagram page, where I regularly post food prep stories. If I decide to do this, I plan to add an additional set of slides offering guidance on ingredients and substitutions, which would probably be helpful for people that haven’t cooked with me or used my recipes before.

Because of the positive feedback, I’m also considering making a similar selector for dinner recipes. Let me know if you’re interested!