COLAB14 - Mobile App

Tupper

Track Expiry Dates & Combat Food Waste!

Problem Background  

Our users are American millennials who want to combat personal food waste and save money. We are addressing this problem because it is estimated that up to 30-40% of the food supply in the United States is wasted and nearly 1/2 of all fruit and vegetables produced globally are wasted each year. That, in turn, is a waste of resources such as energy, water, labor, and money.  We also know that especially during this global recession you can save money simply by buying only what you need, eating what you buy, and avoiding throwing away food. 

This is where our app comes into play. We want to empower our users by providing them a way to easily inventory and manage their food, track and be alerted to items that are going bad, and inspire them to use or donate their food items instead of throwing them away.

User Pain Points & Feedback

Findings from Initial round of user testing:

For our preliminary user research, we surveyed 40 and interviewed 5 American millennials. We found:

  • A majority of respondents (70%) found it valuable or extremely valuable to know what food items and the quantity they currently have in their fridge/pantry but did not currently have a great way of tracking their items. 
  • Almost 90% of our respondents said that if they were reminded when a food item in their fridge/pantry was close to expiration they would be more likely to use it before it expired.
  • 67.5% said they would use a storage guide if it meant their produce would last longer.
  • 70% said that they end up having to throw away food because it has expired/gone bad.
  • 44.7% said that the rising food costs had negatively affected their grocery budget.

Common pain points based on survey and interviews: 

  • Ending up with duplicate food items because they couldn’t remember what they already had at home when grocery shopping.
  • Having to throw away food because they lost or forgot they had it. 
  • Food spoiling quicker due to improper storage.
  • Spending a significant amount of money on food items they end up throwing away.
  • Buying items for a recipe and only using a small portion with the rest going bad. 
  • As food costs rise, users are throwing away more and more money.
  • Knowing food waste is bad for the environment but not knowing how to mitigate it.
Forms response chart. Question title: Would you use a storage guide if it meant your produce would last longer? . Number of responses: 40 responses.
Forms response chart. Question title: If you were reminded when a food item in your fridge/pantry was close to expiration would you be more likely to use it before it went bad?    . Number of responses: 20 responses.

User Persona:



Large takeaways

These findings aligned with our assumptions; our users were looking for a better way to track, manage, and increase the shelf life of their food items so that they could waste less food and save money. These findings led us to build the features for our MVP: inventory tracking, expiration reminders, and a storage guide. 

Based on our insights and the exploration of our problem, we came up with the following problem statement:

Problem Statement: 

“How might we empower American millennial individuals to throw away less food, save money and help the environment?”

Solution Explanation

Once we landed on our problem space, we developed our KPI’s to create an analytical basis for decision making and to help focus our attention on what matters most when building out our MVP and future iterations. We chose to focus on adoption, enegagement and retention. Overall number of users is an important metric for determining success but we also wanted to look at specific feature usage, click through rate, retention and NPS. 

Based on the meaningful feedback and user pain points we collected about personal food waste, we landed on a mobile application to inspire and help our users to throw away less food and save money. These three core features we chose to implement for our MVP:

  • Inventory management - Help our users manage their food supply
  • Storge Guide - Educate our users on proper food storage
  • Expiration tracking with push notifications - Alert our users to impending expiration dates

Lofi & Hifi Mockups

https://www.figma.com/file/ce22JbEQPHYILoi8SwdJ8Y/Untitled?node-id=43%3A2

Iterative Design Learnings

After we showcased our prototype to the users again, we learned that there were some accessibility concerns that required adjusting the sizing and spacing of buttons. Participants expressed some difficulty tapping on buttons to complete certain tasks which was an error that needed to be fixed immediately. Our goal for this product is to help users manage their food before they expire, so we created separate tabs to help them keep track of the food they have. Receiving feedback early allowed us to quickly identify issues and refine our product before launching.

Implementation Details 

Technical implementation

Where is it hosted? 

The Tupper mobile application will be available on the Google Play Store and Apple App Store in the future. An Android release APK can be found in the ReadMe file of the project repository link. The backend of the application is hosted on Heroku.

What is your tech stack?

The Tupper mobile application is built with React-native and Typescript. We chose React Native because it’s a cross-platform mobile framework, it saves time and effort, and has high performance because it uses GPU for computing tasks and the developers are familiar with the Javascript programming language. Redux-toolkit for App state management, React-query for server state management, and Firebase Cloud Messaging for push notification.

The server side of the application is built with Express.js a Node.js framework and Typescript, we choose Express.js because of our familiarity with the framework and its speed. Prisma ORM because it integrates well with Typescript, and PostgreSQL database to persist user data.

Technical challenges

What was the hardest part of development?

The hardest part of developing Tupper has to be coding for both Android and iOS platforms at the same time, making sure any newly installed package is properly configured for both platforms. Also, implementing the push notification feature, we couldn’t complete it for iOS because it requires a physical iOS device for testing and none of the developers on the team own a physical iOS device.

Does your app have any scaling issues?

The server application is currently hosted on a free Heroku plan with 550 - 1,000 dyno hours per month, what this means is that the server stops responding to requests if the 1,000 dyno hours per month gets exhausted before the end of the month. Also, with heroku postgres database limit of 10,000 rows and a maximum of 20 database connections, if the application data reaches 10,000 rows, the database is unable to add new rows, and not more than 20 instances of database connection is allowed at a time. We would have to move to a paid plan as the application grows.



