Healthy Eating App
2023
•
Academic Case Study
Crafting EverLeaf, a mobile app inspired by focus group insights, leading UX strategy and interactive design to make healthy eating simple and engaging.
ux_research_strategy
ui_visual_design
student_experience
information_architecture
Defining the Purpose and Understanding Needs
Assist and empower individuals to maintain a balanced and healthier lifestyle by providing comprehensive information and guidance, enabling them to make informed choices and sustain a long-term commitment to healthy dietary practices.
Problem Statement
Individuals face challenges in preparing healthy meals throughout the day at home, school, and the workplace. This problem affects those who are willing to make dietary changes to improve their well-being. Consequently, it hinders their ability to maintain a healthier lifestyle.
User Needs
Individuals face challenges in preparing healthy meals throughout the day at home, school, and the workplace. This problem affects those who are willing to make dietary changes to improve their well-being. Consequently, it hinders their ability to maintain a healthier lifestyle.
Mark needs to make change for a healthier diet in order to save more money and better his time management.
Greg needs to make better food decisions because it will help him excel in time management, thus enhancing his focus on his career.
Sarah needs to find efficient and healthy meal solutions because it supports her goal of ensuring her family's well-being and nutrition while juggling her part-time work and family responsibilities.
Target Audience
Defining the purpose of an application and identifying its target audience are critical steps when addressing real-world problems through a project. These aspects serve as the foundational pillars upon which the entire project is built, influencing every subsequent decision made throughout the development process.
Starting with the Visual Design
Mood Board
In crafting a moodboard for the Everleaf healthy eating app, lush greenery and vibrant fruits serve as visual anchors, reaffirming its commitment to wholesome living. Complementing these are leaf patterns and textures, mirroring the logo's motif and further enhancing the natural theme. Fresh, bright colors infuse the moodboard with energy and vitality, while the simplicity of the typography fosters a sustainable atmosphere, reinforcing the app's dedication to wellness.
Logo & Icon
The Everleaf name with a leaf integrated into the letter F symbolizes nature, growth, and vitality while subtly conveying the app's focus on health. Visually striking and memorable, it stands out amidst competitors, evoking positive associations of freshness and well-being. Moreover, the versatility of the leaf icon ensures its effectiveness across various platforms and marketing materials, further enhancing the brand's identity and appeal.
Created on Adobe Illustrator and exported in the formats with various sizes ai + pdf + png + svg + eps
Ideating the Core Experience
User Flows
To design an intuitive experience for EverLeaf, I created user flows that mapped how people would engage with the app’s healthy eating features. These flows illustrated key scenarios such as discovering and saving recipes, organizing meal plans, and setting reminders to support consistent habits.
By visualizing these step-by-step interactions, I was able to anticipate challenges, refine navigation, and ensure that each feature felt natural and supportive of users’ wellness goals.
Flow #1 - Recipes & Resources
The recipes and resources flow focused on how users could discover, save, and manage healthy eating content in EverLeaf. It outlined the journey from searching for meal ideas to organizing favorites, ensuring that the app served as both a learning hub and a personalized recipe book.
Key pathways included:
Onboarding and Access: starting with splash screens, login/sign-up, and reaching the recipes and resources section.
Content Discovery: searching for meal recipes or articles, filtering results by dietary preferences, and browsing through card-based results.
Personalization: saving items to favorites, filtering saved content, and organizing resources for quick access.
Management: editing or removing saved recipes, and continuously refining content based on individual dietary goals.
This flow underscored EverLeaf’s role as a supportive tool for building lasting healthy habits, offering users both inspiration and practical ways to integrate nutritious choices into their daily lives.
Flow #2 - Meal Planning & Reminders
The meal planning and reminders flow focused on helping users create sustainable healthy eating habits by making daily meal management simple and proactive. It outlined how users could move from logging in to seamlessly planning, customizing, and tracking their meals.
Key pathways included:
Onboarding and Access: beginning with the splash screen, login/sign-up, and entry into the meal planning section.
Meal Management: inputting meals, selecting from saved options, and editing or removing entries to fit changing needs.
Daily Structure: organizing meals in the daily section to provide users with a clear and actionable plan.
Reminders & Notifications: defining meal times, setting reminders, and adjusting notification frequency to encourage consistency and accountability.
This flow ensured that healthy eating was not just about making better choices but also about supporting those choices with practical tools, turning intentions into lasting routines.
Flow #3 - Community & Support
The app flow mapped the overall structure of EverLeaf, showing how different sections connect to support both healthy eating and community engagement. It outlined the journey from first contact through sustained interaction, ensuring users could easily navigate between personal goals and community features.
Key pathways included:
Onboarding and Access: starting with splash screens, login/sign-up, and profile setup (bio, dietary preferences, and wellness goals).
Community & Support: exploring forums, searching for experiences/recipes/tips, and contributing by creating, editing, or commenting on posts.
Personalization: managing dietary preferences, updating bios, and verifying created or commented activity logs.
Ongoing Engagement: filtering by dietary goals, saving relevant discussions, and tracking contributions through an activity log with cards.
This structured overview ensured that every feature connected seamlessly, balancing personal wellness tracking with community-driven support, making EverLeaf both practical and engaging.
App Flow
Crafting an app flow is like architecting a journey for users within your application. The app flow delineates the path users will take as they interact with the application, ensuring that their journey is seamless, intuitive, and purposeful. By mapping out the sequence of screens we can create a cohesive user experience that guides users towards their desired outcomes.
Bringing Early Ideas to Life Through Sketches
Early ideas were explored through hand-drawn sketches, allowing for quick iteration of layouts and flows. This lightweight approach encouraged experimentation, helped identify promising directions, and provided a flexible foundation before committing to structured wireframes.
Medium Fidelity Wireframes
By utilizing simple shapes, placeholders, and annotations, different screens and interactions were quickly mocked up, facilitating rapid prototyping and iterative design, and enabling the exploration of various design ideas within minutes. This agility allowed for usability testing early in the design process, gathering valuable feedback and iterating on the design promptly. Consequently, usability issues can be identified and addressed upfront.
The medium-fidelity wireframes were created to be tested with the same focus group from the brainstorming session, to gather insights and see if they meet user expectations.
Phone version
Tablet version
Validating the Experience Through Usability Testing
Usability testing was carried out to evaluate how students interacted with the app’s navigation and core study-related features. Test tasks focused on assessing clarity, efficiency, and ease of use to ensure the experience felt seamless and intuitive.
Features Analyzed
Testing results and analysis for three features of a meal planning app, highlighting user feedback and improvement suggestions.
Maze Reports Testing Results
Feature #1 Meal Search Save: 8 testers, 70% completed expected path, average duration 19.6s.
Feature #2 Meal Planner: 6 testers, 100% completed expected path, average duration 2.6s.
Feature #3 Community Engagement: 9 testers, 51.5% completed expected path, average duration 115.7s.
Common feedback includes the need for clearer navigation, user reviews, and improved search functionality.
Reports Analysis
Testing limitations included unclear project introduction and tester misunderstandings.
Repetitive responses indicate a need for refined questioning techniques.
Suggestions for future features include grocery ideas and calorie tracking.
User benefits confirmed, especially for students and busy professionals seeking improved eating routines.
Delivering the Solution
High Fidelity Wireframes
The high-fidelity wireframes detailed how users could discover and save recipes, organize resources, explore community content, and engage with peers. They visualized key interactions, personalized experiences, and content management, ensuring that navigation, usability, and visual hierarchy aligned with user needs and flows.
Phone version
Tablet version
Celebrating Recognition
Capturing Teammate Feedback
Yuka was one of my teammates during several UX projects at Algonquin College, and her kind recommendation on LinkedIn highlights our collaboration and the impact of our work together.
