In the Preliminary User Research , I conducted five user interviews(With my friends and family) in order to get a better understanding of the problem.
Key findings:
Different people repeat same food on different time period over a week. 3 out 5 user were ready to repeat same food after 3 days while remaining were fine with 1 or 2 days as well.
Not every user want high protein and low carbs food in every meal of the week.
They tend to plan ahead, although this does not always works out as planned.
In the same family, the preference of food can vary a lot and most of them were fine with having multiple meal cooked for the same time.
2️⃣ Defining Problem Statement⚠️
Which problems are the users facing and what are the options to solve it.
Planning meals seems tedious and most of the app are filled with crap things that makes the whole flow very time consuming
Most of the apps provide community for the recipe and are more focused towards recipe making rather than meal planning
Most app have meal planning as a side feature rather than the main feature of the app
User want to explore new recipe without spending much time searching?
We can take help of AI to show recipe suggestion based on usage and preferences of user
If the user don't want to look for other suggestion, they can pick recipe from favourite recipe list
They can directly add third party website link for the recipe
They want to share the meal plan with other members of the group and a view link to the cook as well
A well structured meal planning system where the user can share the whole family plan with other users
Some of the family member can edit/add meal plans
Every member have different preferences for food.
Make a meal selection process that is easy and should have least number of steps to reduce drop-off of the user
They can select their preferences while planning the meal
3️⃣Defining Product Features
Groups for Meal Planning👪
Can add general preference for the group
Add list of members
Share the group with others
Recipe Selection🧾
Recipe with pictures, features and last cooked details
AI based suggestion for recipe
Can add our own recipe or link it to third party website
Date-wise Meal Plan📅
Can plan meals for week ahead
Have Breakfast, Lunch & Dinner as Default
Can add other meal times
AI Implementation🤖
Survey questions to teach AI better
Show recipe suggestion based on survey
Time to time Custom notification with Yes/No Question to improve AI over the time
4️⃣ Wireframes 🔲
💡
Made on Excalidraw
On-boarding to Homescreen:🛹
After sign-up the user will directly land on the homepage where they can make a family/friend group for meal planning
Simple steps process on homescreen to make user understand the app in one go
Group Creation:🦾
Simple popup form with Group name, Total member and Group Icon for easy group creation
Preference Survey for Recipe Recommendation by AI
Member information with option to change individual preferences
Scheduling a Meal🧾
Can book multiple meal for same time
Can remove member for a meal based on their preference
5️⃣ Design System 🎰
Brandings and Colors
Variety of colors to make the app cheerful and helps in the visual heirarchy between different cards and tags
Inter as the font as it easy to read and have a good amount of spacing between each character. Inter has a relative x-height of exactly 3/4th the cap height that increases readability which is good to for reading recipe.
Components
Establish a global component system at one place to reduce hassle in changing design across all parts of the UI
Used auto layout in each component to make it resizable.
Added interactions between variants.
6️⃣ High-Fidelity Design 🏄♀️
HomeScreen
Animated sun, Group Icon and emojis to make it appeal to the GenZ user base
Survey
Easy 5 question survey to reduce bounce rate
Recipe Selection
Group Share option with Edit and View Permissions
Edit access for family members while the view access for the cook solving both the problems.
Group Member Information
Option to select preferences per member
Member Selection
Create group
Popup form to maintain the context of the current screen
Date-wise Menu Planning
Option to select preferences per member
Breakfast Selected
7️⃣ Prototype 📺
Video PrototypeFigma Prototype
Achieved
Colorful wire-frame that demonstrates what interface elements will look like
High-fidelity design with prototyping that shows the exact product model before development
Establishes a full-fledged design system for the scaling of design
Missed
Test dark mode for whole platform for better readability at night
Add a segment for recipe for better recipe addition and to make the AI suggest better recipe from the data base
Improvements in the recipe card to show more information