Design Process🐍

notion image
 

1️⃣ Discovery & User Research🔬

💡
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
notion image

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
    • notion image

Scheduling a Meal🧾

  • Can book multiple meal for same time
  • Can remove member for a meal based on their preference
notion image
 

5️⃣ Design System 🎰

Brandings and Colors

notion image
  • 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

notion image
  • 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
HomeScreen
Animated sun, Group Icon and emojis to make it appeal to the GenZ user base
 
Survey
Survey
Easy 5 question survey to reduce bounce rate
 
 
 
Recipe Selection
Recipe Selection
Group Share option with Edit and View Permissions
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
Group Member Information
Option to select preferences per member
 
 
Member Selection
Member Selection
Create group
Create group
Popup form to maintain the context of the current screen
 
 
 
Date-wise Menu Planning
Date-wise Menu Planning
Option to select preferences per member
 
 
Breakfast Selected
Breakfast Selected

7️⃣ Prototype 📺

 
Video Prototype
Figma Prototype
 
 
notion image

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
notion image
notion image
 
badge