Visualizing products as fingerprints
Research, UX Design, Visual Design, Sketching, Prototyping, Development
A Visualization Fingerprint: Comparing Nutrient Data Visually is a workshop paper about how products can be represented as fingerprints.
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.
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
With the problem in mind, we considered three main design factors:
- Represent nutritional data in an attractive manner, easily viewable and browsable on a mobile phone
- Able to easily compare nutritional data between food items at a glance
- 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
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.
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.
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.
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.
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
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
Over 100 people saw my presentation and viewed by poster.
- The team created a workshop paper and I created a presentation slide deck for the IEEE VIS Personal Visualization: Exploring Data in Everyday Life workshop in October 2015
- I also submitted a poster to the Canadian Celebration of Women in Computer Science in January 2016
- Behance highlight
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.
For the prototype: Eclipse, Java, and Processing
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!