How do you explain to someone what FlavorPrint is, in an intricate and valuable way?

The FlavorPrint Service is a complex digital algorithm that compiles a user’s taste preferences for a recipe or product’s flavor, then uses that data to makes recommendations. This personalized data is visualized as a personalized FlavorPrint mark.  As we explored the customer facing product, it became abundantly clear early on that this was incredibly confusing to the user – a sort of “education” page was necessary.

Several steps were necessary in creating/designing/developing this page.

Coding:

For one, it had to work with the preexisting site code – C#, and the current CSS stylings. As anyone who works in legacy code knows, this is never an easy task. To ensure framework quality and in conjunction with the pre-existing framework, I adapted and integrated Bootstrap to maintain the general layout of the page.

Additionally, for the “Jump to” section and each individual flavor section, I dynamically pulled data from the FlavorPrint API using jQuery and Ajax, automating the render (always a coder’s goal). The API contained data to for all 33 flavors, their names, descriptions, and hex values.

Design:

The process was a long one with many stakeholders and several iterations. Initial concepts were developed in conjunction with a design agency, then subsequent iterations and the final concept evolution landed solely with me. At each point, the goals were reassessed with user feedback and repurposed into new designs.

Version 1: The Details are in the 33 Flavors

Initially, working with an amazing agency, the goal of the education pages was to inform the user of the 33 FlavorPrint flavors and their relationship to recipes and ingredients. Each of the flavors would to have it’s own page with 3 examples of it in a recipe – spanning from weak to strong flavor intensities.