terra logo

Terra

A mobile-first web-application that rewards and educates users on food waste as they buy peculiar produce.

Timeline

2 months

Project Type

Mobile-first / Web-app / Product

Role

Product Designer (team: product manager, product designer, 2 software developers)

Tools

Figma, Adobe Illustrator, Adobe Photoshop, Procreate

Terra thumbnail

Bite Sized Summary

Problem

1. Challenges in forming consistent eco-friendly habits in minimizing food waste (more specifically, finding motivation)
2. Information overload & credibility issues when learning about environment

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

Solution

Develop a mobile-first web application that helps mitigate food waste with core features:
1. Provide bite-sized information about food waste to educate users
2. Reward users through a point system so that they can be encouraged to buy imperfect produce
3. Allow users to see each other’s progress in order to feel motivated to continue their newfound habits

Users

Millenial/Gen Z who are interested and wants to be educated in the food waste cause

My Role/Responsibilities

1. User research & discovery
2. Conceptualize & develop solutions to pain points
3. Produce lo & hi-fi wireframes and prototypes
4. Conduct usability testing
5. Produce final designs based on user feedback
6. Create a design system with redlining to efficiently hand off docs to our team's devs

Constraints/Challenges

1. Pivot from user research in general environment / eco-friendly habits to narrowing down to one cause (food waste)
2. 1 software developer dropping out midway and another one joining last minute
3. Time constraint of 8 weeks to ship MVP

Design Process

Our team used the double diamond method to conceptualize, develop, design, and create Terra from start to finish.

double diamond design process

One of the main obstacles our team faced was going from a general problem to focusing on a specific problem. While this was difficult, it was a much needed process in order to constrain features and deliver an MVP in 8 weeks.

Problem Space

Starting from the general problem, 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. More importantly...

20%

Of produce or more gets thrown out for cosmetic reasons (weird shapes, odd colors, blemishes).

User Research - General

Initially, we were focused on a habit-forming app that’s more generally on the environment with no emphasis on a specific cause.

empathy map

But a great product should be focusing on 2-3 great features, and we realized that environmentalism was too large of a problem space - we had to narrow down.

User Research - Specific

After much external discovery and deliberation with my product manager, we decided to focus on combating food waste. This decision was supported by our initial survey, which indicated 10 out of 26 survey respondents and 5 out of 10 users through in-depth interviews have an eco-friendly habit that has to do with consuming & managing food.

We then sent out a follow up survey in which 16 people that had eco-friendly habits tied with food responded. What we learned:

50%

were moderately surprised that food waste is a significant contributor to greenhouse gas emissions

93.8%

have seen food with cosmetic quirks, but there was an even split for purchase decision.

User Research: Pain Points

After affinity mapping and grouping user research into themes, we focused on 3 main pain points that were commonly said amongst users.

affinity mapping
1
Information overload

Learning about the environment can be overwhelming because there is a huge variety of information.

2
Credibility issues

Users need to figure out if the source is credible or trustworthy when learning about the environment.

3
Finding motivation

Habits require a constant effort in being motivated, especially for eco-friendly habits. Users mentioned that gamification and doing things with others help boost motivation.

Persona

Given these pain points and user values, we also created our persona, which will also serve as our ICP (Ideal Customer Profile).

terra persona Jordyn

Problem Statement

Based on our insights and the exploration of our problem,

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

Solutionizing

effort impact matrix

Based on our user pain points, we've decided to come up with a mobile-first web application that helps mitigate food waste. We used an effort/impact matrix to prioritize our features. The three core features that we wanted to implement:

1
Be rewarded through points

Encourage users to buy peculiar produce by being rewarded through a points system.

2
Easily learn about food waste

Educate users about food waste through bite-sized information.

3
Be motivated with others

Allow users to see each other’s progress in order to feel motivated to continue their newfound habits.

Lo-fi wireframes

When designing my first wireframes, I focused on the onboarding process and main user flow of a user taking a picture/uploading a photo of a peculiar produce, then getting rewarded if they bought the produce.

low fidelity mockups

Design System

I then created a design system to hand off to my devs. This included our logo, colors, typography, buttons, forms, icons, assets, and spacing information (redlining).

logo, colors, and typographybuttons and link statesforms and iconsassets

I also had the joy of creating Terra's mascot, Mr. Terra. My graphic design background came in handy!

Mr terra with groceriesmr terra saying hi
mr terra in wastecongrats animation

Hi-fi Wireframes & Prototype

Using the design system, I created my high-fidelity wireframes (not all wireframes shown in image below).

hifi mockups

At this point, I had many discussions with my devs in terms of technical feasibility, especially our camera feature. Luckily an experienced dev helped us out last minute, and it turned out that implementing the camera feature could be done with a HTML embedding system (Thanks Roy, if you're reading this)!

Usability Testing

After iterations on my hi-fis, I conducted usability testing with 6 users. Writing a research plan made my goals clearer for what I wanted to learn through testing, and it also ensured an unbiased process for all participants.  

1
Research goals

1. Figure out if users can go through onboarding process smoothly
2. Figure out if users understand what Terra is
3. Figure out if users understand who Mr. Terra is

2
Research questions

1. Can users go through the main flow of uploading a picture?
2. Do users understand what Terra is?
3. Do users understand who Mr. Terra is?

3
KPIs

1. Time on task: how much time users spend uploading a picture
2. Conversion rate: % of users who successfully uploads a picture and sees their harvest board

1
Methodology

1. Moderated usability study (through zoom)
2. Location: US (remote)
3. Each session lasts for 30 minutes

2
Participants

1. Age: 18-30 with a fair distribution of gender
2. English-speaking participants

3
Script

I wrote a script beforehand so that I don’t miss out on anything.

Usability Testing: Insights

Here are some key learnings from participants after testing. They were extremely helpful in iterating on designs and guiding my final prototype version.

Design Iteration

Considering user feedback from the usability study, here are some noticeable changes I’ve made to the design.

Added a “best selling” category at the very top, so that customers can easily order popular drinks.

before onboarding

Before

after onboarding

After

Being more explicit about Terra: added  "how Terra works" cards that users can toggle through

before home

Before

after home

After

Changing visual elements: making buttons more clear to click on

before account

Before

after account

After

Simplifying screens and removing unnecessary pages that are confusing and non-intuitive to users

Final Prototype

Features:
1. Main user flow: upload peculiar produce and get rewarded.

2. See all the peculiar produce you've saved in your harvest board.

3. Receive bite-sized food for thought every day.

Conclusion

Thanks for reading this far! As the sole designer on my team, this opportunity allowed me to grow as a designer and become better at cross-functional collaboration.

Main takeaways:

1. Constraining and narrowing down features according to time limits is key to any great product.
2. As a designer, you might think something is intuitive, but it's actually not (why usability testing is a must).
3. Communicate with your devs about technical feasibility, even if its a very early-on ideation stage.

Next steps in project, if further developed…

Here is a product roadmap if Terra is further developed (thanks to @Donovan Chiu, my wonderful product manager for this roadmap)!

terra product roadmap

Other Works