Visualizing products as fingerprints

Created using Pixeden’s Modern PSD Responsive Showcase Template

Services

Research, UX Design, Visual Design, Sketching, Prototyping, Development

Summary

A Visualization Fingerprint: Comparing Nutrient Data Visually is a workshop paper about how products can be represented as fingerprints.

The Team

Dr. Sheelagh Carpendale was my supervisor, Ricky Pusch was my coding mentor and key author for the workshop paper, and Dr. Samuel Huron contributed and initiated the idea to do a workshop paper.

My role was to design the interface, develop a prototype, and write the initial drafts for the paper. My team was integral in making this project come alive.

This project had many stages and spanned a over few years. Prototype created in summer 2013, paper written in summer 2015, workshop attended in fall 2015, poster created and attended in winter 2016.

The Problem

Dr. Carpendale wanted to help people make better informed decisions about their diet. We problem context is a consumer shopping in a store, wanting to compare two products found on a shelf. Currently, data in the Nutrition Facts Panel is presented inconsistently between products which makes comparison difficult and time-consuming.

Skip to prototype explanation and click here
Skip to the outcomes and click here

The Journey

With the problem in mind, we considered three main design factors:

  1. Represent nutritional data in an attractive manner, easily viewable and browsable on a mobile phone
  2. Able to easily compare nutritional data between food items at a glance
  3. Help consumers select food items with the nutritional data that best meets their current goals

Existing visualizations fail

We visualized two multivitamins to display the product’s name, the nutrient’s name, and the amount using the same measurement unit.

Simply plotting this data in double bar charts presents several issues:

  • At a glance, you can’t conclude how the data sets compare as a whole
  • On small screens, there are readability issues, even on landscape mode
  • It is difficult to perceive minor difference in values
The vertical axis in this chart uses a logarithmic scale

Sketching curved lines

When viewing bar charts on portrait mode, we noticed that curving the bars allows for additional length. These curves resembled a fingerprint, enabling us to distinctly identify products.

I sketched potential visualizations based on existing graphs, infographics, and visualizations. The final sketches were inspired by the Social Media in Business infographic by istrategy.

When the design was finalized, I worked on the prototype with Ricky, by utilizing a B-spline curve algorithm he developed. We modified the number of B-spline control points and their coordinates until it resembled a human fingerprint.

Varying the B-spline properties changes the fingerprint’s overall shape

Initial designs had promise

One proposed design represented multivitamins as its own complete fingerprint. Nutrients mapped to one curved, and the arc’s length represented the nutrient’s proportion to the multivitamin’s maximum value.

When the multivitamins had similar ratios, it is difficult to compare two fingerprints side-by-side. We needed to compress and fit it on two screens, or on half of one screen. This leads to minimal conclusions when viewing at-a-glance.

Comparing two Fingerprints

Another design (sketch C) combined the Fingerprint into one entity by alternating the nutrient curves and moving it outwards. This single fingerprint has twice as many curves as nutrients, making it hard to directly compare as the curves are different sizes.

Sketch C had some promise

The Solution

After several attempts, we created a Fingerprint prototype and enabled easy comparisons by utilizing negative space. These are the instructions on how to read the visualization:

  • Each vertical side represents the nutritional data for a food item
  • The arcs from inside to outside correspond to the data set from top to bottom
  • Each arc represents a single nutrient, and a full arc indicates a higher value
  • Selecting an arc provides more information, such as the nutrient’s name and amount in each food item
The Fingerprint prototype

This design offered several benefits:

  • Maximizes screen real estate by compacting information
  • Obtain an at-a-glance summary of a product’s values with its identifiable half-fingerprints
  • Leverages our ability to quickly notice differences in symmetry to compare products at a high or low level of detail

The Outcomes

Over 100 people saw my presentation and viewed by poster.

The Fingerprint poster

The Learnings

The design and workshop took many iterations. Although the Fingerprint is still a prototype, it is a step in the right direction for making product comparisons easier.

It would also be interesting to explore different interactions and visualization designs, as curved lines present difficulty in reading accurate numbers.

The Tools

For the prototype: Eclipse, Java, and Processing

For the workshop paper: LaTeX; teammates Sheelagh Carpendale, Ricky Pusch, and Samuel Huron; feedback from David Ledo, Riane Vardeleon, Brennan Jones, Richard Tang, and Mike Clark

For the poster: Adobe Illustrator, and feedback from Rob Furr, Brennan Jones, Fateme Rajabiyazdi, David Ledo, and Bon Adriel.


Have any suggestions or constructive criticism? Please comment below! I am always looking for ways to do better.


If you liked what you read or learned something new, support with 👏, spread the 💙 or follow me!

If my background, experience, and skills interest you, please get in touch!