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.

Interface Development – User Experience Thoughts and Final Decisions.

Instructions are back.

My partner attempted to use the visual-only version of the app and I found myself jumping in to explain exactly what was happening. So some basic interface instructions are necessary. So much for my highest honour.

Still no plate.

I still think it’s good that the plate is absent from the final version. What it could potentially add for cognitive affordance would be negated by the frustration a cluttered interface.

The earths output are necessary pinned to the bottom which leaves just enough for interactivity. If a plate were to be included it would need to be fixed on the screen also – which would be awkward as it’s a square shape. It might be possible to reorganise things similarly to how they were in the original mockup, however I don’t think this will work well on tablet displays – a key way this app would be used.

New affordances…

The food miles slider is slightly separate from the rest and stretches 100% while the others don’t at most screen sizes. This demonstrates it’s overarching influence.

The slider bars have a more pronounced cool to warm hue, giving the indication that left to right means less to more. Coupled with the knob icons initiating at the left, it will be immediately or momentarily clear how you interact.

Possible Questions

Is a dark background the best? As well as agreeing with my personal aesthetic, it’s a suitable background for the planet, and lends to visual popping for the other icons.

The Foodprint GuideThe app is fully responsive, the food sliders moving from one to three columns depending on the screen width. The size of elements also adjust to suit. Try it.

Now I just need to include my call to action. It will likely be a link in the sentence above the earths.

Thought: I’d like to make a spinning earth gif. Maybe bobbing up and down. It would be awesome if they would do it at different timing intervals. Hmmm.

Darker & Brighter

I brought the backgrounds down a knotch as well as brightening the icons. It all looks much clearer.

The Foodprint Guide

Interface Development : Simplifying

I’ve decided to do away with the plate element. Not just because I won’t have to build it, but also because it complicates the app. I believe it’s much more fun to see how the sustainability reacts to your food choices directly, via the number of earths needed to sustain a lifestyle.

Removing labels is also possible because of the visual representations. I believe this app is self-explanatory, which to me is the highest honour of interface design. The more simple the app, the more possible that is.

I’ve got the maths working, although it’s very simplified and dummified. I’m now working on refining the interface, by uncluttering adding width-responsiveness.

If time permits I will add more ingredients to the mix. The maths is very disoraganised and the variables need constant tweaking to look reasonable on output.

Screen Shot 2015-05-14 at 2.38.33 pm Screen Shot 2015-05-14 at 2.36.31 pm

Interface Development #2 – Javascript woes

Yes, of course, I am having javascript woes, as javascript is a programming language and i am a designer.

I can do this after some effort – however the process of discovering the rules takes time. Currently, I’m trying to get my head around using event functions to do stuff, declaring variables, then using those variables in other places outside the original function. can I have an event handler without a specific function?

How the hell would I even find that out?


I’m quite pleased I have got the output of the siders displayed in the results. I’ve even multiplied them with by a factor of ‘evilness’. This is all happening from within the individual functions associated with each slider event.

But to go further and incoroprate the miles factor, I have to do a maths operation on  these outputs together. Then I can  arrive at a global figure of total evilness.

Successfully displayed output
Successfully displayed output

Arrrrgh. Tutor comment!

Interface Development #1

I’ve started building what will be my Foodprint Guide.

Styling the sliders was done with pure CSS and was not too difficult.

Currently I’m just trying to get an event handler to recognise the range slider amounts and output a corresponding value on the page. Besides some jquery maths that will interpret those numbers, that will be the hardest learning done.

Here’s how it looks – it will be changed. I’m going to keep the maths visible, perhaps in one version, to be transparent about what’s going on and keep the logic traceable. It should add an element of fun to an otherwise very simple app too.

Starting with the contingency plan

My app includes three basic elements – choosing food amounts, seeing those amounts appear on a plate, and seeing how many earths would be needed if we all ate that.

There is one step in this process which is not strictly needed. The plate. It is mainly a visual confirmation to see what a meal looks like. While the data for the plate will be necessary, the visual representation isn’t. It won’t be very hard to build (I have a plan to use css size values on various ingredients), but nevertheless I’ll leave it to last.

