Yummly Nutrition Search

Summary

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.

My Role

Deliverables


The Design Process

Framework & Interaction Design

To plan out the framework and interactions, I created user flows and created low-fidelity wireframes.

nutritionsearch_wireframes

User Interface Design

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.

nutritionsearch_UIkit

The Development

The Process

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.

Technologies used

Final Web App

Want to see the project? View my code on Github.

Try the App



Interested in working together?

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

Other Work

Wearable heart health device and app concept.

View Case Study

Search-based playlist generator using Echonest and Spotify's API.

View Case Study