2 months
Mobile-first / Web-app / Product
Product Designer (team: product manager, product designer, 2 software developers)
Figma, Adobe Illustrator, Adobe Photoshop, Procreate
.png)
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?
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
Millenial/Gen Z who are interested and wants to be educated in the food waste cause
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
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
Our team used the double diamond method to conceptualize, develop, design, and create Terra from start to finish.
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.
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...
Initially, we were focused on a habit-forming app that’s more generally on the environment with no emphasis on a specific cause.
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:
were moderately surprised that food waste is a significant contributor to greenhouse gas emissions
have seen food with cosmetic quirks, but there was an even split for purchase decision.
After affinity mapping and grouping user research into themes, we focused on 3 main pain points that were commonly said amongst users.
Learning about the environment can be overwhelming because there is a huge variety of information.
Users need to figure out if the source is credible or trustworthy when learning about the environment.
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.
Given these pain points and user values, we also created our persona, which will also serve as our ICP (Ideal Customer Profile).
Based on our insights and the exploration of our problem,
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:
Encourage users to buy peculiar produce by being rewarded through a points system.
Educate users about food waste through bite-sized information.
Allow users to see each other’s progress in order to feel motivated to continue their newfound habits.
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.
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).
I also had the joy of creating Terra's mascot, Mr. Terra. My graphic design background came in handy!
Using the design system, I created my high-fidelity wireframes (not all wireframes shown in image below).
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)!
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. 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
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?
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. Moderated usability study (through zoom)
2. Location: US (remote)
3. Each session lasts for 30 minutes
1. Age: 18-30 with a fair distribution of gender
2. English-speaking participants
Here are some key learnings from participants after testing. They were extremely helpful in iterating on designs and guiding my final prototype version.
Be more explicit about Terra (connecting food waste to peculiar produce better and being more explicit about its environmental impact) & our point system
Make Terra-specific copy more intuitive to users (ex. Harvest board, food waste habits etc.)
Work on visual elements (ex. buttons) to make them more intuitive to users
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
After
Being more explicit about Terra: added "how Terra works" cards that users can toggle through
Before
After
Changing visual elements: making buttons more clear to click on
Before
After
Simplifying screens and removing unnecessary pages that are confusing and non-intuitive to users
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.
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.
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.
Here is a product roadmap if Terra is further developed (thanks to @Donovan Chiu, my wonderful product manager for this roadmap)!
