The easy way to meal plan. Because cooking
should always be as fun as eating.
I designed an app that tailored meal plans to users' preferences, making it easy to pick, prepare and enjoy meals every day. I wanted to highlight growth and personalization so that trying new things would feel comfortable and fun to users.
Eating healthily can be challenging, I know from personal experience! From preparing meals to just choosing them, we often lack the time or motivation to enjoy a diverse and nutritional diet. I especially felt this as a working college student, and I wanted to help people experience the joy of good food!
Mobile Design
Class Project
Solo
May - June 2023
Figma
Before I began my design work, I wanted to understand what currently existed in the realm of meal planning. By testing a currently existing app called Yummly with users, as well as browsing and trying a number of other related apps myself, I was able to identify needs in the field of meal planning.
Yummly was chosen as an app for analysis because it was one of the only free meal planning apps I could find. Users that helped me test the app found that it felt more like a recipe browsing app than a meal planning app. One of the biggest frustrations users had with meal planning apps was that they could not find any that actually offered meal planning tools for free, and instead all the apps they tried downloading had any actual planning tools locked behind a paywall.
In an effort to further empathize with my target audience of busy young adults, I created a proto-persona based on personal experience and tests I ran in my market analysis with users. My fictional chracter, Simon Armstrong, is very busy and has little time to think about what to eat, much less prepare it. The goal of my project was to help people with a similar problem by shortening decision making processes while encouraging a healthy lifestyle.
Next, I established three focuses my design would be based on:
Finding new and healthy foods while learning how to cook.
Making a customized plan for the week without any stress.
Getting ingredients as quickly and cheaply as possible.
I then created a flowchart to visualize the functions and user flows I wanted to design. This process helped me connect what I found in my research to my ideas, and made me think deeply about how my users might use my design.
At this point, I felt I had a strong grasp of who and what I was designing for, as well as some ideas on how I wanted to do it. I began by creating wireframes that I could use in a low-fidelity prototype to get user feedback.
The first pages I wireframed were sign-in screens. Letting users create an account would make the app even more personalized, especially if they transfered to a new device.
I wanted to emphasize personalization to make users comfortable exploring new foods and making meal plans. The onboarding process provided the perfect place to incorporate the user's preferences right away.
I broke the main pages into three sections. The home page was made to show important information quickly, while also making learning and exploring one of the first things the user sees upon opening the app. The meal plan pages showed weekly meal plans, which would be automatically generated based on the user's preferences. Each meal was also individually shown, allowing them to be edited as the user pleased. Lastly, the shopping page could be used to suggest the best shopping routes, balancing time, travel distance and cost for grocery trips.
I used my wireframes in a low-fidelity prototype, which I tested with about twenty users. These tests help me identify pain points for users in my current design, which I took into consideration when making a final design.
I based my styling on pizza for my final design because pizza is familiar, fun, easy to customize, and contains colors that are often associated with food! These traits perfectly fit what I wanted my design to feel like to users.
You can try my interactive prototype using the Figma window below, or click here to open it in a new tab!
Here's a breakdown of my final design. Click the images to see how they changed through my design process!
Since my initial wireframes, I added a tag system that gave users more freedom to choose their preferences on some pages.
My home page saw many changes between its initial wireframe and final mockup. I focused more on the user's upcoming meal to make the page easier to process, and added more tools that could be scrolled through below.
The pages I designed to display weekly meal plans were revised to highlight the current day stronger. An emphasis on each individual meal was made through imagery and titles as well.
I opted to remove the map from my final design in favor of a delivery option, which users said was preferable for timely grocery trips. I also made viewing and adding items on the list easier.
This design was one of my first interactive designs, and I had a lot of fun making it! Not only was it incredibly valuable for my growth, it confirmed for me that experience design was something I was pationate about pursuing for a career. It's been a long time since I made this design, and I've improved greatly in my design abilities since. If I were to revisit this design, I would tweak many of the visuals, adding more white space, cleaner shadows, etc. Even so, I am quite proud of this project as my first complete design process. At the time of writing this reflection, I've completed a variety of other projects, including graphic deisgns for hobbies and friends, mobile designs for businesses, and even game designs for clubs! Feel free to check out my other work linked in the footer below!
