Top banner for Schematic Capture app
Finally, all of your recipes in one easy-to-read place!

Home cooks have forever been scribbling in cookbooks, often handed down through generations. Many family dishes have gone the way of the dodo because of a lack of reliable, and legible, recipe versions.

Enter, MyDish.

screenshot of initial zoom meeting
The new team starts hashing out how to move forward with MyDish.

So there we were, at the edge of a new adventure in making apps. Apps to help people save recipes, modify them, keep notes, and become better cooks.

We were a team of four data scientists, four web developers, and two user experience designers.

We had 7 weeks to complete the overhaul of this anticipated mobile app called MyDish

🍲 What's a heckin' MyDish anyway?

MyDish is an app that stores recipes.

Cooks can record, browse, copy, modify, save, and refer back to each version of a recipe.

This solves the problem of people scribbling in their cookbooks, not able to keep track of their recipes and the different versions they come up with. It also allows for a community to grow and share their favorite dishes.

mydish initial home screen on app store
MyDish home screen on app store.
mydish initial my cookbook page
MyDish “My Cookbook” page in experience.
mydish initial screen to input a recipe
This is what it looked like to input a recipe.
mydish initial screen for viewing recipe
This was how viewing a recipe appeared.

In its initial stages, the functionality of the app was minimal.

Users could not upload photos, inputting recipes was a tedious process, and the navigation felt clunky and unfinished.

🤔 How might we make recipe input pleasurable?

Inputting a whole recipe piece by piece sucks and takes a lot of time.

As a team we thought there should be some kind of ingredient prediction and/or autocomplete to help cooks input recipes quickly and efficiently.

That would solve the issue of home cooks not returning to MyDish because of the tedium of slow input.

📷 We also focused on content moderation to prevent people from inputting and uploading inappropriate images or words to recipes, as well as the ability to upload images in the first place.

👀 Lastly, the UI was good, but not great yet, and it needed some upgrades to help the users get though creating, editing, and viewing their recipes.

clipart of a frustrated user on their mobile phone
screenshot of zoom meeting with client
Meeting with the client to get clarity on the priorities for the application.

Then this meeting happened with the client.

The client stated that before we worried about users inputting inappropriate content, we need to get and keep cooks.

We cut content moderation and focused on making sure that cooks would want to use and keep using MyDish.

We put emphasis on assisting home cooks in creating and editing recipes as much as possible.

🕵️ Finding where to look.

We sifted through the previous team's research and used our findings as a jumping off point.

screenshot of past research and design for mydish
A collection of all the past reserch and deign for MyDish.

After discovering our gaps in knowledge regarding the goals we had for the app, we started filling those gaps.

We interviewed several potential users and spread a survey to gather more insight.

screenshot of interview with a home cook
Productive interview with a home cook.

“Sadly, I’m old school when I save my recipes. If I like one and I know that I’m going to use it a lot, I handwrite it in an old notebook that I keep family recipes in and scribble notes and changes all over it.”

- Dee Jacobpito

📣 The people spoke.

Our key finding was that people really do scribble in the margins of old cookbooks often, and the reason that they haven't digitized their recipes is basically because it sucks typing recipes and there is no way to keep notes on variations of their family favorites.

screenshot of mydish survey
Survey result were validating and at time surprising!

This information validated our direction and so we got to work making the app that MyDish deserved to be.

But hold on.

🤷‍♂️ What does this new flow look like?

We digested the existing wireframes to research what the previous designers experimented with in their explorations.

screenshot of previous wireframes
Some of the previous wireframes for MyDish.

The team and client were wanting new ways to display information, so I hit the drawing board.

Making the flow to create recipes as easy as possible was definitely a challenge, but I was lucky to have the rest of the team working on some really cool features to speed up the input process exponentially.

wireframe for add recipe screen
How might we let the user decide how to input recipes?
wireframe for input recipe screen
How might an input page look?
wireframe for photo selection screen
Should photo selection be unique?
wireframe for edit recipe screen
How much editing is viable for food photos?
  • Features such as:

  • Image upload
  • Intelligent autocomplete
  • Ingredient suggestions
  • Recipe image parsing with automatic input
  • I highlighted those features while giving the app some new flavor, and making it accessible.

color wireframe for predictive text screen
How might we show predictive text?
color wireframe for suggested ingredient screen
How might suggested ingredients work?
color wireframe for pill buttons on screen
Are pill button ingredients preferrable?
color wireframe for indicating action on screen
What about color to indicate actions?

Input from the team, client, colleagues, and potential users steered several design decisions such as the suggested ingredients list, the autocomplete, the cuisine buttons, and the edit screen.

  • Input such as:

  • A warm color direction
  • Categorical buttons for types of cuisine
  • How the suggested ingredients list might work
mobile screenshot of orange buttons for testability
Orange is hard for accessiblilty.
mobile screenshot of red buttons showing better
Red tested better and is more visible.

We designed for in-line editing of recipes at the client's initial request.

later version of mobile view recipe screen
A later version of the View Recipe screen.
screenshot of mobile showing tap to edit option
Client requested tapping on ingredients to edit.
mobile screenshot viewing steps for recipe
Viewing the steps to a recipe.
mobile screenshot of tap to edit steps
Tapping to edit the steps.

However, upon usability testing, it was obvious that cooks would struggle with knowing that they could tap on information to edit it.

We decided that it would be best to have a button and specific mode for editing recipes.

screenshot of added buttons for mobile
Addition of edit and delete buttons.
screenshot of revised view of recipe steps for mobile
Revised view of recipe steps.
mobile screenshot viewing steps for recipe
Editing a recipe.
mobile screenshot of adding an add notes screen
Notes for version history identification.
🧙 The design journey.

Changing the app to a design system that made more sense took a lot of incremental steps.

Here are some of those steps and the final results.

old mobile view of homepage
MyDish homepage before.
iteration of mobile redesign of homepage
An iteration of the redesign.
additional iteration of mobile redesign
Further refining ideas.
screenshot of final result for homepage
Final result.
old mobile view for my cookbook
My Cookbook page before.
iteration of mobile redesign for my cookbook
An iteration of the redesign.
additional redesign of my cookbook
Further refining ideas.
screenshot of final result for my cookbook
Final result.
original screenshot of mobile view recipe screen
View Recipe page before.
iteration of mobile redesign for view recipe
An iteration of the redesign.
another iteration of mobile redesign for view recipe
Further refining ideas.
final mobile screen for view recipe
Final result.
original screenshot of mobile create recipe screen
Create Recipe page previously.
iteration of mobile redesign for create recipe
First major iterations.
another iteration of mobile redesign for create recipe
Further iterations after testing.
final mobile screen for create recipe
Final Create/Edit Recipe page design.
🔑 Key findings.
  • Here are a few important results that I found by working on MyDish.

  • Building onto a project that has already had the groundwork laid out presents different exciting challenges than a start from scratch.

  • The team is everything, because without the other incredible people working on this project, the results would not have been quite as amazing.

  • Simple, straightforward, and clean design helps to convey information as effectively as possible to any user base.