Based on our user surveys and interviews, a significant majority of users considered nutritional information (micros/macros) important when choosing what to eat, but did not want the hassle of logging every meal to understand how it affects their overall health.However, logging remains crucial as it provides indispensable support to users on their wellness journey.

This highlights a gap between the desire for knowledge and the practical challenges of implementation. Hence, there is an opportunity to bridge this gap by offering a user-friendly, simplified approach to nutrition tracking that aligns with users' preferences and lifestyle demands.

‍

Problem Background

In today's fast-paced world, many health-conscious individuals want to maintain a healthy lifestyle and understand their nutritional intake. However, many individuals feel overwhelmed and frustrated when they have to navigate through the complicated and time-consuming solutions available in the market to achieve their goals.

Previous attempts at addressing this issue have involved logging every meal, a process that many find cumbersome and discouraging.

As a result, the users often feel like they're failing to understand nutrition and make healthier choices.

‍

User Pain Points & Research Insights

We conducted research through a user survey and user interviews. We identified some of these key pain points:

Users care about managing their nutrition and don’t want to rely on an app due to the time required to track food, so we focused on making it easier to track food some text
- Users main goals are eating healthy, losing weight, or to build muscle

Users stopped using an app because they did not like how tedious and time consuming the tracking felt.
- 80% of users have used a nutrition tracking app before (only 25% of people currently use one today)

Users don’t want to use nutrition tracking apps forever and want to stop using it when they have achieved their goal.
Most users are somewhat familiar with what macronutrients are
- In the beginning of their nutrition journey, they had no idea what they were and had to learn (e.g., what they were, how to achieve macro goals, etc.)

Feedback

Our preliminary user research to validate this problem with nutrition tracking app users found that users overall care about managing their nutrition but don’t want to log every meal and rely on an app forever. By creating a product that allows users to learn about managing their nutrition through macro management, it will empower users to learn how to manage their nutrition enough that they won’t need to rely on an app and they can delete it.

Solution Analysis: Based on our Market Analysis and user surveys, we devised strategies to address prevalent challenges. We discovered that most products in the field relied on tedious manual text input for nutrition feedback, resulting in user disengagement and eventual app discontinuation. To address the challenges we came up with a more engaging approach to nutrition tracking. The analysis guided us to finalise the unique proposition of our app and address user dissatisfaction.

‍

Solution Explanation

Based on our target users’ pain points and analysis, we wanted to work on the following features:

Users can input their meal by taking a picture of the meal either by capturing or uploading from their device and receive AI generated feedback on the macros. (MVP)
Our product’s standout feature, offers a seamless and enjoyable way for users to log and track their meals. Recognizing the common habit of snapping pictures before eating, we've integrated this concept into our solution, making the tracking process both effortless and engaging.
Users can check their overall calories consumed throughout the day.
Instead of imposing a strict calorie budget, our approach allows users to track their daily calorie intake, empowering them to make informed and healthier food choices. This flexibility promotes a positive relationship with food and reduces the stress often associated with rigid calorie restrictions. It is also evident from many researches that calorie count varies from person to person and depends on various factors. Hence we decided to go with macro break down rather than the calorie budget.

‍

Lofi & Hifi Mockups

Link to Figma

Lofi Mockup

Hifi Mockup

‍

Iterative Design Learnings

After we showcased our prototype to the users again, we learned that:

The overall experience was rated an average of 4.6 out of 5. The UI was simple, and users loved the animation.
Users want to see the food source and understand accuracy. They felt like the UI was so simple that it was missing context. For example, is it calculated based on Costco Chicken Nuggets or McDonalds Chicken Nuggets? some text
- Error didn’t pop up when a photo of a face was taken. It spent a good amount of time “processing”. Then it generated 302 calories. What was this based on?
- Recommendation: Set up an error message.
- Improve accuracy by including a details page so it shows how the nutritional amounts are generated

Users want to know how the calories and macro breakdown (meaning fats, carbs, and protein) is generated some text
- Recommendation: Need food details page with name of food (source), ability to see and edit quantity, etc.

The UI for the camera looks different than expected for an iphone. You scroll down to the camera; instead of it taking over your whole screen. When you go to add a photo, then select take a photo, then the camera is as expected
- Recommendation: Adjust camera settings

Ability to have food items add up (daily intake dashboard).

‍

Technical Implementation

Hosting Platform:

Our application utilises Render for both the frontend (static site) and backend (web service), offering streamlined deployments and integrated services which simplify the development of the progressive web application and production workflows.

Tech Stack:

Frontend Framework: React coupled with Vite for its fast build times and modern development experience.
Backend Framework: Node.js with Express, chosen for its scalability in handling asynchronous operations and its extensive middleware support.
CSS Frameworks: Tailwind CSS for its utility-first approach to styling, and Material-UI for its ready-to-use React components that adhere to Material Design principles.
Database: Firebase, due to its real-time data syncing capabilities, easy setup, and NoSQL foundation for flexible data structures.
Other Technologies: Gemini Pro for image analysis, Edamam for cross-referencing ingredient data, Axios for promise-based HTTP requests, CORS to handle cross-origin requests, and Framer Motion for animation in React.

High-Level Journey of a Request:

