Context
Problem
Students are broke, busy, and lazy, but still need easy ways to organize and plan their meals.
Solution
A meal planner app that helps to collect meals based on your budget, time constraints and effort. Choose different recipe "playlists" for whatever the occassion.
Role
Product Designer
Purpose
Personal Project
Timeline
Jan - Mar 2022 (3 months)
Preview ~ Final Designs & Prototypes
01 Creating Plans
Create a new plan whenever for whatever.
02 Adding Recipes
Explore and add recipes to your plans.
03 Cookin'
Get straight to cookin' with the help of step-by-step instructions.
Ideation & Defining
As my first major design project, I had a lot of ideas running through my head on what to build. I really wanted to create something that I would use and something my friends would use. As this time was also my first year of university, I felt a food app for students like me was the way to go.
To help understand my audience, I interviewed 6 of my post-secondary friends to understand their struggles and gripes related to eating during school. Here are the 3 main findings:
01
"I'm way too broke to eat out so I have to make stuff."
02
"I don't have enough time or energy to make single meals."
03
"I don't know what to make."
After narrowing down the problem to solve for, I competitively analyzed similar products in the market for their use cases and areas of improvement. Then I defined the main user journeys of my app, along with its stages, tasks, thinking, and opportunities. Not everything stuck through to the end, but it helped to define the app direction and features for design.
Analysis
The next step was to roughly outline my creative brief from my findings to help guide myself during designing and iteration.
Main Hypothesis
"If we allow students to plan meals based on their own budget, they can save more money."
Main Scenarios
You find recipes to meal plan for the next week according to your budget
You want to make a quick snack
You want to find a new recipe to make
Business Opportunities
Allow users to formulate plans based on specific limitations
Create and access multiple plans for reuse and for any situation
Final Designs & Prototypes
Adaptive Poster
Poster at the top of the explore page for showcasing popular recipes, seasonal eats, for first time user onboarding, and more!
Your Plans
Access any of your plans for whatever the vibe is.
Plan Details
Compare the current number of recipes and price to what you set. Adjust the number of servings for each recipe and add new ones as you please.
Creating Plans ~ Demo
Create a new plan whenever for whatever.
Create Plan Pt. 1
Give your plan a beautiful name.
Create Plan Pt. 2
Set your budget and timeline.
New Plan
Your plan looks pretty empty right now. How about you add some recipes?
Adding Recipes ~ Demo
Explore and add recipes to your plans.
Explore
Search and filter for all the foods you could ever be craving!
Recipe Card
Learn more about a recipe, adding it to a plan or getting straight to cooking. Find everything you need, like ingredients, cooking instructions, reviews and more.
Choose Plan
Choose or make new plan to add a recipe to.
Cookin' ~ Demo
Get straight to cookin' with the help of step-by-step instructions.
Step-by-step
Easy to follow steps accompanied with visuals and videos. Enter "Touchless Mode" for voice controls if your hands aren't free.
Exploration & Iteration
Before landing my final designs, I conducted light testing with the same 6 friends, asking them their opinions on concepts and usability. Below is some rough work and notable early designs/ideas that were changed after gaining more insight on user needs, wants, and usage.
Groceries
Early app direction included features that helped you shop for the cheapest groceries near you. It branched too far from the problem. Perhaps in a future update?
Inputs
Creative ways to input information like a calendar and scroller, made it unnecessarily difficult for users to put down exactly what they wanted.
Meal Schedule
Specifying meals for each day of a plan had similar issues to the grocery features. It didn't align with the target audience's needs and became too complicated for casual users.
Vertical Feed
The original explore page held a "one after the other" feed layout. Testing showed that users preferred the masonry grid style, wanting to see more on the screen at once for faster decision making.
Reflection & Takeaways
Figma 101
Being my first major design project, I experienced a lot of things for the first time, but I was able to learn A LOT. Looking back, I have grown a lot with Figma. The way my past self grouped and manipulated my work made creating this case study so much harder 😭
It's Not One & Done
For some reason I hadn't expected to do as much exploration and iteration as I had thought. Even if the idea sounds dumb, quickly designing out those thoughts is important.