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
Problem and Solution
With the overwhelming number of food options in the grocery store, it is difficult to compare similar products and choose the appropriate one. Nutrition labels help make those decisions easier, but only if the shopper understands how to read them.
I designed and developed this short eLearning tab interaction to help users understand how to read a nutrition label. The interactive label gives users an easy way to identify the different sections and their meanings, along with providing simple definitions and tips for users to help them when purchasing their own food.
Process
Storyboarding
Drawing from the FDA’s website on how to read a nutrition label, 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.
I also provided the link to the FDA’s article on the nutrition label for users to delve deeper into the information, if needed.
Visual Mockups
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 of a grocery store shelf 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.
I created this label using a vector graphic, changing the colors and font to fit my project. I chose different colors for each section of the label so users could easily distinguish the four parts.
Feedback given on the visual design included a suggestion to include a colored bar on each tab to keep the project consistent. I included an interesting fact on each of these colored bars to break up the text and provide a helpful and practical takeaway.
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 outlined in a darker shade of the corresponding color. This visual cue lets users know which section they are currently viewing.
Takeaways
Knowing that this project could be accessed on multiple types of devices, from desktops to mobile phones, I was careful to use large touch targets and display the information in a large, easy to read manner.
As nutrition labels are found all over food products in grocery stores and homes, this project challenged me to present these labels in a visually appealing manner that would actually help users make better decisions, rather than overload them with unnecessary information.