After getting the range inputs outputting to javascript, I’ll work on getting the basic maths working. It’ll work like this:

  • inputs from food sliders given multipliers. These numbers control the size of food sprites on the plate.
    • Brocolli: 2; steak: 10;
  • total figure from food sliders multiplied by foodmiles.
    • foodmiles: minimum doesn’t multiply food slider values. Maximum multiplies them by five.
  • the resulting impact figure used to calculate an integer used to control the css width of a div containing the earths in a row (not vertical, as previously shown.

It would look something like this: ((foods * food-impacts) * foodmiles) = total impact.

State of the UI

Screen Shot 2015-05-13 at 10.18.57 pm

Design Solution Overview

Project Name

This is going to be called The Foodprint Guide. It’s straightforward and sounds less intimidating than ‘calculator.’ “Guide” invokes a friendly but educational feeling. Looking at the competing works, this is needed.

Project Justification

There is a lack of climate/lifestyle calculators that offer realtime input of variables with realtime output of results. While they all do the job, they only tell you how you’re doing and don’t let you learn by experimentation.

Project Aims

This will be a simple interface with a few sliders which allow people to experiment with one plate of food. The results will be symbolic more than exact and will allow people instant recognition of what foods affect sustainability the most.

As such it will be completely different. It won’t take the serious concentration involved in completing a survey and recalling what you eat (I found this harder than expected). Yet it will teach you immediately what foods do.

It will also not judge. We all suck for the climate, it’s a matter of degree. The Foodprint Guide,  In not reflecting on our actual food habits, and working in hypotheticals, allows the user to participate impersonally – yet take away knowledge that will empower them to understand the choices regarding food.


I would like this interface to be usable by anyone. I don’t believe adults really want to put the effort into using things “designed for adults.” It will be a casual affair.

The concept will revolve around what food goes on a plate – so this is a western bias culturally. However all it’s really showing is a bunch of ingredients, so the learning will be just as evident for anyone. So there will be little informational bias as we all eat similar food.

I’ll present it in neutral, but flat and bright aesthetics. These new stylings are useful because kids appreciate colour, young adults appreciate the kitschiness, and older people appreciate the hat-tip to retro graphical style.


There will be no screen to screen progression in this app. The beauty of this learning tool will be constant experimental interaction with a set of on-screen variables.

On the first sketch of the interface, I encountered many things that needed to be refined (of course). I also realised I need to account for food miles along with food types.


After this sketch, I realised that it needs to be simplified a fair bit. It needed to be more self explanatory. Here’s a second try.


Finally, before getting into more detail with a mockup – I realised I needed to fine tune and explain the interaction. Everything happens on one page, and there is no ‘end’ or ‘result’ (to encourage experimentation), but nonetheless, here’s a simple storyboard showing the workings in detail.



I did though forget to include the “foodmiles” slider in the mockups. It will be another slider but in a larger scale, perhaps above all the others to indicate its significance.

UI Design Mockup



Interaction Design – Submission 1 Overview of Posts

Introduction to the Problem

Competing Works Analysis

UI Design Trends Analysis

Introduction do my Design Solution

The Problem: Climate Change and Food

I became aware of the link between climate change and food in 2007 and actually became vegan when I realised there was effectively nothing else I could do.

I’ll point to some recent research by the UNEP (UN Environmental Program) which talks about this specifically. This link is to a guardian article which explains the issue in specifics.

It has been known to environmentalists and policy makers but rarely talked about in those terms – it’s always thought of as something impossible to change. Talking about it is difficult as people feel their lifestyles are under attack. And vegans annoy everyone because they are super talented at making people feel like second class humans.

Therein lies the problem to be solved – informing people in such a way that they are empowered rather than disheartened or worse, annoyed – which could easily have the opposite effect as intended.

Folks need to be aware of the vast middle ground where small steps are helpful. This needs to happen in a non-jedgemental way. The best way to inform people I think is to let them play with the variables, and see the differences themselves.

This is what I intend to achieve and I’ll firstly look at competing works to see if and how they’re doing it.

Competing Work Analysis #2 – WWF Footprint Caclulator

This is a basic lifestyle-footprint calcultor that includes food. By the facebook comments, it gives importance to this variable.

However it feels a bit inefficnent with regards to bandwidth. Clicking on the interactive elements is also unpredictably difficult.

Although it’s simple and clear, the visual style is plain and fugly.


  • Novelty of choosing personal characteristics seems out of place. Doesn’t seem geared to kids.
  • Feedback on lifestyle choices withheld to after input on variables. Changing variables gives a non-immediate response which is poorly explained and not conducive to understanding.
  • Old technology Made in flash. Extremely slow loading.
  • Poor (absent) visual style


  • Fairly simple, intuitive questions. Seems well thought out.
  • Clearly tells how many earth’s we’d need if everyone lived like me.
  • Give hints at lifestyle changes.

Screen Shot 2015-04-02 at 5.08.20 pm