FoodPrint: Responsible Eating

Making the world better, one taco at a time

Seriously, yum.

The prompt behind the exercise was to create an app that had a positive impact on the environment. I wanted to create something that was informative, convenient, and useful. The result was FoodPrint. FoodPrint is an app that allows people to plan meals for the week and see the carbon footprint produced. Users can change certain ingredients in a recipe to see what impact that has. (Chicken for example, has a lower carbon footprint than beef.) Once the user has their meals planned, they can get an itemized list of all the ingredients to check off while at the supermarket.

Planning

It was crucial to me that the product I made had a lot of utility. I figured that the best way to get people to actually make changes is to frame it in a way that makes their life easier. To help focus on what exactly I wanted to do, the first thing I did was create a user profile.

Bev, busy schoolteacher and mother of two, became the prototypical (and hypothetical) user of FoodPrint. She certainly wants to be environmentally conscious but finds it hard to do the right research with her busy life. She does most of the shopping for her family, so the onus to plan healthy meals for the family is on her. Bev is used to using the computer and the internet in her classroom, but when she is home she prefers her iPad for the mobility and ease of use. Based on this, it was clear that for her to adopt a new product, it would have to improve her day-to-day significantly without adding any additional burden.

App Overview

When FoodPrint first starts up, the user sees a series of statistics that drive home the point that yes, what you eat does matter. After that screen, users are sent to the week view. From this screen users can see what is planned for the week, and what the environmental impact is. It is in the part of the app that users can dive in to each day, choose their recipe, and mess around with the components. This is the main part of the app, but there is also a monthly calendar view and a shopping list component.

The main way that information is coded is via color. Every food item in the app is coded either green (low carbon footprint), yellow (medium carbon footprint), or red (high carbon footprint). For ingredients, this is their specific number and recipes are a combination of all ingredients. This color system makes it easy to, at glance, understand where on the spectrum an ingredient or recipe falls and how environmentally friendly a day or week is.

Week View

The week view gives the user a high level look at the meals for week. I wanted this screen to be information dense, but easily scannable. The upper part of the screen focuses on the individual meals, color coded based on their carbon footprint. I found during user testing that people were not sure what the colors meant, so during the refinement process a key was added to the navigation that surfaced that information.

Week View Progression

Underneath the meals is a bar graph that gives more insight to the individual meals. I thought that this would animate when changes were made, providing visual feedback that delights while also showing progression. I also ended up adding a discrete readout of the carbon footprint of the week after some testing revealed users would want that information.

One thing that I knew from the beginning was that goal setting was going to be a big part of this app. When users have a concrete goal, they are likely to push themselves to reach it. The final piece of this screen provides that goal, while also giving some statistics that are grounded in the real world. There is a circle that fills up as you add ingredients that require more fossil fuel. As that circle fills, it outgrows its bounds meant to represent the national average. My thought was that if people saw that bound, they would work to keep their circle inside of it. The other stats, car miles and lightbulbs left on, are meant to ground this information in a way that is relatable. (20 car miles is easier to contextualize than 1kg of CO2)

Day View

Day View Progression

The day view is where most of the interaction happens. Once the user has chosen the recipe they want for that day, they can edit the (color-coded) ingredients in each recipe and watch the carbon footprint update below in a simple bar graph, repeated from the week view. The recipe is always viewable on the top of the screen, so there is always context.

I wanted to make sure that users could easily move from day to day, so I added controls for that on the left and right hand sides of the screen. Originally, this section was a collection of floating modals. As I worked through it, and ran user testing, I found that people needed a more grounded interface.

Conclusion

Overall, I consider the output of this exercise to be a high-fidelity wireframe. The main thing I wanted to practice was feature ideation and refinement. I enjoyed going through the user persona exercise and doing a lot of testing throughout the process. Moving forward, I would focus on cleaning up the interface and further refining some of the interactions and navigation throughout the product. You can see the InVision prototype here: https://projects.invisionapp.com/share/6TKTRKGX#/screens

Many icons downloaded through The Noun Project and are presented without changes:
Hamburger — Edward Boatman
Meat — Christopher T. Howlett
Meat — Nithin Viswanathan
Cheese — Shirley Wu

Thanks for taking the time to read this case study. If you would like to get in touch with me with any questions or feedback, my email is JonathanLampron@gmail.com

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.