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