The design of the interface was one of the main challenges due to the small size screen. The context of use played an important role as well, supermarkets are not ideal place where to read on-screen information.

The main part of the interface is represented by the on-screen labels displaying the value of the analyzed products.

Final design: viewfinder mode

In defining the interface elements and details I received fundamental help from two designers: Francesco Gioia and Maurizio Schifano.

Francesco helped me in defining the best typography for the specific context. To improve readability on the small screen a pixel font was consider the best solution.
The chosen typeface for menus is V5 Loxica, a font that, despite the small size, has a nice design. It allows good readability and characterizes the application look.

Typography test

Maurizio helped me in defining colours shades and some layout details.
FoodTracer color coding system is inspired by Food Standard Agency Traffic light labeling. It is based on the use of 3 colors (green, amber and red) to tell at a glance if the product is good, in the average or bad referring to the chosen parameter. Food Standard Agency Traffic light labeling is used on various products packaging since 2007 and was demonstrated to be efficient by independent researches. This choice gives the benefits of using a standardized system users are already familiar with.

The on-screen labels were designed to bind with products packaging, making clear which product the information is referred to. The labels overly the product image on the screen, leaving enough space to recognize the selected product.

Final design: details mode

The symbols representing the 5 variables were designed starting from standard symbols used in food industry, with the help of Francesco and Maurizio, the symbols were optimized to fit the small screen interface.

early sketches

Final design: menu interface