Project Overview

What is the ‘Recipe Builder’ Tool?
(spoiler: it’s not for cooking)

The function of the Recipe Builder is to aid users in marketing products to their customers by leveraging data related to each customer’s unique interests and purchasing habits. If you’ve ever been shopping online and were presented with a list of recommended products based on your recent searches, it is likely these suggestions were the result of a ‘Recipe’.

Some factors that could be part of a recipe include: products a customer most recently purchased or viewed, product popularity, or simply new product releases.

  • Listrak is a cross-channel marketing tool in the Customer Data Platform (CDP) space that helps companies build and deliver email, SMS and push campaigns. They leverage customer data to tailor content based on each individual’s history and preferences.

  • Our partnership ran between July 2023 and February 2024.

  • I was the lead designer working alongside two other designers and a project manager.

Figure 1. Overview of the Original Recipe Builder Tool

The Problem.

The complexity of the current tool rendered it unusable without the guidance of a Listrak rep. User interviews revealed that reps themselves were unsure of the functionality, choosing to make educated guesses and memorize required steps, limiting their ability to craft strategic content.

The Goal.

Redesign the recipe builder to provide an intuitive workflow that users can independently operate to provide personalized and targeted content to their customers.

Understanding the Impact of the
Recipe Builder

Components of the Predictive Content Ecosystem

Recipes help to determine the products displayed to a customer in emails or online stores through structures called Merchandising Blocks. Below is an example of the relationship between Recipes and Merch Blocks:

Recipe
A recipe is a formula that determines the product displayed in an Item by combining both customer-specific and company-generated data. A recipe ‘formula’ is composed of a base ingredients, general ingredients, and a backup ingredient.

Item
An item is defined by the type of information displayed in a unit relating to a product, and how it’s visually portrayed.

Merchandising Block
A collection of items.

Seeing it in Practice

In Figure 2, I created a hypothetical example to illustrate how this relationship works.

  • This merchandising block uses three recipes to populate products for six items.

  • Item A has three unique elements: name, image, and price.
    It is populated by Recipe 1, which is showing products that the customer recently searched.

  • Recipe 2 is showing products that are new.

  • Recipe 3 is showing products that are recently marked down.

▾ Figure 2.
An illustration of Recipes in a Merch Block

Now that we’re on the same page, let’s dive in.

Issue Identification & Solutions

Issues Identified

After conducting thorough research consisting of a heuristic review, user interviews, and competitive analysis, some key problems were identified:

1 An unintuitive language system.

The terms created for this tool created a barrier to understanding for users.

2 Overwhelming & repetitive options.

Recipe base options were underutilized due to their poor scannability.

3 Undefined order of operations.

Users had no guidance on how to build a recipe, and steps were often missed.

4 Disconnected & dysfunctional features.

Users could not decipher the impact of their inputs on the final recipe, limiting their strategic capabilities.

Issue 1

An Unintuitive Language System

Overview

Listrak developed a unique language for this tool that did not exist elsewhere within the product or the market. During user interviews it became clear this created confusion for both customers and Listrak employees.

Solution

While honouring the client’s desire to retain some of the original language, more intuitive and familiar terminology was strategically substituted.

Note: These revised terms will be used moving forward.

Recipe Base

Prev. Base Ingredient
The recipe base actually pulls a list of products.

Filter

Prev. General Ingredient
The criteria which filters down number of products determined by the base ingredient.

Backup Recipe

Prev. Backup Ingredient
A recipe that is used if the number of resulting products from the previously defined recipe (Recipe Base + Filters) are insufficient.

Issue 2

Overwhelming & Repetitive Options

Overview

Listrak had compiled an exhaustive list of Recipe Bases for every combination of available data points. This led to confusion for users trying to identify the single best starting point for their needs — like searching for a needle in a haystack.

Solution

My solution was twofold:

Step One was to identify the key themes across all recipe bases, which allowed the consolidation of options into a much more easily scannable list. 

Step 2 was to guide the user in selecting any additional data points relevant to that theme. Small variations of the previous options were turned into settings that could be selected by the user to create their ideal Recipe Base. All the original options are still available, but now the user is now able to quickly select the option that best meets their needs and customize efficiently.