What are some key takeaways?

One of the developers on the team had to learn the React Native mobile framework to contribute to building the mobile application, he was able to learn really fast and contribute greatly to developing the application because he has experience working with React framework.

We had to look into server state management with React-query because of optimistic updates and caching on the U.I. With the concept of optimistic updates, when a new food item is added or edited the changes reflect on the U.I instantly even before the changes are persisted in the data store. If the request is successful, the U.I stays updated and any previously cached data is invalidated and refetched, otherwise, if the request fails on the server, the update is reverted on the U.I.


Caching server data with React-query on the U.I saves from sending multiple requests to the server as long as the requested data has not been updated at the time of the last request. Working with React-query to achieve these concepts is easier than expected.

Implement push notification with Firebase cloud messaging and notifee in an Android & iOS mobile application. This is our first time doing this, it took a lot of time to read through the firebase and notifee documentation but it was all worth it because we were able to get it done.

Future Steps

While Co.Lab has officially ended, our product journey hasn’t. Given the positive feedback so far, we have decided to stay together and keep working on Tupper! 

We received insightful feedback from our users during our initial and follow-up research. Lots of great ideas, inspiration, and understanding came from talking to our users. As a team, we brainstormed a list full of feature ideas after learning more about our user's needs but we were challenged with the task of scoping down our project for our MVP. However, we plan to continue working on Tupper and adding some additional features soon! 

We continually heard our users mention that keeping track of their food items was a challenge. Things would often get “lost” or forgotten in their pantry/fridge and end up expiring. This problem space supported one of our main features, helping users track their inventory. In the future, we would like to continue to make this core feature stronger by making it easier and quicker to add items with the addition of a quick scan option. 

Our storage guide feature and expiration date notifications were more popular than we anticipated. Almost 70% of our users said that a storage guide would be helpful and 90% said they would be more likely to use an item if they were reminded before the expiration date. Simple storage changes and being alerted to spoiling items can make a huge impact by giving our users more time to use them. We plan to offer additional storage tips and custom notification settings in our future iterations. 

Digging a bit deeper, we learned that our users frequently buy food items needed for a recipe but end up only using part of it and the rest often goes to waste. Thus, Inspiring a recipe suggestion feature, where our app would track partially used items and offer suggestions on how to incorporate them into new dishes. Although we originally liked this idea, we decided it needed further validation.

Another feature idea we’d like to add is a shopping list creator. Our user would be able to easily add items to a shopping list and Tupper would make suggestions based on frequently used items and ones running low. We came up with this idea because 60% of our users said that using a shopping list helped them buy only what they needed often leading to less waste. 

Lastly, our user’s shared that putting in the effort to add items might eventually become a roadblock so in addition to making it easier to add items. We also want to explore ways to reward and motivate our users. Gamification-type animations and badges are features we plan to flush out and add to our v2 or v3 iterations.

Learnings

Product Manager Learnings:

Christina Knoll

I learned so much these past 8 weeks! Leading this amazing team has been such a pleasure. Despite spanning the globe with our time zones we were able to come together to build something we all are proud of. Being part of Co.Lab has reinforced my Product Management skills and helped me strengthen my technical understanding and design skills.

I learned how to efficiently break down a problem into a small set of component parts, validate assumptions, conduct user research to discover pain points, flush out features and build out a backlog, ensure open lines of communication, align the team on next steps, work cross-functionally, develop user flows and so much more! 

Overall, it was an exciting challenge to keep our product in scope to meet our 8-week goal and I’m so proud of this team for what we were able to accomplish.

Designer Learnings:

Paolo Suarez

Taking on a project and shipping out an MVP in a span of 8 weeks was definitely a challenge that required me to put my skills as a designer to the test. I would say consistent communication is critical for a team to succeed, especially working with people in different time zones. I was fortunate to be part of such a supportive team that constantly pushed me to hone my craft.

Through Co.Lab, I was able to get a better grasp of how to dissect problems piece by piece to understand the users’ pain points, prioritise which features would have the greater impact, work cross-functionally with people from different fields, and keep an open line of communication if any concerns appeared. I definitely had fun challenging myself in this program and I feel much more confident as a designer.

Developer Learnings:

Lawal Dauda

These past 8 weeks, I’ve been able to improve in a lot of aspects which includes contributing more to idea brainstorming and effective task prioritization. I have also improved in planning my time and making myself available for important things. I have also gained more experience in working with a diverse team across different time zones.

Communication is also one aspect I have been able to improve in during the program. I now feel more equipped to explain technical aspects of building software with non-coders and not have to think they won’t really understand.

Technically, I was able to work with some tech libraries and concepts that are new to me and used them to achieve the desired results. Also, I was able to achieve end-to-end (server-to-client) implementation of a push notification feature in an application.

Developers Learnings:

Ahmet Bozacı

&

This is the first time I had worked on a cross-functional team with a dedicated Product Manager and Designer. I developed my ability to communicate and collaborate with other people in global teams effectively.

Prior to Co.Lab, I had never worked on a mobile application. I had the chance to learn react-native with typescript. It was challenging for me to build and learn at the same time in 8 weeks. I learned how to manage time and overcome deadline stress.

I've definitely been pushed in the past 8 weeks and that will make me a better developer as a result.

Full Team Learning

Coming together as a cross-functional team to accomplish a project we are extremely proud of!