The FoodPrint Guide

There are two major problems with the plethora of online environmental learning tools – they don’t offer instant feedback and they aren’t interesting. And thusly, they are hard to learn from. This is the problem I set out to solve, developing an interactive and fun foodprint calculator.

Visit the web app here, or heck below for the phone-sized version. The web app is fully responsive and will work on a variety of devices and screen sizes.

This is my first javascript powered interface. The app is only conceptual – the data isn’t real. But it works (in Safari, Firefox and Chrome at least).

I wanted to create something that allowed people to learn about sustainability and food in a natural, intuitive way. That means playing. There is a real need for this, as similar experiences on the web sacrifice all hope of experiential learning by separating input and output.

How it works

The process notes are available in blog format, but I’ll cover the basics below.

Each food slider is given a range according to its relative environmental impact. For example, the tomatoes goes from 1 to 3 and the steak slider goes from 1 to 13. Those are guesses, but in the real world it’d be based on a combination of all water and land use, packaging, greenhouse gas emission and whatever else. So it’d still be just a guide.

The sliders’ outputs are summed and multiplied by the food miles slider output, between 1 and 1.3. It’s a gross simplification but 1 would be if you grew your own food and 1.3 would be if you bought everything at the supermarket. It would vary a lot for different foods, so in a real app this multiplied would need to be independently weighted and applied to each food. However, the app would work similarly as it does now.

The final figure is a bit randomly large, so it’s multiplied again by a factor that keeps it relevant, giving a touch of realism to the output.

On design and development.

The two main difficulties were implementing the javascript and keeping the interface simple put intuitive.

The sliders are html5 range inputs, styled with visual assets developed in Affinity Designer, a great new vector program for mac.

There isn’t much to say on how I chose the visual theme, except that I approached it in a simple naive way. A black background keeps a spacey feel. The visual elements are cartoon like and fun. My experience is that simpler, easier, is usually better unless there’s a specific reason to take the hard road. It allows more time to focus on what matter.

In this case, what matters was creating a layout that works in a range of situation, using basic HTML, javascript and CSS media queries. It looks good and is as easy to use on a 27″ display down to an iPhone4. This isn’t a technically complicated app, but I feel it’s done well enough to put out there as an example of my work.

The app was going to be more complicated, but to keep it simple, I removed an element that presented a visual representation of the meal, on a plate. There would have been too much to keep track of, removing the effectiveness of interacting and seeing the immediate results.