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
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.