NutritionNest

Log nutritional intake, monitor daily calories, and search healthy recipes

TEAM

Founder

Software Engineer

Social Media Lead

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

PROJECT TIMELINE

August 2024 – October 2024

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

ROLE

Product Designer

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

KPIs

8% daily active users

~6% goals achieved

~10% NPS

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Summary

Serendipitous Dream Inc. (SDI) is a nonprofit organization dedicated to promoting health through scientific research, education, and charity work. We aim to serve the Irvine community first by building an app called NutritionNest, which focuses on helping people achieve their nutrition goals through a meal-logging app powered by AI. As a lead designer of this project, I collaborated closely with the founder, engineer, and social media lead to make their visions come to life.

Our team’s success metric for daily active user rate, increased goal achievement with NED’s support, and NPS driven by user referrals highlight the positive impact on engagement and motivation.

Challenge

Discussing features before initiating design phase

I met with our stakeholder to discuss initial concepts of launching a nutrition and fitness app. Our goal was to create an app that supported users in jump-starting their health journey. We ultimately decided to prioritize nutrition to avoid overwhelming users, recognizing that nutrition often serves as the foundation for beginning a successful health journey.

User Research

First, I ran online surveys on platforms like Subreddits, Facebook groups, Slack forums, and my professional network, focusing on users’ health challenges and obstacles. From over 30 responses, I found that users often struggle to stay motivated, which leads to inconsistent use and setbacks in their health goals.

"I need more accountability to keep my workout schedule going."

"I want something that can help when I feel unmotivated."

Competitive Analysis

I began looking into most commonly used nutrition apps to understand similar and different product offerings. Each app offers meal logging, journal, and recipes as commonly used features. However, there's few assistance for users seeking information on nutritional themed questions. Currently, user profiles are calculated based on statistical averages from their own user pools, which may lack accuracy.

Although these functions are important reasons for users to download, results will only show based on users commitment level from logging in their meals.

Competitive analysis of 4 direct competitors lacking in assistance and unique approach which helped guide our app's concept and vision. I found that there's a lack of assistance when users search for nutritional themed questions. These apps may seem like helpful tools, but they aren’t helping much with motivation, where consistency is a battle for most people.

Research Takeaways

Based on our feedback from users, we learned that users struggled to stay motivated with meal logs due to the lack of personalization. Our proposed solution is to focus on features that consisted of customization, engagement, and AI personalization.

Customizable

Flexible options to meet unique needs

Engaging

Compelling to achieve faster goals

AI Personalization

Increase support and instant advice

Ideation

After aligning our goals, I mapped out a user flow to identify bottlenecks and key screens, such as an AI chatbot for personalized support, restaurant listings for healthier dining, a recipes for meal planning, and a user journal for tracking progress.

Leveraged user flow to identify potential bottlenecks and prioritize features for the app's overall structure.

Exploration

I explored different design options to guide my vision to test out different visual approaches, allowing me outline the skeleton when structuring my visual hierarchy.

View design file↗

I explored different design approaches to understand how varying styles, structures, concepts, and constraints can shape the design trajectory.

Low-Fidelity

I shared early low-fidelity designs with the team, and while they liked the overall flow, they pointed out a couple of important issues. The floating action button made the interface feel cluttered, and AI wasn’t being used to its full potential—it was just a basic chatbot. Because of that, the app came across as just another meal-logging tool.

First stages of breaking down each tab's features with annotated labels to highlight key design elements and functionality, making them easier to digest.

Organizing content in second stage to make sure every design decision feels purposeful and helpful to the user on each screen. My Initial wireframes starting from log-in, progress-tracking journal, curated recipes, diverse restaurant options, and a floating chatbot button which made the UI feel crowded. AI feature was underutilized which felt like a typical meal-logging tool.

Iterations

We made the chatbot feel more human by renaming it to 'NED,' adding NED cards throughout the app for better support, and giving NED its own tab for easier access. The design was a hit and got the green light to move forward!

We enhanced our flow in final stages by integrating our AI assistant, NED, throughout the app's ecosystem, providing a nutritionist-like guidance. A dedicated homepage highlights NED's ability by delivering personalized feeds, challenges, and reports.

Final Designs

Final designs circles back to its core mission providing a customizable and engaging design approach. Users are guided through personalized functions, starting from completing the onboarding process to searching for personalized recipes and restaurants from their onboarding. NED cards throughout the app helps boost engagement with customizable options to adjust calorie goals through AI-powered personalization.

Customizable

Flexible options to meet unique needs

Engaging

Boost engagement to achieve faster goals

AI Personalization

Increase support with AI for instant advice

In our onboarding stage, users are greeted with a splash screen introduction along with log-in/sign-up, short 6-part questionnaire for a tailored, and final confirmation.

Here is the polished UI of journal, recipe, and restaurant tabs with dynamic NED cards, providing daily check-ins that create a personal support to drive accountability.

The NED page features a clean design with scrollable feeds that make it easy to dive into nutritional chats. We'll get inside look on three distinct NED cards highlighting simple, healthy snacks, 1-week of keto meals, and progress analysis. NED is here to support by boosting motivation and providing customizable features.

Documentation

This final document helps ensure things run smoothly from design through development to final delivery. This is also a detailed guide to make it easier for the team to understand the project’s vision and requirements.

View design file↗

View prototype↗

Final documentation includes final design, design system, and prototype, all optimized for quick and easy reference.

I used orange that serves as NED's primary color, contrasting with brand blue for buttons on NED cards. Secondary for softer colors, tertiary for icons, and vibrant gradient highlights AI moments, with neutrals providing balance.

Work Sans is used for headers and expressive moments, ideal for quick readability. To contrast, I used Inter that's versatile for body text and product copy which seamlessly fits into the design.

Full component library with all states complete, offering clear guidelines for our developer.

NutritionNest prototype

Reflection

Learnings

This process was challenging but learned so much. I gained valuable insights into what makes NutritionNest unique and learned the importance of clarifying business goals before diving into design. Understanding user pain points helped me re-evaluate critical design decisions, such as whether NED should remain in a chat room or be integrated throughout the app, ensuring that we address the right problems effectively.

Next steps

If I had more time, I would track which NED touchpoints are most effective in engaging users and helping them achieve their goals. I would also brainstorm strategies to help users reach their nutrition goals faster. Additionally, I would identify underused features, evaluate their potential impact, and focus on enhancing the most valuable ones.