Conscious Nutrition App UX/UI Design
A UX case study focused on mindful eating, behavior change, and social motivation
Embedded Files
Overview
Overview
Conscious Nutrition is a mobile-first app designed to support users in developing healthy eating habits. It allows individuals to track meals and calorie data while engaging with others in a shared wellness space blending accountability, education, and motivation.
Duration
Duration
January-February 2024
Problem
Problem
People often struggle to track their diet and exercise while staying socially connected and motivated. Existing tools like Facebook groups lack structure and specificity, leaving users with manual, fragmented routines. There's a gap in providing a community-driven space for people to track health habits meaningfully.
The Goal
The Goal
Design a platform where users can track their diet, share progress, and motivate each other, building healthy habits through reflection and community engagement.
My Roles
My Roles
UX Designer
UI Designer
Visual Designer
Responsibilities
Responsibilities
Conducted user interviews & empathy mapping
Created low to high fidelity wireframes and prototypes
Performed usability testing and design iteration
Designed full UI, logo, and custom icons
Focused on accessibility and mobile-first layout
Understanding the User
Understanding the User
- User Research
- Personas
- Problem statements
- Competitive audit
- Ideation
User Research: Summary
User Research: Summary
To understand user needs, I conducted interviews and created empathy maps. I found that users often relied on Facebook groups to manually share meals, workouts, and health updates. However, this process was time-consuming, unstructured, and not optimized for health tracking. Users wanted a simpler way to log details and stay motivated by supporting one another in a shared, health-focused space.
Persona 1 : Ex-smoker Ellie
Persona 1 : Ex-smoker Ellie
Archetype: The Struggler
Bio: Ellie is a 40-year-old from Malmö, Sweden. She’s a UX Designer, homemaker, and podcaster who recently quit smoking and is trying to regain control of her eating habits. While she’s knowledgeable about health and nutrition, she struggles with consistency and emotional eating. Ellie often starts tracking but quits after a few weeks. She thrives in group settings and finds motivation when she's connected to others with similar goals.
Pain Points:
Finds calorie tracking apps isolating and impersonal
Struggles to maintain habits after initial motivation fades
Emotional eating has increased since quitting smoking
Lacks a supportive and structured space for health tracking
Needs & Goals:
A supportive community that encourages her progress
A simple, intuitive interface that reduces friction
Tools that combine emotional check-ins with physical tracking
A system that celebrates small wins and helps her stay on track
Persona 2 : Ali
Persona 2 : Ali
Archetype: The Self-Improver
Bio: Ali is a 36-year-old developer who works remotely from home. Since the pandemic, he’s become more sedentary and struggles to maintain a balanced routine. He’s highly motivated to improve his habits, especially eating and sleep, but needs structure, reminders, and lightweight tracking to stay on track without losing focus during his workday.
Pain Points:
Has irregular eating and sleeping patterns due to remote work
Easily forgets to log meals or physical activity
Finds most apps too cluttered or distracting
Lacks built-in motivation or habit reinforcement
Needs & Goals:
A minimal, non-intrusive app that integrates into his daily flow
Smart prompts or nudges to eat, move, and sleep better
A holistic overview of habits without micromanagement
Quick access to track progress and reflect at the end of day
Persona 3 : Busy Megan
Persona 3 : Busy Megan
Archetype: The Juggler
Bio: Megan is a 48-year-old working mom living in Canada. She manages a full-time job, takes care of one kid and a dog, and supports her family life. Between meetings, errands, and bedtime routines, she has little time left for herself. Megan has tried using health apps before but finds them time-consuming. Her motivation is deeply social, she wants to stay connected with her sisters, share progress, and encourage each other on their wellness journey.
Pain Points:
No time for complex or high-maintenance apps
Feels guilty prioritizing her health over family responsibilities
Has trouble staying consistent without external motivation
Finds calorie-focused apps emotionally draining
Needs & Goals:
A lightweight, quick-to-use health tracker
Easy ways to share progress with her sisters and feel supported
Emotional encouragement over strict calorie rules
A clear view of her efforts and small wins, without guilt
Persona 4 : Diabetic Mahboubeh
Persona 4 : Diabetic Mahboubeh
Archetype: The Health-Watcher
Bio: Mahboubeh is a 58-year-old mother and wife lives in Tehran. She was diagnosed with type 2 diabetes three years ago and has since struggled to consistently manage her diet, exercise, and blood sugar levels. Her busy family schedule often pushes her own needs aside. Mahboubeh wants to improve her lifestyle but finds health apps overwhelming or too general. She's motivated by family, especially staying healthy for her children, and enjoys staying connected to her sisters for mutual encouragement.
Pain Points:
Feels overwhelmed by managing diabetes alongside family responsibilities
Finds most tracking apps too generic or impersonal
Lacks reminders and emotional encouragement
Struggles with guilt and procrastination around self-care
Needs & Goals:
A personalized health app that’s gentle and easy to use
Clear tracking of meals, movement, and emotional patterns
Built-in motivation to help her build healthy habits over time
A way to stay connected with her sisters for support and sharing
Competitive Audit Summary
Competitive Audit Summary
To better understand gaps in the current market, I conducted a competitive analysis of three popular calorie tracking and wellness apps: Lifesum, Karafs, and Lose It. While each offered robust tracking features (e.g., calorie logging, water intake, walking integration), I identified several shared limitations:
Ideation & Early Concepts
Ideation & Early Concepts
To kick off the design, I started with Crazy 8's to explore the key user flows and layout for the home screen, diary, profile, and community features. My main goal was to design an interface that felt simple, supportive, and quick to navigate, especially for users balancing busy schedules or emotional health goals.
Starting the Design
Starting the Design
- Digital Wireframes
- Low Fidelity Prototype
- Usability Study
Digital Wireframe
Digital Wireframe
After translating early sketches into digital format, I focused on refining two of the most critical user-facing screens: the Home screen and the Diary screen.
These wireframes were designed to support quick access and reduce cognitive load, especially for users like Busy Megan and Diabetic Mahboubeh, who need frictionless tracking and clear summaries.
Home Screen
Diary Screen
Digital Wireframe - Sharing process
Digital Wireframe - Sharing process
One of the key differentiators of this app is its community-driven experience, so I paid special attention to designing a seamless sharing flow. Based on user insights, especially from Ex-Smoker Ellie and Busy Megan, the ability to share progress with others is essential for motivation, accountability, and emotional support. These wireframes explore the full user journey of sharing a food entry with others through diary integration and community channels.
Low Fidelity Prototype
Low Fidelity Prototype
Once the digital wireframes were finalized, I created a clickable low-fidelity prototype to simulate the core user flows and validate the design logic. This prototype allowed me to test how users would navigate between key features like the diary, community, and profile without visual distractions.
The prototype covered:
Logging meals and nutrition data
Emotional and reflective journaling
Sharing updates with community members
Viewing and responding to shared posts in topic-based groups
Accessing the user profile and tracking weight
This stage helped identify early usability concerns, such as button placement, flow clarity, and redundant navigation loops, which I later addressed in the high-fidelity designs.
Usability Study: Parameters
Usability Study: Parameters
Study Type
Study Type
Unmoderated Usability Study
Participants
Participants
5 participants
Location
Location
Sweden, Iran, Canada
remote
Length
Length
30-45 Minutes
To validate the usability of the low-fidelity prototype, I conducted a remote unmoderated usability study with 5 participants from Sweden, Iran, and Canada. Sessions lasted between 30–45 minutes and focused on how easily users could navigate the diary, share updates, and access community features.
Usability Study: Findings
Usability Study: Findings
Users wanted the ability to share their diary entries across multiple conversations, not just a single group. This highlights a need for more flexible and dynamic social sharing.
Users preferred to share taken, burned, and remaining calorie summaries, not just the meal they logged when posting in community groups. This added context helped others understand their overall progress.
Refining the Design
Refining the Design
After incorporating insights from usability testing, I moved into the refinement phase. This included polishing the UI through mockups, building an interactive high-fidelity prototype, and ensuring accessibility across color contrast, layout, and copy.
After incorporating insights from usability testing, I moved into the refinement phase. This included polishing the UI through mockups, building an interactive high-fidelity prototype, and ensuring accessibility across color contrast, layout, and copy.
Each refinement decision was grounded in user feedback — focusing on improving clarity, reducing friction, and making the experience more inclusive for all users.
Each refinement decision was grounded in user feedback — focusing on improving clarity, reducing friction, and making the experience more inclusive for all users.
- Mockups
- High Fidelity Prototype
- Accessibility
Mockup 1 – Multi-Conversation Sharing
Mockup 1 – Multi-Conversation Sharing
Design Response to Finding #1
In the initial version of the app, users could only share diary entries within a single conversation. However, based on usability feedback, participants expressed a desire to share their logs across multiple community threads simultaneously.
This mockup illustrates the updated solution:
Users can now share diary updates with more than one group or chat at once, supporting greater visibility and engagement.
The Community view was redesigned to reflect clearer group segmentation and posting flexibility.
Visual hierarchy and call-to-actions were simplified to encourage sharing without overwhelming users.
According to the usability study finding 1, users want to be able to share their diaries across multiple conversations rather than just one.
The updated design allows users to post diary entries into several chats or communities simultaneously, improving visibility and accountability across groups.
Mockup 2 – Calorie Breakdown Sharing
Mockup 2 – Calorie Breakdown Sharing
Design Response to Finding #2
Users shared that they wanted more context when viewing a shared meal in community chats, not just what was eaten, but how it impacted their daily calorie tracking. Specifically, they wanted to see calories taken, burned, and remaining alongside the food entry.
In response, I redesigned the shared message format to include:
A clear nutritional summary directly under the logged item
Breakdown of taken, burned, and remaining calories
Improved spacing and hierarchy for scalability in a chat-style feed
This change supports greater transparency and allows users to celebrate or reflect on their progress more meaningfully when interacting in groups.
The updated design shows a full breakdown of calories taken, burned, and remaining for the day, providing richer context within social sharing features.
Bringing It All Together - Finalized UI Overview
Bringing It All Together - Finalized UI Overview
This set of high-fidelity mockups showcases the finalized visual design across key user flows, including community interaction, friend connections, group creation, and personal logging.
The UI was refined to maintain:
Visual clarity through spacing, clean type, and hierarchy
Warmth and friendliness via soft colors and rounded elements
Consistency across navigation patterns and interactions
A supportive tone that reflects the social and emotional needs of users
This comprehensive layout represents the culmination of user research, wireframing, prototyping, and testing, creating an experience that’s approachable, habit-friendly, and socially connected.
Final screens illustrating diary tracking, community engagement, friend invitations, and chat-based group interactions.
High Fidelity Prototype
High Fidelity Prototype
After finalizing the UI and applying usability feedback, I built an interactive high-fidelity prototype to simulate real-world usage. This prototype connects all major user flows, including diary entries, food sharing, community conversations, friend invitations, and emotional reflections.
The prototype was used for:
Peer feedback sessions
Interactive user walkthroughs
Internal testing for flow validation and UI consistency
It served as a fully functional representation of the product before development, helping visualize interactions, transitions, and task efficiency at a near-final level.
A complete clickable prototype connecting over 60 screens across diary, profile, and community features, used to test end-to-end user experiences.
Usability Study: Parameters
Usability Study: Parameters
I ensured that all color and text combinations meet accessibility standards for contrast. Fonts were chosen for clarity, and interface elements were tested for legibility across different screen sizes and lighting conditions.
I designed with a broad range of tech comfort levels in mind, making sure the interface is intuitive even for those who are less experienced with mobile apps. Buttons are clearly labeled, flows are linear, and screens are free from unnecessary clutter.
Going Forward
Going Forward
- Takeaway
- Next Steps
Impact
Impact
This app aims to foster safe, supportive communities where users can track their fitness and dietary progress without pressure or judgment. By moving sensitive conversations around health and diet into a private, focused platform, users can connect with others who share their goals — without needing to explain themselves to friends or family outside the app.
What I learned
What I learned
This project taught me that keeping users truly front and center becomes increasingly complex as data grows. Designing an experience that balances function, emotion, and simplicity requires continuous iteration. and a deep understanding of real user behavior, not just assumptions.
Project Completed UI Kit – Free Download
Project Completed UI Kit – Free Download
As part of this project, I created a complete UI Kit and decided to share it for free with the design community. Whether you're building a fitness or nutrition-related app, this kit can help you kickstart your design process with a clean, ready-to-use system.
It includes core components, screen templates, and visual styles used throughout this project, available now on the Figma Community.
Page updated
Google Sites
Report abuse