May 2023
HAPPEA - A Wellness App
Users want to reduce their meat consumption but they struggle when facing cultural habits, lack of information and ingredients available. With my skills in User Research, User-Centered Design, and User Interface, I brought to life Happea, a captivating wellness app designed to support users in their journey toward reducing meat consumption.
Roles:
User Experience Designer
UI Designer
Brand Designer
Tools: Figma, FigJam & Notion
Device: Mobile
Platform: iOS
Sector tags: Health & Wellness, Sustainability, Mobile Apps & Technology.
PROTOTYPE VIDEO
IPAD VERSION
For iPad Pro 12.9". Pages: The homepage, the Meals page, and Recipe page.
THE CHALLENGE
The challenge at hand was to conceptualize a solution that facilitates the adoption and commitment to a health-improving routine for individuals.
The goal was to develop an app that effectively monitors users' progress and encourages them to embrace healthier lifestyles. Additionally, the user interface design should present a fresh and updated visual aesthetic to enhance user engagement. In terms of the prototype, it should encompass essential elements such as:
User profiles
Goal-setting functionality
A seamless user flow showcasing the app's core features
THE CHOICE
I embarked on the journey of creating an app aimed at assisting individuals in their efforts to reduce meat consumption. This dedication led to the birth of HAPPEA, a transformative solution designed to empower users on their path toward more sustainable dietary choices.
THE RESEARCH STAGE
Step 1. Knowing the Users
70%
have some level of interest in reducing their meat consumption
Qualitative Research
Insights:
Consumers typically include meat in their diets for approximately 5 to 7 days each week;
They aim to transition from their current levels to as little as half of their usual intake;
While embarking on this journey, consumers often encounter significant challenges related to cultural norms, limited accessibility to alternative options, and the willpower required to make sustained changes;
Additionally, it is evident that there is a prevailing sentiment among consumers that the available information on this topic is insufficient.
"
Interviews with 3 meat consumers, 1 vegan and 2 vegetarians, 1 nutritionist and 1 sustainability professional
It’s easier if they don’t do a radical change.
— Nutricionist
Quantitative Research
85 Answers
43,5%
think that learning new meatless recipes would help
"
"
have animal welfare as their biggest motivation to reduce their meat consumption
48,2%
The meat industry affects in a lot of ways, beef is the worst.
"
— Sustainability Professional
Step 2. Creating Empathy
Consumption of meat is seen as a contributor to environmental crises, health issues, and animal cruelty;
Users express a lack of knowledge regarding suitable meat alternatives.
Problem Statement
+
Step 3. User Persona: Juliana de Souza
Step 4. Problem Definition
Juliana de Souza wants to reduce her meat consumption as she is concerned with preserving the environment and animal welfare and wants to gradually change her old habits.
How might I provide information on meatless recipes?
Affinity Diagram
Empathy Map
Users struggle to find accessible sources for meat substitutes;
There is a reluctance to undergo drastic dietary changes.
Juliana, also known as Ju, is a Fashion Sales Advisor who volunteers at an NGO for vulnerable children on weekends. While Ju is not overly concerned about her health, she deeply cares about animal welfare and the environment. She wants to reduce her meat consumption gradually but finds it challenging due to long-standing habits. Cultural biases in her state further complicate her journey as meat is integral to local gastronomy. Ju loves cooking but lacks knowledge of meatless meal recipes and struggles to find quality ingredients and substitutes in her city. She believes that information on alternatives is not widely available and seeks step-by-step guidance to achieve her goal. After researching, she realized that reducing beef consumption would already make a significant impact.
HMW?
COMPETITOR ANALYSIS
Insights:
The majority of competitors incorporated a calendar feature, enabling users to track their meat consumption on specific days.
The focus of many competitors was to demonstrate the impact of reducing meat consumption on the users' overall ecological footprint.
Competitors offered users the option to select their preferred animal product choices, tailoring the app experience to individual dietary preferences.
Notably, competitors exhibited a forgiving approach, implying that users could make occasional deviations from their meat reduction goals without judgment.
Step 1. User Flow
Goal Setting - Onboarding:
Assisting users in setting up their goals and preferences as they onboard the app.
Progress Page:
Providing users with a dedicated page to track their progress and visualize their achievements.
Ingredient Selection Process
MID-FI Wireframe: After selecting an ingredient, a new page opens displaying the selected ingredient and suggestions.
Feedback: Users found the process of going through multiple pages cumbersome during Usability Testing.
Ingredient-based Meal Search:
Allowing users to search for meal options based on the ingredients they have available at home.
Article Bookmarking:
Enabling users to bookmark articles of interest for later reading and reference.
DESIGN PROCESS
Step 2. LO-FI Concept and Usability Testing & Changes to MID-FI
Page Naming:
From the LO-FI wireframe to MID-FI Wireframe, the main articles page has changed the name from “Info" to "Reads". This adjustment has been made to create a more direct association with articles and a better alignment with users' expectations.
Preview Functionality:
Initially, the LO-FI wireframe included a preview link on the article card that opened a pop-up with additional text. The pop-up was removed. Instead, in the MID-FI wireframe, clicking on the card now takes users directly to the full article. This change was implemented to eliminate an unnecessary step in the user journey.
Functionality Placement:
In the LO-FI wireframe, the pop-up included icons for favoriting or bookmarking articles. With the removal of the pop-up, these icons were repositioned to the cards on the main page in the MID-FI wireframe.
Step 3. Main Change from MID-FI to HI-FI
Recipe Display
MID-FI Wireframe: Once all ingredients are selected, a new page opens with recipes containing the selected ingredients.
Feedback: Users expressed a need for a more streamlined approach and fewer steps.
Cooking and Feedback:
Supporting users in the process of cooking the selected meal and providing feedback on their experience.
Revised HI-FI Wireframe
Changes Made: Deleted unnecessary steps and redesigned the interface to improve user experience.
Result: In the HI-FI Wireframe, users can view selected and suggested ingredients on the same page. The page automatically refreshes as users add or remove ingredients, creating a more practical and functional experience.
Check-in Functionality: Users can conveniently mark their meat consumption status for each day through check-in options available on the homepage and calendar.
Explore Page: A dedicated section where users can access meatless recipes, locate supermarkets offering meat substitutes, and discover restaurants serving meatless meals.
Progress Tracking: A progress page enabling users to visualize their journey by checking their progress line based on the recorded check-ins.
Information Page: An informative section providing users with the latest updates and insights on meat and its impact, empowering them to make informed decisions.
THE FINAL RESULT
NEXT STEPS
Conduct usability testing on the HI-FI version of the app.
Enhance the Progress Page to provide a more comprehensible progress graphic.
Implement UX metrics to measure user satisfaction and engagement.