COLAB13 - Web App

Terra

Terra is a mobile-first web-application that rewards and educates users as they buy peculiar produce.

Problem Background  

Saving the environment can be a tough task for most people and one of the biggest environmental causes that has far-reaching implications (i.e. water conservation, greenhouse gases, etc.) is food waste.

According to EPA, It has been shown that food is the single largest component taking up space inside US landfills, making up 22% of municipal solid waste (MSW). In regards to food waste, it's estimated that approximately 20% of produce or more gets thrown out for cosmetic reasons like weird shapes, odd colors, or blemishes on a peel you don't even eat. 

The problem is that despite the fact that there are apps within the food-waste/food waste management space, there isn’t an effective solution in which users would have a say in how to mitigate food waste. In other words, these apps often range from restaurant partnerships, partnerships with different companies, and connecting people to different agencies to share and donate food.

Research Insights

Initially, we were focused on a habit-forming app that’s more generally on the environment with no emphasis on a specific cause. We sent out a survey, which indicated and specified that ten out of 26 survey respondents and five out of ten users through in-depth interviews have an eco-friendly habit that has to do with consuming & managing food.

Generally, forming habits to help make a difference in the environment requires consistency and motivation, which are two of the common challenges that users have brought up. 

14 out of 31 survey respondents and 4 out of 10 users that were interviewed had indicated that habits require a constant effort in being motivated. For eco-friendly habits, this often boils down to conscious efforts in answering the question: “Why am I doing this?” 

By the time we specified more on our solution through pivoting towards food waste, we then sent out a follow up survey in which 16 people that had eco-friendly habits tied with food responded. 

50% of respondents were moderately surprised that food waste is a significant contributor to greenhouse gas emissions. In addition, 93.8% of respondents have seen food with cosmetic quirks, but there was an even split when it came to purchasing.

Taking these insights into account, we decided to focus on three main user pain points: 

  1. Information overload 
  2. Credibility Issues 
  3. Finding motivation to carry out eco-friendly habits. 

We have also created our persona, which will also serve as our ICP (Ideal Customer Profile) 

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

Problem Statement

How might we encourage and positively reinforce people to minimize food waste  so that it’s both rewarding and fulfilling?

Solution Explanation

Based on our user pain points, we have decided to come up with a mobile-first web application that helps mitigate food waste. The three core features that we wanted to implement were bite-sized information about food waste to educate users, rewarding users through a point system so that they can be encouraged to buy imperfect produce, and to allow users to see each other’s progress in order to feel motivated to continue their newfound habits.  

Lofi & Hifi Mockups

Here are some examples of how the designs evolved from lofi to hifi. As shown, there were some design elements that changed as we conducted usability testing. 

Iterative Design Learnings

With our hifi mockups, we went ahead and conducted usability testing sessions that were moderated to six people to see if our web app was working as intended. Some important feedback that we received from these six people include the following: 

  1. Being more explicit about Terra & our point system 
  2. Make Terra-specific copy more intuitive to users (ex. Harvest board, food waste habits etc.) 
  3. Working on visual elements (ex. components) to make them more user friendly
  4. Connecting food waste to peculiar produce better and being more explicit about its environmental impact 

Implementation Details 

Technical implementation

The application uses the Next.js framework for React. In particular we’re using Next-Auth, Server Side Rendering and the API Routes/Serverless Functions made available to us by the framework. The CSS is from Tailwind, with some limited use of DaisyUI (a Tailwind Component library). 

The application is hosted on Vercel, with the serverless functions deployed automatically by Vercel on deployment. The deployment process includes a Production and Preview process, so the PM and Designer can view previews before they are deployed to Production. The uploaded images are hosted by ImageKit using their free tier, which allows resizing and optimization on upload. The database is hosted on CockRoach Labs, and we use MailJet to send registration emails.

Technical challenges

The current deployment will scale to a considerably large user base. If the app sees regular, significant use then we can move to the paid tiers for Vercel, Cockroach Labs and ImageKit. These services all handle the infrastructure for the application, so we don’t have to worry about those.

The biggest issue during development was running into a bug with PassportJS and its handling of sessions. This required a pivot and switch to using Next-Auth. We used this to move the entire application to Next and take advantage of the framework for building out the application.

Future Steps

As a team, throughout our time in our program, we would definitely continue this project together in the near future. During the week leading up to the midpoint demo, we have made significant strides when we reached out to Misfits Market and talked with their Social Impact and Sustainability manager, Alex Golub. It was a productive meeting as she and the company were intrigued by what we are currently doing. 

That said, we do have a partnership opportunity with Misfits and we are currently exploring options to see what that partnership would look like down the line. Below is our GTM Plan and a mini-product roadmap that was presented to Misfits Market

GTM Strategy

Product Roadmap

In addition, we also plan to track the following actionable metrics to make informed decisions:

  • Session source and site engagement
  • Social engagement
  • Partner sources and conversions (i.e. Terra → Misfits → Misfits Subscriber)

Learnings

Product Manager Learnings:

Donovan Chiu

Prior to co.lab, I didn’t necessarily know what I was getting into because I also have a full-time job as a Content Marketing Associate for a B2B SaaS startup and it was a transition to go from selling the product to building one from the ground-up. That said, these past eight weeks have allowed me to not only learn so much but to form an extremely strong bond with my team and our mentor.

Despite our pivots and obstacles throughout the program, I have grown a lot regarding my cross-functional collaborative skillset and with my understanding of product management. I can take what I’ve learned in user research, agile methodologies, and my newfound love for being a scrum master back to my team in my job and give them a newfound perspective as our organization is pivoting to be a more product-led organization.

Designer Learnings:

Jenny Yoo

I learned so much during the past 8 weeks with this amazing team and our mentor. Through our pivots and obstacles along the way, I’ve come to learn how important team communication is (especially in remote settings) and what it means to truly do cross-functional collaboration.

I’ve grown as a designer in being able to constrain and narrow down features according to time limits, making design choices through user research rather than intuition, and learning how to hand designs off to devs efficiently and clearly.

Developer Learnings:

Shawn Townsend

During this project, I have had to learn how to be even more adaptable than ever before. This project had many twists and turns which were tough and definitely slowed the development of the project. On another note, I was able to learn and use a framework that I never used before called Tailwind. Tailwind is a CSS framework that is very straightforward and simple to use. I usually just use basic CSS to style any apps/projects that I work on. I’ve definitely been pushed in the past 8 weeks and I’ll become a better developer as a result.

Developers Learnings:

Roy Anger

&

While working on the project I’ve had a chance to work with another developer closely. The pair programming sessions especially have been fun and a great learning opportunity and experience.

Full Team Learning

Overall, our team has learned so much in regards to cross-collaborative communication. The obstacles and pivots that we have went through also strengthened not only our product’s narrative but the team’s identity and culture as well. With that in mind, it’s important to note that we have done so much as a team and we want to ensure that our team dynamic holds strong post-Co.Lab.