The client opens the app and is prompted to either upload an image of their meal or take a photo.
The uploaded/taken photo is sent to Gemini Pro via Axios for macro and ingredient analysis.
The received ingredient data is then cross-referenced with Edamam's database to gather detailed macro information.
An averaging and summation logic runs to blend Gemini and Edamam's data for more accurate nutrition values.
The final nutrition data is compiled and sent back to the client-side to be displayed on the user's dashboard.

Why These Tools?

Gemini Pro and Edamam were selected for their no-cost tier, offering substantial functionality for startups. React and Vite are used for their developer efficiency and performance, allowing rapid development with modern tooling and fast refresh cycles.

Application Walkthrough:

Create: Users can add meal entries by uploading images, with the backend processing these entries to fetch nutrition data.
Retrieve: The app retrieves meal history and nutritional details from Firebase, displaying this data dynamically on the dashboard.
Update: Users have the option to edit meal details, where changes are immediately synced with Firebase and reflected in the app.
Delete: Users can remove meal entries, with the app sending requests to Firebase to delete the corresponding records.

Technical Challenges:

Integrating Gemini Pro and Edamam's APIs posed a significant learning curve, especially to chain these services for a coherent data flow. Creating a multi-layered app demanded an understanding of asynchronous operations and state management across different components. Scaling concerns loom as user traffic increases, which would necessitate a move from free API tiers to paid services to accommodate advanced features like barcode scanning and recipe searches.

Key Takeaways:

The project reinforced the importance of teamwork in maintaining a clean architecture and effective version control. It underscored the complexities involved in app development, from integrating third-party services to handling a multitude of frontend and backend tasks.

‍

Future Steps

While our project's continuation is uncertain, our nutrition app's roadmap prioritises enhancing user experience and functionality. Next phase of development is to integrate text and barcode scan as inputs for streamlined data entry, followed by personalised feedback algorithms. Additionally, we'll develop a dedicated meal logging page with an integrated calorie counter and introduce a calorie budget toggle for users with weight goals. Rigorous user testing will precede the app's next phase launch, ensuring focus on user experience and continuous improvement.

Users found capturing pictures to count macros an intriguing method to learn about their daily nutrition. Even in the absence of a traditional logging page in our MVP, users highlighted the significance of this feature in helping them make informed decisions prior to meal purchases. This functionality empowers them to opt for healthier alternatives, showcasing the app's value in promoting mindful eating habits.

However, they expressed a desire for transparency in calorie and macro breakdowns, seeking clarity on food sources for accuracy. We incorporated a food details page, displaying all the ingredients that go into the dish to address this concern.

‍

Images

‍

Learnings

Product Manager Learnings:

Gayathri Muppaneni

I learned how to draft product spec, user stories along with its acceptance criterias, and maintain a product backlog. These critical skills ensured clear communication, team alignment and expectations on priority features which inturn leads to a successful product development and delivery.
I learned that engaging in scrum practices like sprint planning, retrospectives, and maintaining a sprint backlog fosters clarity, accountability, and facilitates iterative enhancements.
I learned the importance of feature prioritisation, user feedback integration while maintaining a clear idea of product vision through agile methodology. This methodology helped me be flexible and build features that had maximum impact on our users.

Designer Learnings:

Vicky Ha

I learned how critical it was to have alignment the product direction before jumping into build lo-fi wireframes. We had a lot of great ideas but each idea could have meant a different type of app (e.g., is it a tracking app or game app)
I learned how important it was to gather feedback from Engineers early on in the process to understand what is feasible and the effort required to build something.
I learned how critical communication is when moving from design to development to help everyone understand the design and the intraquices of building something from scratch.

Developer Learnings:

Omar Gonzalez

During my journey at the product bootcamp, I gained valuable insights and skills that have significantly enhanced my capabilities. I explored the potential of Progressive Web Apps (PWAs). I also learned and dove deep into Figma-to-Code tools like Code Parrot, which allowed me to translate designs into production-ready code efficiently, maintaining design fidelity throughout the implementation process. Collaborative skills were honed through close interactions with our designer, project manager, and fellow developer, ensuring a shared vision and effective communication to avoid unnecessary setbacks. Additionally, I tackled the complexities of integrating multiple APIs, learning about authentication, rate limits, and maintaining data consistency.

I overcame hurdles in state management within our React app as well - which enabled me to manage state cleanly and compartmentalize it for scalable feature development since we plan on adding more and more features. Lastly I learned how critical it is to communicate often and clearly with the other devs as more features get added since oftentimes one dev has to build on top of what the other dev has programmed and it's essential to know how an existing component works to be able to build on top of it.

Developers Learnings:

Alex Huynh

&

From this project, I gained a comprehensive understanding of integrating and leveraging the capabilities of various APIs for a seamless user experience. It honed my skills in handling asynchronous data flow and state management within a robust React frontend, backed by Node.js and Firebase.

The challenges encountered underscored the importance of a meticulously maintained codebase and the dynamics of team collaboration. Additionally, the experience brought to light the scalability considerations of a growing application, preparing me for the transition from development to production readiness.

Full Team Learning

Throughout this project, our team has honed key skills and methodologies that enhanced our collaboration, agility, and technical execution