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

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

Competing Work Analysis #1 – Guardian

This interactive work is hosted at The Guardian in an article called Holiday feasts of the future: how climate change could transform our food – interactive.

It’s actually a reverse of the problem I want to address. Instead of how food affects climate, this looks at how climate change will affect food.


  • Very simple, easy to understand interface.
  • Good representation of interactive elements.


  • Not really interactive in the sense you don’t get to manipulate data.
  • I should be looking for more of a lifestyle calculator.