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.
The techniques I applied
- User Interviews and Experience Map.
- Problem Statement and Outcome and Storyboard.
- User flow and Wireframes.
- Prototypes and Usability Testing.
The software I used
- 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:
Understanding who Fina Khalil is
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.
Is there a problem?
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.
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
Exploring
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.
After a few sketches, and deciding for YoRecipe (6th sketch), I then designed the Wireframes for the app to see how it could work.
Conceiving YoRecipe
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).
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:
As the outcome resulted in being positive, I felt confident moving forward.
Fina’s flow through YoRecipe
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.
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.
Fixing the issues
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!
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.
What’s next this premature app?
- 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 feedback received
- 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).
What I learned from my first UX project
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!