Figure 3. Consolidation of Recipe Bases

Issue 3

Undefined Order of Operations

Overview

The way Listrak designed the recipe builder required previous working knowledge in order to use it effectively. There was no logical flow in the sequence of mandatory steps, or cues to help point the user in the right direction. This left users reliant on Listrak account managers who in turn relied on the developers managing the tool.

Figure 4. The Original Recipe Builder

Solution

To correct this, I designed the builder to guide users through a single logical flow. I removed page tabs to avoid the chance of users missing important steps, placing all information in sequence working intuitively from top to bottom. Each step is accompanied by clear and concise instruction, offering explanation on the impact of each input. Additional affordances were added to better label and identify the recipe, to introduce the ability for users to sort, search and organize their recipe library.

Figure 5. Redesigned Recipe Builder: Zero State (top) & Populated (bottom)

Issue 4

Disconnected & Dysfunctional Features

Part A. Filter Prioritization

Overview

Previously, when a filter was added the user would be presented with a slider affordance, the “importance slider”, where they could affect the level of impact that each filter would have on the recipe. The slider was intentionally built without reference to scale as there is no way to unitize an incremental change of a filter on the algorithm. As the user moved the slider the list of products would change in the Preview Panel, without explanation of how or why. All of the above made this an unpredictable and illogical control, forcing users to make trial and error adjustments with each additional filter. 

Figure 6.
Listrak’s existing Importance Slider

Solution

I removed the slider entirely and chose to replace it with a Drag & Drop affordance, consistent with other redesigned areas of the product. Users are instructed to order each filter by its level of importance, where filters at the top are prioritized over filters at the bottom. 

Video 1.
Redesigned Flow — Adding a Filter

If the user wants to ensure every product in the recipe pool meets a particular filter criteria, they can check “Match this filter” in the Add a Filter modal. This filter is labelled “Match 100%”, automatically bumped to the top of the list, and its drag affordance is disabled. There is no limit to how many filters can be defined as “Match 100%”, however the more strict the filters the smaller the product pool will become. The result of these changes is to allow users to intuitively understand the impact filter settings and prioritization have on the resulting recipe pool.

Figure 7.
“Match this Filter” function

Part B. Connecting the Preview Panel

Overview

The preview panel indicates the success of a recipe, in relation to a randomly generated reference product. As users add filters and adjust the recipe, products that meet the criteria populate in the panel. Listrak used stoplight colours in an effort to convey how close a match each product was to the recipe (see Figure 8), but there was no indication to the user if the recipe was good enough, or any explanation on how to improve.

Figure 8.
Listrak’s existing Preview Panel

Solution

The redesigned panel solves the above issues by offering the following:

  • Recipe Score: evaluates recipe performance, and predicts the output users can expect to see

  • View Insights link: educates users on how to make improvements 

  • Recipe Summary: outlines the recipe components in plain language

  • Preview: users can choose to change the reference product and view the product pool results with or without the backup recipe

  • Tiered results indicate how strongly matched products are with the recipe criteria

Video 2.
Redesigned Preview Panel

Putting the Pieces Together

Final Solution in Wireframe

Takeaways.

Tools help to solve complex problems, but often we see the complexity of the problem mirrored in the tool itself. If a tool is not reasonably accessible to the target user, the problem has not been solved. It may be necessary to hide some of the ‘magic’ (or, a programming algorithm) behind the proverbial curtain.   

It is common with innovative tools that developers or product owners are protective of their work, and therefore resistant to change. It is a fundamental responsibility of the product designer to align all stakeholders in the goal of putting the needs of the end user first. This will in turn help to justify the adequate time and resources required to succeed.

Next Steps.

Listrak has been managing a brand refresh over the duration of our contract, so all designs were submitted as the high-fidelity wireframes presented in this case study. Final branding will be implemented after additional testing, and we will QA as the dev team begins to build.

View Next

Conditional Logic:
Tailored Campaign Content

Efficiently craft campaign content customized to each unique recipient using conditional logic.

Job Advertising Platform:
All-In-One Software

Expertly manage and customize job postings in-house for all desired employment types.

Social Messaging App:
Patented Notification Technology

In urgent situations always remain in communication with friends and loved ones by bypassing their do-not-disturb settings.