How to Understand Food Labels
Understanding a Nutrition Label
Overview
This eLearning tab interaction helps people read a nutrition label. Through interacting with each of the four color-coded sections, users learn how to interpret nutrition labels and make more informed decisions when grocery shopping.
Audience: People who shop for groceries and want to make more informed food purchases
Responsibilities: Instructional Design, eLearning Development, Graphic Design
Tools Used: Articulate Storyline, Adobe XD
Text-based Storyboard
I wrote out the text for the project. Adapting the most important information for each section, I wrote short, easily digestible points for each section. I focused on the most important aspect of each section as users only need to know the highlights in order to make better decisions at the grocery store.
Visual Mock-ups
After finalizing the storyboard, I created a mockup in Adobe XD to show each slide layer. I created several mockups, experimenting with different colors and visual styles.
I decided to use various shades of green behind the nutrition label and on the title screen to subtly indicate to the user that this experience would help them make healthier food choices. The tinted background photo helped tie the different section colors together and also hint to the user that this information would be used to make decisions in the grocery store.
Development
The development of this project went relatively rapidly as I was able to take direction from my previous projects in Articulate Storyline on how to create seamless interactive slide layers.
I started by creating the base layer title screen in a similar format to the different slide layers to keep the design language consistent. I color-coded the nutrition label to indicate that each section was clickable. When the user hovers over and selects a section, that section is recolored. This visual cue lets users know which section they are currently viewing.