Making healthy eating an effortless and enjoyable journey
Responsive Web App & Brand Design
About Mealist
Healthy Eating is part of a lifestyle. It should be easy and accessible but doesn’t mean it has to be boring. Mealist is created to help health-conscious eaters with making good food choices and add variety to their daily meals without any hassle. It is a recipe and meal planning app that users will use every day to enrich their healthy eating journey!
My Role:

UX/UI and Brand Design

Timeline:

2 months (Feb - Apr 2020)

Tools:

Sketch, Illustrator, Usability Hub, InVision, Google Draw

Design Process & Deliverables

Discovery

Competitive Analysis
User Research

Concepting

User Stories
User Flows
Wireframing

Branding & Design

Logo & Icon Design
Style Guide
High Fidelity Mockup

Prototyping

Low-Mid Prototype
Usability Test

Discovery
Get to know the users
Following the Research Learning Spiral process, I used SWOT analyses to understand the existing market. I recruited 3 persons at my workplace, who I identified as my potential users, to gain insight into their needs, behaviors, goals and pain points. on the research findings, I mapped out the obvious patterns which help to shape the direction and MVP of my project:
01
Users practice some sorts of diet intending to improve overall health
02
Users agree that meal prep helps them stay consistent with their diet
03
Users like features that are personalized and customizable
04
Users think that a diet should be practical, accessible, and can be easily fit into their lifestyle
05
Users prefer recipes that are simple and require minimal ingredients
06
Users use a tool/app to keep track of nutrition intake

MVP and Key Feature Requirements

Based on the research findings, I mapped out the obvious patterns which help to shape the direction and MVP of my project:
1. Allow users to search for a food ingredient and find out if the ingredient is diet-friendly

2. Offer recipe recommendations based on users' diet preferences

3. Include nutrition data and serving size recommendations in recipes

4. Provide recipes that require minimal cooking time and ingredients
User Persona
I crafted two personas, Jessica and James to guide my design decisions and to ensure my design solutions are user-focused.
Jessica:“As a starter to the ketogenic diet, I want to quickly identify if a food ingredient is keto-friendly so that I don’t waste time on research when planning my meals.”
User Flow: Learn about the food ingredient
Jessica:“As a foodie, I want to enjoy a variety of tasty food even when I am on a diet, so that I don't get burned out easily.”
User Flow: Find Recipe Inspiration based on personal preference
James:
“As a user who has a busy work schedule, I want to find simple recipes and add them to a meal plan so that I can quickly prepare healthy meals on a daily basis.”
User Flow: Find a recipe with search features
User Flow: Create customized meal plans
Concepting

Wireframing & Rapid Prototyping

Once I decided on the optimal journeys for users to reach their goals, I adopted the Crazy 8s methodology to sketch out rough variations of wireframes. This process helped me with generating and iterating my ideas quickly.
Low-Mid Fidelity Wireframes
Home Screens & Navigation
Account Setup
Search Features
Search Result
Meal Plan
User Testing

Usability Test

With the prototypes underway, I was eager to know if the solutions I created make sense to my users. Before moving onto designing the user interface, I recruited 4 potential users to help me with validating my design decision. I used InVision, to run usability tests aiming to find out if the participants can:
01
Set up an account for personalized recipe recommendations
02
Use the search function to search for an ingredient or a recipe
03
Create a meal plan and add a recipe to the meal paln
Overall, participants found the layouts easy to understand and were able to complete the tasks without major setbacks (good news!). They provided me with some constructive insights to improve the design.

To prioritize the areas I should work on during my next iteration, I employed the Jakob Nielsen’s Error Severity rating scale to rank the identified errors:
Branding & UI Design

Moodboard

Based on market research and my interaction with potential users, I found a noticeable trend that recipe websites with a clean and minimal design tend to attract users looking for healthy recipes. Keeping this in mind, I started looking for inspiration on sites like Pinterest, Dribbble and Muzli. Flipping through my healthy cookbook at home was indeed helpful to get my creative juices flowing!

I put together a moodboard based around keywords - Delicious, Enjoyable, Blooming, Healthly, Practical and Effortless to shape the tone and voice of the brand.

Brand Name & Logo

I wanted an easy-to-remember brand name that reflects the meaning of “Meal planning with minimal effort.” Minimalist came up to my mind, and I decided to name the app, Mealist!

After a few iterations of logo ideas, based around the concept of “stack of containers with food”. I decided the most streamlined version to be my brand logo. I added a slight tilt to the bowl to illustrate the motion where food ingredients (the oval shapes) falling into the bowl.

Style Guide

As a UI designer, I always want to ensure consistent use of brand assets and UI elements across the design, especially when it comes to handing off the design to a development team. With that, I created a style guide to document all the essential pieces I created for the brand.
High Fidelity Mockup
01 Home Screens & Navigation
02 Account Setup
03 Search Feature
04 Ingredients
05 Recipes
05 Meal Plans
Responsive Breakpoints
Thank you for viewing!