Mealmo7.png

Mealmo

Meal Prepping, Made Easy.

UI/UX Case Study

 
Summary

Mealmo is a meal prepping and rewards application for university students. The application helps students save time by accommodating features that allow users to explore recipes efficiently while staying on track with their meal prepping schedules for student rewards. Mealmo also consists of a community where students can post recipes online and gain inspiration from others.

Role

Research, Ideation, UI/UX, Prototyping, Branding, Design, Motion Graphics, Illustration

Tools

Figma, Illustrator, InDesign, Adobe After Effects, Photoshop

Duration

Jan - Mar

3 Months

2021 

Team

Jamie Kwong

Katie Tran, Paolo Michele, Jun Lai

Problem

Students of higher education are developing improper eating habits. Due to time constraints and distractions, university students are meeting below the recommended daily food intake. Students may lack cooking knowledge since they are moving away from home and they may lack the motivation to stick to a strict eating schedule.

Easter Food

Design Challenge

How can we design a product that will be convenient for students while keeping them on track when it comes to meal prepping schedules?

Solution

A mobile application platform that incentivizes meal prepping and builds a community of cooking enthusiasts. Mealmo keeps students on track with their meal prepping schedule by incorporating rewards from completing tasks and meal preparation. Students can also use the meal prepping calendar to add meal plans while gaining inspiration from the community to save recipes and try out. Below is a promotional piece on Mealmo for new users.

Animated by Janet He & Paolo Michele

Illustrations by Janet He, Jamie Kwong, Katie Tran, & Paolo Michele

MealmoCase.png
Onboarding.gif
Onboarding

A smooth onboarding experience, used to get to know the user's preferences and tastes better. Mandatory for first-time users who want to connect to their educational institutions.

Inspirational Feed

Explore page features new and trending recipes in the community. Users can also post recipes and follow friends to check out their recipes for inspiration.

Explore.gif
Calendar.gif
Stay on Track

A meal calendar fully customizable to the user’s schedule. Users can add recipes to specific dates and times for their meal plans with the option to set notifications and alarms to stay on track.

Save & Create Recipes

Explore and share recipes, while creating your own. Save delicious recipes while personalizing them to your dietary preferences.

Recipes.gif
Profile.gif
Profile & Student Rewards

Partnership with an educational institution to offer relevant and appealing incentives to students. Institutions can offer discounts at their local bookstores to help students save money on textbooks. Users can also see their posts and edit their account preferences through their profile.

PROCESS

Competitive Analysis

We started off by investigating existing applications that involve meal preparation. Competitors included BigOven and Mealime. The pain points we’ve learned involved bugs, premium subscriptions, and recipes overpopulating the recipe pages. BigOven’s user interface was messy and was hard to navigate for users while Mealime’s interface was easy to navigate and was organized. After as a group, we created a PACT analysis, user personals, & user scenarios.

Competitors.png
People
People

press to zoom
Activity
Activity

press to zoom
Technology
Technology

press to zoom
People
People

press to zoom
1/4
Understanding our Audience

The primary audience for our mobile application are higher education students. Our approach involved creating user personas and user scenarios. We also conducted user interviews to gain insights into the perspective of the students.

User Persona - Maeve
User Persona - Maeve

press to zoom
User Persona - Liam
User Persona - Liam

press to zoom
User Persona - Maya
User Persona - Maya

press to zoom
User Persona - Maeve
User Persona - Maeve

press to zoom
1/5
Ideating the Application

As a group, we brainstormed the system requirements and features we will need for our application. We then created a chart and included indications of priority standings, requirements, rationales, and the system function. Before heading towards the design stage, we established a system map and user flows for the application.

System Map 1.png
1/2

DESIGN PROCESS

Visual Design & Branding

While building the architecture of the application, we also started with building our brand. This includes the color palette, typography, and brand values. We wanted a color scheme that would be appropriate for our target audients. We went with a light orange since the color invokes a more inspirational and motivational mood. As for the interface, we wanted a clean and modern feel, going along with SF Pro rounded as the typeface.

Logo.png
Visual Design.png
Low & Mid Fidelity

After establishing the visual guideline, branding, and color pallet, we sketched out the layouts and created black, grey, and white screens on Figma to create layouts.

1/4
High Fidelity & User Flows

Mealmo is broken down into five main sections, home, explore page, recipe, calendar, and profile. Here are the breakdowns for the user flows of the final screens.

Onboarding Userflow
Onboarding Userflow

press to zoom
Home Userflow
Home Userflow

press to zoom
Preference Userflow
Preference Userflow

press to zoom
Onboarding Userflow
Onboarding Userflow

press to zoom
1/8
1/15
1/3

After designing the high fidelity prototype, we finalized the prototype after the user testing. Throughout the user testing, we gave 4 participants 13 tasks when given the prototype (based off the user personas we made). Most of the user testing went smoothly but we have discovered some bugs, suggestions, and insights from the feedback.

User Testing
Motion Graphic & Illustrations

The illustrations showed up in some buttons and the motion graphic promotion video. The process for the motion graphic began with creating and sketching out mood boards. After the screens are established, we went ahead as a team to create consistent illustrations. Paolo and I were in charge of creating the motion graphic. My role was to animate the illustrations and logos, while Paolo took charge of the interface animations and sound syncing.

Storyboarding.png
Illustrations.png

REFLECTION

Reflection

Mealmo was an extremely fun project to work on. Coming together as a team as food enthusiasts created a fun and cheerful atmosphere as we all worked on the project together. I found that working on projects as a team to be very fun and mind-opening as everyone came up with a pocket full of ideas. Everyone came from different backgrounds, and we leveraged everyone’s strengths!

 

Throughout the process of designing Mealmo, I’ve discovered that interviews and user testing can be extremely useful. As we went forward with the interviews, its great getting insights from people’s experiences and pain points from different applications. This allows us to avoid the same mistakes other applications had as we design and ideate our application. User testing is a must when it comes to ensuring that the final prototype goes smooth sailing without any broken links. It is also important to create an application where users can pick up the interface quickly.

 

Overall, the teamwork was phenomenal, and I had a wonderful time designing Mealmo. My favorite part of the project would be animating the motion graphic with a team member! Watching the project come together was definitely satisfying, and everyone learned a lot throughout the phases.