Back to list

Back to list

Back to list

Back to list

Back to list

#productdesign

#mobile

#healthinformatics

Sep. ‘22 - Dec ‘22

Sep. ‘22 - Dec ‘22

Sep. ‘22 - Dec ‘22

Sep. ‘22 - Dec ‘22

Sep. ‘22 - Dec ‘22

Sep. ‘22 - Dec ‘22

Eatopia

Eatopia

Eatopia

Eatopia

Eatopia

Eatopia

Gamifying healthy eating habits for college-going young adults

Gamifying healthy eating habits for college-going young adults

Gamifying healthy eating habits for college-going young adults

Gamifying healthy eating habits for college-going young adults

Gamifying healthy eating habits for college-going young adults

Gamifying healthy eating habits for college-going young adults

Remember that moment we left home for college or work and our eating habits took a dive? And those classic parental reminders to eat well? Just as I was typing this, my mom texted, "Fruits neraiya saapdu!" ("EAT A LOT OF FRUITS!"). Though I’ve always loved fruits, this project deepened my appreciation for that advice. Read on, and you’ll see why.

Remember that moment we left home for college or work and our eating habits took a dive? And those classic parental reminders to eat well? Just as I was typing this, my mom texted, "Fruits neraiya saapdu!" ("EAT A LOT OF FRUITS!"). Though I’ve always loved fruits, this project deepened my appreciation for that advice. Read on, and you’ll see why.

Remember that moment we left home for college or work and our eating habits took a dive? And those classic parental reminders to eat well? Just as I was typing this, my mom texted, "Fruits neraiya saapdu!" ("EAT A LOT OF FRUITS!"). Though I’ve always loved fruits, this project deepened my appreciation for that advice. Read on, and you’ll see why.

Remember that moment we left home for college or work and our eating habits took a dive? And those classic parental reminders to eat well? Just as I was typing this, my mom texted, "Fruits neraiya saapdu!" ("EAT A LOT OF FRUITS!"). Though I’ve always loved fruits, this project deepened my appreciation for that advice. Read on, and you’ll see why.

Remember that moment we left home for college or work and our eating habits took a dive? And those classic parental reminders to eat well? Just as I was typing this, my mom texted, "Fruits neraiya saapdu!" ("EAT A LOT OF FRUITS!"). Though I’ve always loved fruits, this project deepened my appreciation for that advice. Read on, and you’ll see why.

Remember that moment we left home for college or work and our eating habits took a dive? And those classic parental reminders to eat well? Just as I was typing this, my mom texted, "Fruits neraiya saapdu!" ("EAT A LOT OF FRUITS!"). Though I’ve always loved fruits, this project deepened my appreciation for that advice. Read on, and you’ll see why.

Jump to Solution

Jump to Solution

Jump to Solution

Jump to Solution

Jump to Solution

Tools

Figma, Miro, Adobe Creative Suite, G Suite

Team

A team of 4 designers and researchers

Deliverables

High-fidelity prototype of the game, Design System

My Responsibilities

UX Design and Research, Visual and Interaction Design, Usability testing, Data Visualization

My Responsibilities

UX Design and Research, Visual and Interaction Design, Usability testing, Data Visualization

My Responsibilities

UX Design and Research, Visual and Interaction Design, Usability testing, Data Visualization

My Impact and Contribution

I built Eatopia's visual foundation and designed an intuitive Trends feature that empowers students to reflect upon and discover personal food-mood connections at their own pace, gently guiding self-discovery without prescribing rules.

Tools

Figma, Miro, Adobe Creative Suite, G Suite

Team

A team of 4 designers and researchers

Deliverables

High-fidelity prototype of the game, Design System

My Responsibilities

UX Design and Research, Visual and Interaction Design, Usability testing, Data Visualization

My Responsibilities

UX Design and Research, Visual and Interaction Design, Usability testing, Data Visualization

My Responsibilities

UX Design and Research, Visual and Interaction Design, Usability testing, Data Visualization

My Impact and Contribution

I built Eatopia's visual foundation and designed an intuitive Trends feature that empowers students to reflect upon and discover personal food-mood connections at their own pace, gently guiding self-discovery without prescribing rules.

