ÉTUDE DE CAS 3
SITE WEB ET APPLICATION MEALY RESPONSIVE
LE PRODUIT: MEALY est une organisation basée à San Francisco axée sur une alimentation saine. L'organisation a besoin d'un outil qui aide les gens à gérer leur repas. Les principaux utilisateurs cibles de MEALY sont les nouveaux travailleurs adultes et leur famille qui sont préoccupés par leur santé et qui souhaitent varier leur repas au jour le jour.
​
PDURÉE DU PROJET :Février à avril 2023
​
Développer avec Adobe XD pour le CERTIFICAT GOOGLE
EMPATHIZE
RESEARCH PROCESS
PROJECT OVERVIEW
The problem:
​
56% of young people suffer from obesity in the United States. The strategy team at MEALY has identified a lack of general knowledge about health and limited understanding about planning meals to vary meals oftenly and be in better health.
The goal:
​
Design an app and a responsive website for many devices that will improve education on the topic of healthy food and help people manage their own meal schedule with healthy recipe.
My role:
​
UX & UI designer leading the app and responsive website design from conception to delivery.
Responsabilities:
​
-
Conducting interviews
-
Paper and digital wireframing
-
Low and high-fidelity prototyping
-
Conducting usability studies
-
Accounting for accessibility
-
Iterating on designs
-
Determining information architecture
-
Create responsive design.
USER RESEARCH: SUMMARY
I used MEALY’s data on schedule meal to develop interview questions, which were then used to conduct user interviews. Most interview participants reported feeling frustrated about healthy recipes food, sometimes expensive, not various and long to prepare. The feedback received through research made it very clear that users would be open and willing to cook more and try to vary their meals as many as they can to have a better health.
PERSONA : HILLARY
PROBLEM STATEMENT:
Hillary is a new worker who needs
fast easy healthy recipes because
she wants to be in a better shape.
PERSONA : PAULO
PROBLEM STATEMENT:
Paulo is a working caregiver who needs exciting, new gluten-free recipes that make tasty
because he wants to vary the daily meal schedule for his family.
COMPETITIVE AUDIT
Click to view the full competitive audit and audit report
An audit of a few competitor’s products provided direction on gaps and opportunities
to address with the MEALY app.
IDEATE
DESIGN PROCESS
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on how find healthy recipes and schedule them on the app.
DIGITAL WIREFRAMES
After ideating and drafting some paper wireframes, I created the initial designs for the MEALY app. These designs focused on delivering personalized guidance to users to help schedule their food.
Top half of home screen is the search bar to get access easily to a
multiple recommendations
for users
Easy access to app features from global navigation
LOW FIDELITY PROTOTYPES
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of viewing an item about to expire and using it in a recipe.
USABILITY STUDY
PARAMETERS
Study type:
​
Unmoderated usability study.
Lenght:
​
30-60 minutes.
Participants:
​
5 participants.
Location:
​
San Francisco, CA, remote.
USABILITY STUDY: FINDINGS
INSIGHTS
These were the main findings uncovered by the usability study:
1
2
3
Recipes
Add to List
Schedule meal
People want easy access to recipes, depending of their diet.
People had difficulty adding new food items to their listing.
People preferred clear
indications on the app.
REFINING THE DESIGN
MOCKUPS
Based on the insights from the usability studies, I applied design changes like providing a clear bar section from the home screen.
Before usability study
After usability study
Additional design changes included adding an option to “Add new item” to the “My Food” page, and providing a clearer indication of how many days were left before an item expired.
FINAL MOCKUPS
HIGH FIDELITY PROTOTYPES
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
THE MEALY APP
ACCESSIBILITY STUDY
1
Clear labels for interactive elements that can be read by screen readers.
2
Initial focus of the home screen on personalized recommendations help define the primary task or action for the user.
IDEATE
DESIGN PROCESS
SITEMAP
With the app designs completed, I started work on designing the responsive website.
I used the MEALY sitemap to guide the organizational structure of each screen’s
design to ensure a cohesive and consistent
experience across devices.
RESPONSIVE DESIGNS - HIGH FIDELITY PROTOTYPES
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.
THE MEALY RESPONSIVE WEBSITE
GOING FORWARD
TAKEAWAYS
IMPACT
Users shared that the app helps user eat healthy in their daily journey . One quote from peer feedback was that “the MEALY app helps me to understand the importance of eating healthy everyday and bring me a lot of inspirations to vary my meals and be able to achieve my daily nutrition goals day by day.”
WHAT I LEARNED
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful. Also I learned to create a full project in a limited time.
NEXT STEPS
1
Conduct research on how successful the app is in reaching the goal to reduce obesity and help users vary their meals.
2
Add more educational resources for users to learn about nutritions and the good impact of healthy recipes.
3
Provide incentives and rewards to users for successfully eat healthy recipes daily.
© 2023, Camille Quentin, All rights reserved