This was one of the hardest, most intricate and valuable pages of the myflavorprint.com site! How do you explain to someone what FlavorPrint is exactly?
In a nutshell, FlavorPrint is a complex digital algorithm that compiles either users taste preferences or a recipe or product’s flavor markup, and makes recommendations based on that data. While the FlavorPrint mark illustrates this data visually.
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.
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 flavor section – I used jQuery and Ajax to read the FlavorPrint API and pull in the data dynamically to display all 33 flavors, their names, descriptions, and hex values – automating the work! (always a coder’s goal).
From the gallery images in this post, you may have guessed there were a lot of design iterations – and you would be correct! The process was a long one with many stakeholders – initially working in conjunction with our amazing design agency, then with our in-house team, finally landed solely with me. At each point, the goals were reassessed 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.
FlavorPrint flavor page if displayed on McCormick
Very early wireframe interactions and layout designed in partnership with our amazing agency.
This design focused on individual pages for each flavor. Each page contained a descriptive flavor overview, a header with the quintessential image of the flavor, 3 examples of how to taste the flavor in a recipe and call-to-action sections to signup for FlavorPrint.
Flavor Page Hangout Sketchboard
Whiteboarding the layout changes over Hangouts.
Version 2: Science behind our data
In next iterations, the push was to be more robust and scientific in each explanation. The 33 flavor pages would have 9 examples of a recipe or ingredient – in varying intensities. Then each of those would have 2 top flavors, a corresponding FlavorPrint mark and a link out to the recipe. This time the focus would be detailed learning and demonstrating all the data behind that recipe/ingredient.
Unfortunately, the feedback from User Testing was utter confusion. We hadn’t explained what FlavorPrint was. Plus the multitude of examples per page, with inconsistent top flavors, and with no explanation what all this meant – was too overwhelming for any benefit.
Flavor page for Bitter
Expounding and moving away from the agency designs, a more scientific approach to each flavor.
Using recipes and ingredients, each flavor page contained 9 examples – ranging in low to strong flavor intensities. The layout changed to focus on providing an in-depth dive into the FlavorPrint data.
The overall goal of educating the range of each flavor became lost in exploring the recipes and overwhelming visuals focusing on food rather than flavor.
FlavorPrint Flavors Page – Desktop
A combined design of high/medium/low flavor explanation’s of each flavor and recipe flavor markup.
The goal was to connect the flavor to the FlavorPrint. What is the user looking for when they see the top flavors next to a recipe? Or when they view their FlavorPrint mark? This redesign was to attempt to connect the FlavorPrint dots.
Issue: The top flavors displayed below tested to be too confusing for users. For example, what happens when the top flavors below each sample recipe doesn’t include the flavor it’s supposed to explain? That was rectifying in the next designs.
Version 3: Educate in small doses
Taking this into consideration, my final design focused on a one page design that takes the user through an educational journey. I started the path with the overall general concept “What is FlavorPrint exactly?”, then focused down with more details as they moved through the page.
The top portion, explains about FlavorPrint – where does it come from? Why does it look like that? What are these long spikey things? With corresponding graphics and simple descriptions on how we display our data.
Below this is the explanation of each of the 33 flavors. Reiterating the visual cues (hex colors and descriptions), the goal of this section was to explain where/how to taste these flavors.
As for visualizing our data, since the top flavors of a recipe only displays the most intense flavors, the light flavor examples wouldn’t display the flavor in the 2 top flavors. Super confusing! I took them out, and I don’t miss it!
Now the page is more focused on educating on the FlavorPrint mark, the 33 flavors and how to experience them – a more guided user journey!
To easily navigate the flavors in Tablet and Mobile views, the left of each flavor section displays the corresponding color. Anywhere on the page, you’ll know if you are in the Cooling section, or the Licorice section. It’s a long page, so it helps users to not get lost on the page.
FlavorPrint Flavors Page – Desktop Cropped
Why stop with flavor education? Why not use this page as an education on the FlavorPrint mark as well as the flavors that make up a FlavorPrint?
This next design includes the two data points of a FlavorPrint mark – the color (flavor) and the length of the ray (flavor intensity).
Following the FlavorPrint mark overview is an overview of each flavor in a FlavorPrint (33 in all!).
These focus primarily on the flavor’s location on FlavorPrint mark, the flavor color, description and 3 examples of where to find the flavors.
FlavorPrint Flavors Page – Mobile Cropped
Mobile layout for the Flavors/FlavorPrint Mark education page