nutrition and allergen graphic

nutrition and allergen pages

hot head burritos

problem

The Nutrition Calculator was hard-coded and involved a lot of spreadsheet work to get updated information or new products into the file. It was also very inflexible when it came to introducing new products and portions, and was an involved process that took too much time.

research

I looked into what would make future updates easier. Messing with a bunch of spreadsheets and updating a JavaScript file every time something changes would be a nightmare for anyone, but updating a single row in a database could be done quickly and easily.

process

For each "style" of food, portions can vary – people who get a burrito expect more of each item in it than if they had gotten a taco – so calculating the right portions for each style was the main focus. After getting the code right, the Nutrition Calculator page itself got a slight refresh.

Click on images to scroll through full sizes.

new nutrition page old nutrition page new allergen page old allergen page

solution

I created a database of the manufacturer's nutrition and allergen information. The calculator pulls the information directly from the database, and the information updates on the page as soon as the database is changed. The Allergen Chart went from a PDF that had to be manually updated, saved out, and uploaded to a chart that changes as soon as the information is available in the database and can be printed directly from the page.