YoRecipe, an App for recipe enthusiasts

A conceptual recipe creator where a real person becomes the persona

The brief

The app was part of the first project at the General Assembly UX Design Immersive. I was tasked to design a conceptual mobile app prototype to attend and solve a specific problem of an assigned classmate, in 1 week.

  • User Interviews and Experience Map.
  • Problem Statement and Outcome and Storyboard.
  • User flow and Wireframes.
  • Prototypes and Usability Testing.
  • Good old pen and paper.
  • Marvel App and Zoom, to build the prototype and test it out.
  • Canva, to present my work.

Entering the design process

My assigned partner was Fina Khalil. And the first thing I had to do was:

I had the pleasure of interviewing Fina on two occasions, gathering information of who she is, what are her needs and what she struggles with. I found that she:

  • Considering herself as a creative person, she loves to cook.
  • For what she follows recipes on her phone most of the time.
  • She experiments with them.
  • She’s a tech-savvy and prefers to get stuff done in a digital format.

Fina mentioned that she wants to keep track of those recipes and the versions she creates of them, but:

“I just don’t like to write them in books, it just takes too much time” — Fina

So I represented her situation in an Experience map. Clearly identifying her pain points, as an emotional decline takes over Fina when she has to write the recipes down.

An Experience Map is a visualization of the experience that a user goes through to accomplish a goal.

She then added (referring to that process):

“It would be nice to have an app that does that(…)” — Fina

Having that in mind, I framed her problem as a Problem Statement, which is simply a concise description of an issue to be addressed upon, and is the following:

Fina needs a way to search and manage recipes and versions of them on her phone because she doesn’t like to use cookbooks as they take too much time.

Ideating a Solution

While ideating potential solutions for Fina’s problem, many ideas came to mind. Still, because she didn’t want to spend unnecessary, I thought that creating an app that could easily let her search, save and alter recipes was the best option, with the least amount of steps.

Wireframes on paper, which are a representation of the structure and elements of the app’s screens.

After a few sketches, and deciding for YoRecipe (6th sketch), I then designed the Wireframes for the app to see how it could work.

Screen flow of adding and downloading recipes.

After having the main page designed, I decided how the app was going to let users add recipes, by the + icon, and save them, by the icon at the bottom right corner (last screen).

Screen flow of editing recipes and saving/cancelling changes.

Furthermore, the option to edit the recipes would come by the cogwheel button, and yes-no icons, to save or cancel details.

To represent Fina’s experience once she had YoRecipe, I created a storyboard:

A Storyboard is the visual representation of the experience of the user with a product.

As the outcome resulted in being positive, I felt confident moving forward.

Creating a user flow allowed me to map out all the necessary steps Fina needed to take to achieve a successful outcome. This reassured me in my design process as the steps matched the sketched screens.

A User Flow is a path that the user would follow to complete a task.

Testing YoRecipe

I then designed a prototype on the Marvel app, using my previews wireframes, to test it out to see what was working, and what wasn’t.

I conducted 2 usability testing, a technique where users test a product (in this case, the prototype), to get feedback to improve upon. The feedback was:

  • Tester 1 didn’t understand the + icon.
  • Tester 2 confused the functionality of the element at the top right corner.

The first thing I had to iterate, change, was the + icon since it wasn't intuitive enough. So “add a recipe” came to be.

The configuration button at the top right corner was misunderstood as part of the categories. As the tester thought, the users would be able to swap in between categories and also access the configuration of them. I iterated the button functionality into his thoughts as I realized it was the best option.

Wrapping Up

After all the changes were made, I rebuilt the prototype so you all can get a glimpse of YoRecipe. First lets just put ourselves in Fina’s shoes: “It’s dinner time, and you want to make a pepperoni pizza, but you don’t have the recipe yet, and you would also like to experiment with it in the future.”

Now see if you can complete her journey!

https://bit.ly/3qDeJ5q

Conclusion

Fina’s need is met with this app as she can search, save and later on edit them in a fast way as she pleases. No unnecessary time to spend.

  • Interview more users and explore desirable features.
  • Take the wireframes into higher fidelity by conducting more usability testing.
  • Create an engaging UI to visually communicate with the user.
  • The project was positively received, as I did a well-structured presentation, I talked about my process and always referred back to Fina.
  • Although the problem statement could be more focused, as a part of the audience thought it was a bit too broad.
  • And in the prototype, it would have been better by showcasing it with an interactive tool to show its functionality, not just the screens (as I did).

Overall, looking back, this project taught me a lot. This was an introduction to UX, and I started to learn how to keep the users' needs in mind. I also begin to learn how to conduct research and to how to put all the gathered data into something that people outside of the project can understand.

Thank you for reading this UX journey!

Hi, thanks for stopping by! I’m a 21 y.r. UX/UI Designer living in London. I’m trying to start my career to work with an amazing team and in awesome projects!