Nutrition Modal

Design: 1 week

Designed a new modal to display nutrition information. Kept it flexible enough to support a variety of different nutritional information display needs while maintaining a clear visual hierarchy.

Problem Statement

Nutritional information is an import pice of the decision-making process for people who have dietary restrictions or are targeting a specific amount of macronutrients. As such, allowing users to get nutritional information that they are concerned about is a necessity for fast casual restaurants like eatsa.

Since eatsa pivoted to enterprise business and began licensing our technology to other restaurant chains, we also wanted to make sure our design is flexible enough to meet the display requirements of our customers.

Concept

When researching nutrition fact designs, I was inspired by the common FDA nutrition facts label. Using a similar design should reduce cognitive load for users since they have some familiarity with it.

To make sure the final design could handle the most complex case, I started with the most complex nutrition facts modal with all fields present.

Another difficulty was around the varying length of description. Stepping back to review all of the components, I realized that users had already seen the picture of the food by the time they got to this modal. Therefore, when the description overflows, it should cut off the bottom of the image.

Final Design

In the final design, I redesigned the FDA label to have stronger informational hierachy while maintaining the visual similarity. Key information like allergens are highlighted in orange.

Thanks to the flexible image size, this design is highly reusable for both dishes with long descriptions and ingredients with no descriptions.

One last direction this design need to flex in was for items with no nutrition facts. This is handled by hiding the nutrition facts section and centering every other component.