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.
The FoodPrint Guide. Check it out.
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 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.
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.