My Responsibilities

UX Design and Research, Visual and Interaction Design, Usability testing, Data Visualization

My Impact and Contribution

I built Eatopia's visual foundation and designed an intuitive Trends feature that empowers students to reflect upon and discover personal food-mood connections at their own pace, gently guiding self-discovery without prescribing rules.

My Responsibilities

UX Design and Research, Visual and Interaction Design, Usability testing, Data Visualization

My Impact and Contribution

I built Eatopia's visual foundation and designed an intuitive Trends feature that empowers students to reflect upon and discover personal food-mood connections at their own pace, gently guiding self-discovery without prescribing rules.

Tools

Figma, Miro, Adobe Creative Suite, G Suite

Team

A team of 4 designers and researchers

Deliverables

High-fidelity prototype of the game, Design System

My Responsibilities

UX Design and Research, Visual and Interaction Design, Usability testing, Data Visualization

My Impact and Contribution

I built Eatopia's visual foundation and designed an intuitive Trends feature that empowers students to reflect upon and discover personal food-mood connections at their own pace, gently guiding self-discovery without prescribing rules.

The Problem

Research

Design Process

Eatopia - The Solution

Design System

Conclusion

The Backstory

Fig. 2: My sketch note summarizing the survey results

Fig. 1: My sketch note explaining the project's motivation

Here is a fun sketchnote summarizing our literature review. For detailed background, click here.

The Problem

How do we help college-going young adults (18-25 years) increase their fruit and vegetable intake through gamification, fostering long-term healthy eating habits?

Research

  1. Understanding the Problem

To validate our research and get the "inside scoop" on fruit and veggie intake, we turned to the most convenient source—college students! Surrounded by them, we thought, why not "harvest" their insights? For full survey insights, click here.

Fig. 2: My sketch note summarizing the survey results

Fig. 2: My sketch note summarizing the survey results

And we identified the following key challenges as opportunities for innovation and improvement.

Fig. 3: Top HMWs

  1. A Look Into Competitors

We needed to conduct a competitive analysis for Eatopia to validate that there was indeed an unmet need in the market - while numerous nutrition apps exist, none specifically addressed the challenge of increasing fruit and vegetable consumption among college students through an engaging, gamified approach tailored to their lifestyle and preferences.

Design Process

  1. Ideation: Turning Insights into Concepts

Our ideation process leveraged survey insights, literature reviews, and our experience in empathetic design and gamification to brainstorm potential solutions for our HMWs.

HMW encourage them to consume 5 cups of FV everyday?

One of the main focuses of Eatopia is habit formation with respect to eating. Any habit formation is a three-step cycle: cue, routine and reward.

HMW make FV consumption fun through gamification?

HMW enhance awareness of self-perception to promote a positive attitude towards healthy eating habits?

HMW Increase the accessibility and affordability of fruits and vegetables for college-going young adults?

Note: Partnership ideas were conceptual due to time constraints, leaving room for future development.

See Details

HMW Increase the accessibility and affordability of fruits and vegetables for college-going young adults?

Note: Partnership ideas were conceptual due to time constraints, leaving room for future development.

See Details

HMW Increase the accessibility and affordability of fruits and vegetables for college-going young adults?

Note: Partnership ideas were conceptual due to time constraints, leaving room for future development.

See Details

HMW Increase the accessibility and affordability of fruits and vegetables for college-going young adults?

Note: Partnership ideas were conceptual due to time constraints, leaving room for future development.

See Details

HMW Increase the accessibility and affordability of fruits and vegetables for college-going young adults?

Note: Partnership ideas were conceptual due to time constraints, leaving room for future development.

See Details

  1. From App to Appetite: The Eatopia Flow

Next, we mapped out the app's user flow to make upping one's fruit and veggie game a piece of cake (or should I say, a slice of watermelon?)

  1. Initial Usability Test (Wireframes)

Before diving deeper, we wanted to test our concepts - so we turned to our trusted source again: fellow students. We created a task list for each flow and asked 3 people to perform them without guidance.

