DIYFoodie
DIYFoodie
Reimagine the way you find your recipes
About DIYFoodie
DIYFoodie is an app that targets to help college students and young adults utilize their home ingredients and easily find recipes that match what they have at home. I designed this app for my Design Project 2 in my Digital Product Design Class. I went through many trials and errors—from brainstorming, sketching, persona mapping, and wire-framing, to my current prototype. Everything below will give you my entire process of creating this app!
Timeline
Oct 2022 - Dec 2022
Role
UX Designer
Team
Individual
What I did
Brainstorm ideas
Define (Persona, User Flow)
Develop (Sketches, Wireframes, Usability Tests)
Deliver (High-Fidelity Prototype)
Design Process
Over the course of a month, I came up with my project idea, finalize my problem statement and target audience, and designed my app. To start my design, I started to do a few sketches of what types of screens and key actions I wanted to have to answer my problem statement. After I got the baseline of what I wanted in my sketches, I began wire-framing on Figma. The majority of my sketches made it onto my wire-framing and the sketches that did not were the ones that were not as relevant to my problem statement. I then began to start my High-Fidelity prototype by choosing my color themes, fonts, icons, etc.
Personas
Primary Persona - Hannah
Hannah, 2nd-year college student living in an apartment: Hannah is a busy pre-med student that works part-time and spends a lot of her time studying. She has to pay for her own college tuition and her daily expenses. She does not have enough money to eat out often, so she resorts to buying groceries and figuring out what to eat every day. Because she’s so busy, she usually finds something that's quick and easy, but often neglects a lot of the veggies in her fridge, and they end up wasted. Hannah wants to find a way to use all the ingredients in her fridge to create good, cheap, and easy meals to keep up with her busy schedule. Hannah finds the DIYFoodie App and decides to use it. She wants to look for a quick meal that can be made with ingredients in their home. Hannah first clicks on the “discovery” key action to see and browse through recipes that match their ingredients that are roughly 100% match on the discovery screen. She then clicks on the search bar on the discovery screen to search for a recipe name, and the recipe that matches her home ingredients the best will pop up first. Hannah found a Chinese fried rice recipe she wants to make. However, she discovers that she is missing a few ingredients in the chicken fried rice recipe she wants to make. Hannah clicks on the “add to shopping list” button. She will be able to view what she needs to buy for the chicken fried rice recipe on the “shopping list” screen
Secondary Persona - Stephanie
Stephanie, a college student living in an apartment with a dining plan: Stephanie lives with 3 other roommates that cook their own meals. Her mom bought her a dining meal plan this year so Stephanie doesn’t have to work on cooking her own meals while attending her classes. She stores a few items in the apartment refrigerator every now and then but noticed a weird smell coming from rotting ingredients left by her roommates. She is quite bothered by the rotting vegetables and molding groceries and hopes her roommates would find a way to reduce waste and use up their ingredients. She discovers the DIYFoodie app and recommends it to her roommates.
Prototype
The link to my prototype can be found here.
After trying out various layouts, colors, functions, etc., and discussing my design with my peers and instructors, this is my current version of this prototype. Looking through this mock-up will allow you to take a look as to the intended use of each feature I implemented to answer my problem statement. Below I also included brief descriptions of the key components of my app prototype.
The prototype’s first screen is my app’s name and the problem statement, to briefly describe the problem I am addressing with this app. The Problem Statement screen is followed by the next screen which allows the user to choose to log in or sign up. If the user signs up, they will go through the setup process. The third and fourth photos above are examples of what the setting up process looks like. This setup process is designed to help navigate users to more suitable recipes that fit what they are looking for, and the ingredients in their homes.
There are four main screens users will be able to access when they use the navigation bar. There is the discover page for users to browse through different types of recipes, and easily see the % match to their home ingredients and the rating for the recipe. Users can also search for recipes in the search bar, and the recipe that matches their home ingredients the best will appear on top. The next button following the discovery page is the shopping list button. Here, the user will find recipes that they want to make but have missing ingredients. On the recipe page, there is a button to add the missing ingredients to this shopping list for the user’s easy access the next time they grocery shop. I also have a home ingredient button, where users will be able to see the home ingredients they added from their sign-up process and edit them. If they did not add their home ingredients when they first set up their account, they can start adding ingredients here, so users can find the most relevant recipe for them. The last button on the navigation bar is the profile page. Users can view their saved recipe and their recent activities on the app, here.
Rationale
Why DIYFoodie?
I came up with this app because I think I can personally relate to the problem statement myself, as a college student who cooks her own meals. I sometimes find the leftover broccoli in my fridge that I forgot about and wonder—what can I make with this? The app prototype I designed is a straightforward solution to the problem of not knowing what to cook with the ingredients you have at home. When I look for recipes to cook with the ingredients I have, I usually find recipes that I don’t have the exact same ingredients. This leads me to click and search various different recipes on google, which takes some time and I am never guaranteed to find a suitable recipe. With DIYFoodie, users can add all their home ingredients into one place, and be able to browse for recipes that could potentially have a 100% match so they don’t have to go grocery shopping, and make a quick and easy meal! DIYFoodie allows users to browse different categories of recipes that match their home ingredients and save recipes to where they can save them to their profile. If the user wants to make a recipe but doesn’t have all the ingredients, they can add the ingredients they don’t have from the recipe page and saves those ingredients to their shopping list. The features DIYFoodie gives an all-in-one experience where users can quickly access easy recipes to save time, reduce food waste, and save money from eating out or buying additional groceries.
The design and visual elements I implemented into my prototype were intended to be as simple, but as informative as possible. I wanted to showcase a variety of recipes and photos for users to view on the main/discovery page after they get through the entire login and sign-up process. I wanted everything to be labeled, with recognizable buttons like the bookmark button and the back button for easier usability access for the user. I wanted a light color background and theme of white and pale green to make the pictures and texts to pop-out more for the users to focus on the different recipes.
Inspired by recipe apps like Allrecipes where you can find a variety of recipes in one place, this app that I prototyped has a simple, lovable, and complete (SLC) design where it addresses common problems that many young adults may have, and I think this app is the best solution to my proposed problem.
User Feedback
The first user feedback I received on my prototype was from Andy, my instructor. We talked for over an hour discussing the possible changes and ideas I could implement or take off in my app. Talking to Andy made me realize all the issues I had at the time with a user that used my prototype, but that wasn’t me. As the designer, it’s really easy to add a button here and there, and just assume that the user will know how to use it. However, if a feature is not labeled or given instructions, it can confuse the user. Andy pointed out how the buttons I had for adding ingredients to the home ingredients page and adding missing ingredients from recipes to the shopping list were quite confusing since the button only had a “+” and nothing else. For the user to understand the purpose of each function, clearly labeling the button as it is (e.g. “add ingredients to shopping list” button) will ensure the user will know how the button functions and how to proceed within the app.
During one class period, we were able to conduct a usability test on a few of our classmates. My usability test consisted of 7 different scenarios that I read to my classmate and then gave them a usability task to do, and see how fast they could complete the task. My first participant in my usability testing was my tablemate, Sophia. I first explained to Sophia the purpose of my app and read to her my instructions on my usability test. I then began the 7 different usability tasks by reading the scenario and the associated task for her to complete. When she completed the task quickly, I knew the function was complete. When she did a task slower than the other tasks, I would ask her what she was confused about. The task she could not complete was a prototype error on my end, and she could point it out for me to fix.
User Feedback is one of the most important key elements when it comes to designing an app. At the end of the day, who are we designing these apps for? I learned that it is essential to make sure the app has a purpose and that its usability and visual elements are top-notched for the app to be noticed.
Next Steps
With this app, I mainly focused on proposing a solution that was as straightforward as possible to my proposed problem. My next steps to improving this app would be to add a feature to allow users to add their saved recipes into different categories, such as desserts, dinner, and breakfast foods so the user can easily access a library of recipes for whatever they want to cook! I would also love to increase the communication between different users on the app, to where users can share their experiences of cooking with the ingredients they had at home so they did not have to grocery shop as often, as well as share their own personal recipes for others to try out! Building a community onto this recipe app will draw more users in to be more interactive, and maybe try a new recipe. Implementing this feature would be amazing to see how versatile my app could be.