Presenting… The FoodPrint Guide

Experience The FoodPrint Guide app here. Safari and Chrome are recommended. The core idea for this app is that people learn by experience. Immediate input and output means we can learn in a natural, intuitive way. Unfortunately lifestyle sustainability calculators don’t usually work like this. It’s a concept only – the data included in the app is not scientific but more-or-less assumed from a personal interest in the topic of food and sustainability. However, real data would be a little complex as there would be a mix of water, processing, land-use, climate impact figures behind each item. I’d love to see that, however from a usability and learning perspective, I’m pleased with this demonstration.

The Problem

The larger problem is un-sustainability in the way all of us eat. This includes our food choices and also where, how and in what manner we purchase and consume it. The smaller problem is the lack of a food sustainability calculator that encourages experiential learning, and doesn’t feel judgy.

The Challenge

In newswriting, it’s said that you should write for 13 year olds, because that’s the level most of us read at. App use is the same – however probably 13 year olds have an advantage over adults, and aiming for use by a six year old might be better. I started with a much more complex version of this interface – and during the course of developing I realised much of it wasn’t necessary. I trimmed down elements and the core concept became more evident. As the app was simplified, it became more obvious to interact with.

How it Works

The app runs on HTML, CSS and JavaScript. The range sliders for each food are given minimum and maximum values relative to their (supposed) environmental impact.  Those values are multiplied by a food miles factor. The resulting figure is then brought into constrain by a multiplier which controls the width of a div containing representations of earths. Because each earth is a certain size, the number of earths visible can be controlled using javascript. Compatibility The basic elements are styled HTML5 range sliders. There will not be complete browser compatibility but Safari and Chrome are fully working. I aimed for progressive enhancement for other browsers however there will be critical usability issues if the slider thumb icons don’t display.


The interface is simple and visual to allow for a wide range of use. It is styled responsively in that it will be usable on phones and also large computer displays. A dark look gives a spacey feel that sits well with the planet visual reference. The planet pane, with the call to action is fixed to the bottom of the screen, to allow for constant monitoring of the results of tweaking – unless the screen is at a hight that would obscure most of the rest of the app.


Published by


Graphic and web designer based in Brisbane Australia.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s