We aimed to assess

  1. Readability and accuracy of visualizations in conveying information

  2. Discoverability of information

  3. User preferences and feedback

Key Takeaways

Positives

  1. Testers found the visualizations original and interesting

  2. The conversational-style mood tracking feature was well received 

  3. Testers found the flows easy to navigate.

  1. Readability and accuracy of visualizations in conveying information
  1. Discoverability of information
  1. User preferences and feedback

  1. Main Flows

After initial usability testing, I refined the home screen and reflections feature to address user pain points and enhance the experience. Below are Eatopia's three main user flows.

Flow 1: Food & Conversational Mood Tracking Feature

Flow 2: Reflections Feature

Flow 3: Social Feature

  1. Final Usability Test

We conducted one final usability test with 3 relevant participants. To view detailed information on the recruitment process and task list, click here.

We aimed to assess

  1. Readability and accuracy of visualizations in conveying information

  2. Discoverability of information

  3. User preferences and feedback

Key Takeaways

Positives

  1. Users found the visualizations interesting and easy to understand.

  2. Users got a good grip of what Eatopia does and the flow of information.

Eatopia - The Solution

I crafted the app's visual identity through a detailed style guide, which enabled seamless collaboration as our team designed various features. I then brought this shared visual language to life in my designs for the home screen and Reflections feature. Here's a breakdown of features based on our HMWs.

HMW encourage college-going young adults to consume 5 cups of FV everyday?

Food Tracking Feature

Habit formation is at the heart of Eatopia. We follow the proven three-step cycle: cue, routine and reward - transforming healthy eating from a choice into a lifestyle! 🌱

HMW make FV consumption fun through gamification?

Social Feature

  • In-app Rewards: Earn coins with every meal logged and use them to buy fruits and veggies at the university store through the farm-to-institution plan! 🪙

  • Social Features: Join/Start duels & leagues to compete, connect, and conquer goals! 🏆

  1. HMW enhance awareness of self-perception to promote a positive attitude towards healthy eating habits?

Reflections Feature

Why track food and mood? Because lasting habits start with understanding your patterns! Reflect, learn, and grow! 🧠

Conversational Mood Tracking Feature

Conversational Mood Logger: To promote reflection on emotions and their underlying causes, beyond typical scales. 💬

Interactive Prototype

Ready to up your fruit and veggie intake with Eatopia?

To navigate prototype

R

To restart

Design System

I designed a style guide and component library to enable seamless team-wide collaboration.

Color Palette

To capture the essence of vitality, freshness, and positivity, we curated a fresh and vibrant color palette. These hues were chosen to align seamlessly with the themes of healthy eating, wellbeing, and habit formation.

Typeface

To evoke wholesomeness, we used Poppins for its clean, rounded and modern look, and to evoke seriousness and professionalism, we used Lato for its approachable yet polished vibe.

Component Library

I created a component library to facilitate cohesive designing within the team.

Conclusion

  1. Challenges Faced

Sustaining User Engagement in Long-Term Health Improvement

One of the significant challenges we faced while designing Eatopia was maintaining user engagement when the benefits of food and mood tracking are primarily long-term and not immediately quantifiable.

Balancing Depth of User Research with Time Constraints

Time constraints limited our research to literature reviews, preventing in-depth user interviews that could have uncovered additional valuable features and requirements.

Promoting Honest Food Logging in a Reward-Based System

Ensuring user honesty in food logging when the app relies on trust, as users might prioritize in-app rewards over accurate reporting.

  1. Future Work

Enhancing Health Education

Future iterations will focus on educating users about the long-term benefits of healthy eating, aiming to establish sustainable habits through in-app guidance and behavioral nudges.

Simplifying food logging with Behavioral Change Techniques (BCTs)

We aim to streamline food logging using graded tasks, such as pre-filled meal suggestions and one-tap logging for recent meals. Additionally, we plan to implement smart detection for duplicate entries, prompting users with quick yes/no confirmations to reduce errors.

Exploring Food-Mood Interaction

We aim to investigate the correlation between food and mood, quantifying this relationship to deliver personalized insights that encourage healthier eating choices and deeper user engagement.