Iconography: Farm to Figma
In 2009 I was a Kitchen Manager at the Google Cafeteria Pure Ingredient Café. The theme of the café was that everything (vanilla extract, soda syrups, dressings and broths) was made from scratch. Our values included letting people know what was in the food by way of ingredients, health aspects & food allergens. Cooking for google employees introduced me to a whole breadth of dietary restrictions that spanned cultures, beliefs and immune system hypersensitivities.
And boy, did we lean into iconography. The cards themselves were about 3 x 5”, so in order to read them, one did have to pay attention. It was definitely possible for a diner to cruise through the line without looking at a single card, and simply choosing by the actual food on display.
Each dish we put out, from literal soup to nuts, had a typed sign next to it. First, there were color signifiers. Each dish title was color coded based on the food pyramid of health. If the dish was light, the name was colored green, indicating to diners that they could eat as much as they wanted. Red was a warning that the dish was rich and to take small portions if desired. And, obviously, like a traffic light, yellow was in between. This symbolism could also be easily ignored by diners who didn’t wish to use it.
Next, in smaller sans serif font, we’d list each ingredient in the dish so that a very cautious or curious diner would be able to point out exciting additions or potential allergens.
Last but not least were the icons. We had a plethora of icons that signified ingredients in picture form. These icons may not have been used across the span of the cafeterias at the time, but they caught on soon after. The icons themselves were in full color with accents, seemingly taken from a 1990s clip art library.
Most icons were Resemblance icons (direct likeness of the objects they represent). Eggs, fish, cheese.
Many others were Exemplar icons (depict a common example of the class of objects they represent). For example, as shown above, we’d host an array of food examples, a t-bone steak (for anything beef), bean pods (soy), chile pepper (spicy), chicken leg (anything poultry), and shrimp (anything shellfish).
There were even a couple of Symbolic icons (convey a concept at a higher level of abstraction than the object depicted). An example of this would be an icon of a carton to symbolize added cow dairy or butter or the wheat stalk (anything with gluten).
We never used Arbitrary icons (have no relationship to an object or their concept). Luckily, food has such visual representation that it’s easy to avoid the enigmatic symbolic icons.
The labels may have also had signifying words like Vegan, Vegetarian, Gluten Free at the top in small font, I can’t recall. What really stood out were those icons. Oh, and lastly, we had one final failsafe. There were no written labels on the icons, but we had cooks working near the buffet food, ready to answer questions as they came up.
I’ve never looked in my grocery bag and seen a bunch of potential icons. But now, I see things differently now in iconography. The world is my 🦪.
Sources
