MealPro hero image


Mobile app + Responsive website - Google UX design Professional certificate project




Mobile app + Responsive web


Portfolio project


Designer, Researcher


Food, Education


March - April 2022

MealPro description


Healthy eating-related apps are a big digital trend for a good reason. However, most of those websites/apps in the markets tend to include complex and overwhelming features. MealPro aims to educate nutrition and help users to have healthier eating habits.

Design process:

I applied the design thinking process that takes four main phases to get from the problem to the solution.


Design a nutrition learning tool to help people to develop healthy food knowledge with nutrient-dense recipes for responsive web and mobile app.

Understanding User

-User research:

Healthy eating-related apps are a big digital trend for a good reason. However, most interview participants mentioned that those websites/apps in the markets are complex and overwhelming because of too many features.
They showed a strong interest in cooking healthy meals. But they are unfamiliar with the nutrients basics. Learning nutrient knowledge will help to improve users’ eating habits practically.

-User persona and Customer journey map:

With my research insights, I first proceeded to create a user persona to represent our target users.
Persona 1
Persona 2
User journey

-Competitive audit:

An audit of a few competitors’ products provided direction on gaps and opportunities to address with the MealPro app.
Audit goal: Identify and understand the effectiveness of the healthy meal app
competitive analysis

-Crazy 8:

I did a quick ideation exercise, Crazy 8, to get some ideas for how to address gaps identified in the competitive audit. My main focus was on nutrition education and simple recipe features.
My main focus was on nutrition education and simple recipe features.
Crazy 8

Starting the design

-Digital wireframes:

After ideating and drafting some paper wireframes, I created the initial designs for the MealPro app.
These designs focus on nutrition education with superfood recipes to improve users' healthy eating lifestyles.
Starting design

-Low-fidelity prototype:

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of nutrition learning and recipes page.
View prototype
Low-Fidelity prototype

-Usability study parameters:

Study type:

Unmoderated usability study


5 participants interested in healthy eating habits: 2 males, 2 females and 1 non-binary aged between 20 to 60 years old.

Reseach goal:

Determine if the users can complete the core tasks within the app.


London, remote

Reseach questions:

- Are there any parts where users are getting stuck at?
- How long did the user take to complete tasks in the app?


30 minutes

Key Performance Indicators(KPIs):

Time on task, User error rate.


Intro, basic questions, tasks and follow-up questions

-Usability study findings:

Affinity Diagrams from the usability study
Affinity diagrams

🔍 Prioritised Insights

Priority 0

1. The buttons and labels are too small and hard to use, an insight is: users need better font and button sizes.

Priority 1

1. For most users, nutrition education is an interesting topic but not motivated to use it, an insight is: to use the learning process and budges to motivate users.
2. The landing page and web flow are too simple and flat, an insight is: users need a better main page for excitement.

Priority 2

1. The account page contains the necessary information for most people, but not an overwhelming majority, an insight is: users need all the feature functions on the account page.

-Mock ups:

Here are the design improvements after having the test feedback.
⚠️ Based on the insights from the usability studies, I applied design changes like the learning process for improving user motivation. Also, added simpler quiz access which makes the user experience concise.
⚠️ Additional design changes included changing a “nutritional info” section which provides a clearer explanation of the menu instead of having just the type of nutrition and numbers.

-Usability study summary

There were some accessibility considerations to support a better user experience.
Usability study summary

-High-fidelity prototype:

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
View prototype
High-fidelity prototype

Responsive Design


With the app designs completed, I started work on designing the responsive website.
I used the MealPro sitemap to guide the organisational structure of each screen’s design to ensure a cohesive and consistent experience across all the devices.
Site map
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
High-fidelity images



Users have a strong interest in eating healthier food choices but breaking old habits is incredibly hard. This platform fills the void for nutrition learning with practical recipes in a motivational, engaging way.
One quote from peer feedback was that 'the MealPro app is good for nutrition beginners who wants to improve eating habit step by step.'

-What I learned:

Designing the high user engagement on the content was challenging. I learned the importance of diligently going through each step of the design process and aligning with specific user needs. The user interviews required a sensitive approach as food and diet topics are sensitive and personal for many.

-Next step:

1. Conduct research on how successful the app is in reaching the goal to educate nutrition.
2. Add more meal planning features for the users to have practicality.
3. Add a further rewarding system or sharing function to motivate users to learn about healthy eating.