Can Nutritious Also Be Delicious?
As part of General Assembly's Front-End Web Development course, my final project was Kalefornia Smoothie, a web application that allows users to choose ingredients, "blend" and see a preview of their creation along with a description of it's taste and nutritional value.
Applying design thinking to my love for cooking and nutrition, I used this assignment as an opportunity to playfully explore the parameters between health and taste—could you have both? Can a user maximize nutrition while still enjoying what they eat?
The Problem:
When making smoothies, how might we maximize nutrition and flavor?
The Solution:
A web application that allows users to preview the nutritional value and taste of their blended creations.
How It Works
The main feature allows a user to make their own smoothie.
Approach
This project was intended as an interactive and experimental tool rather than a rigorously researched scientific application. However, it was designed to produce logical results rather than random or generic ones.
Producing the smoothie results meant quantifying variables. I leaned on resources such as ANDI (Aggregate Nutrient Density Index), a way to calculate nutrient density per calorie. To quantify taste I used "bitterness" as a key variable, typically assigning higher values to greens and lower values to fruits. I also aimed to represent realistic smoothie colors based on the combination of selected ingredients.
My research included my own personal insights into nutrition, research on smoothie recipes and user research and feedback.
User Research & Insights
I conducted usability testing with three participants, observing their interactions with a low-fidelity prototype to identify pain points and usability challenges. The most common feedback was that it wasn’t clear how to blend ingredients after adding them. Originally, the design categorized ingredients as ‘solid’ or ‘liquid’ and required at least one liquid before the blend button appeared.
To improve clarity, I updated the design so the blend button and a blender image were visible from the start. I also removed the liquid requirement, making the button activate once three ingredients are added.
Design System
Development
Each ingredient has values associated with it for each of these variables:
- bitterness (taste)
- nutrient density (healthiness)
- color (green, red)
- calories
- bitterness (taste)
- nutrient density (healthiness)
- color (green, red)
- calories
Once the user clicks "blend" an image of a cup and a unique message appears.
Message appears saying "Enjoy your ______, ______ smoothie!"
Message appears saying "Enjoy your ______, ______ smoothie!"
The sum of the values determines the first word, second word and image of the smoothie with a color that actually corresponds to the ingredients.
For example, how taste is determined:
If bitterness value is less than 0, first word is chosen from array of “yucky” words
If bitterness value is equal to 0, first word is chosen from array of “bland” words
If bitterness value is greater than 0, first word is chosen from array of “yummy” words
If bitterness value is less than 0, first word is chosen from array of “yucky” words
If bitterness value is equal to 0, first word is chosen from array of “bland” words
If bitterness value is greater than 0, first word is chosen from array of “yummy” words
For the end result to always be a surprise, each possibility has an array of words that is randomly chosen.
Tools & Skills:
Sketch, InVision, Sublime Text, Adobe Creative Suite, HTML, CSS (Bootstrap), JavaScript, jQuery, Github
Try blending your own creations at Kalefornia Smoothie.
