Nutrition Recommender

 
 

2019

Nutrition Recommender

Our initial version for the nutrition recommender required a simple interface as the product it was replacing was over 10 years old in age and style. Working with our data scientists and health experts, our team was able to create a well-formatted flow that gave the user the freedom to determine how personalized their results would be based on how deep they chose to dive.

 
 
 

Slim Header + Navigation

A slim header navigation was created to keep the user focused on the task without the many other options our global navigation offers. In-page survey navigation allows the user to toggle back and forth from question to question, start over, and track their progress with the interactive bar.

Imagery Options

With the format finalized, it was time to add some visual interest. As much as I love a simple black and white type composition, this wasn’t quite there and definitely would not draw interest from guests and customers. We went through two of our established brand visuals: tonal color treatment and ingredient photography leaving space for content.

Results Page

Based on the users answers, the nutrition recommender works it’s magic on a fun “reward page” full of hand-drawn illustrations for the personal touch. Products are divided into category carousels to allow Amway to display many options without seeming initially overwhelming to the guest (hopefully customer).

 
 
iPhone X mockup hover seperated.png
IMG_5924.png
NutritionRecommender-03.png
NutritionRecommender-01.png
NutritionRecommender-04.png
NutritionRecommender-02.png
 
 
 

Loading Animation

Although our sorting technology is able to determine results almost instantly, the “formulating your results” gives a personal touch to the experience giving the user a sense of uniqueness. Since our guest has went through the effort of answering a chain of questions, we should pay them back with the same amount of effort on our end.

 
NutritionRecommender_Loading.gif