The Nutrition Search is a simple search app that allows users to search Yummly’s vast database of recipes based on specific nutritional attributes, such as calorie content, fiber, protein, saturated fat, trans fat, and cholesterol levels.
To plan out the framework and interactions, I created user flows and created low-fidelity wireframes.
For the user interface design, I kept it simple by using primarily graphics of healthy foods as the main source of color and inspiration for the website and using overlays and white text over the images.
Since Yummly already has a vast database of recipes with a great amount of information on nutritional attributes of each recipe (i.e. amount of trans fats rather than ingredients), I wanted to focus on creating a simple search that allows users to gather a list of Yummly recipes based on nutritional values that they enter in. After coding up the HTML for the main content, CSS for the UI (using Sass), and jQuery for basic interactions, I built the simple app using Angular.JS. I used Yummly's API to pull recipes based on user search and nutritional criteria, and Angular.JS made it incredibly easy to populate the page with a list of matches without having to append additional HTML with each return of data.
Want to see the project? View my code on Github.Try the App
I'm currently unavailable to take on new projects, but I'd still love to chat. If you have any projects or apps that needs some design love, I'd be happy to discuss with you about how I can help given my availability or refer you to other designers.Let's Get In Touch