The Deficiency Project

The first visual project for my graduate design thesis is this educational, interactive website that informs people about micronutrient deficiencies and whole food sources to combat them. Since the science of micronutrients and the food industry are so complex, I wanted this website to be simple in both structure and functionality. Primarily image-based, the website itself is divided into two main pages—deficiencies and foods—that use the same filter system. **Note: This website was my first attempt at using HTML, CSS, and jQuery to develop a website. Viewing it is best via Google Chrome.

User Problem:
Too often, during my ethnographic research, I discovered that people didn't even understand what "micronutrient" meant let alone that being deficient in certain micronutrients could result in recognizable symptoms. Knowing this, I sought to increase public awareness through interactivity, which is proven method to effectively educate people.

When the user hovers over the logo in the upper left corner, the menu appears. 
Informational pages contain a lot of text to educate users about micronutrient deficiencies. To allow easier and quicker scanning of this information, key statements and phrases are highlighted in attempt to not overwhelm the reader with such a large block of text.  
“Foods” embodies a grid of whole food images that filter according which micronutrient they are good sources of. For example, if a user clicks “Vitamin A” under the “foods” navigation option, only foods that are good sources of Vitamin A will display.
Social Media Pages:
Process:
Site Map.
Early wireframe sketches.
Design iterations.

More Projects

WAV Android
VentureBeat // CMO Council Promo Video
Helpshift // Pitch Deck
The New Franklin Avenue
VentureBeat // User Accounts
Mood Foods Application
MyFitnessPal // Adaptive Screen Design
MyFitnessPal // iOS Sign Up Flow Redesign
Not Your Mom
WAV // iOS Redesign
Back to Top