Dynamic Content
Klaviyo / Product design
I redesigned how marketers find and configure dynamic data, then see it in their messages.
Personalization was hiding in code
A first name, an abandoned-cart item, or a fallback greeting could make an email more relevant. But in the classic editor, those values appeared as template code. Customers worried that changing it would break their message, and some avoided adapting templates to their own brand.
The problem extended beyond the canvas. Customers could miss that a subject line or button label supported personalization at all. Setting a fallback or formatting a value often meant leaving the editor to find help documentation.
My response covered both discovery and configuration. I worked on entry points in the fields customers were editing, then on an insertion flow that explained the selected value, its formatting, and what to show when data was missing.
Make the choices visible
We looked at email editors and tools such as HubSpot and Airtable to understand how people browse data and anticipate what it will do. Categories organized the catalog. Examples and fallback explanations showed what a selected value would do.
I explored the insertion flow, category navigation, configuration, and how a selected value would appear in a message. We worked with Product stakeholders to separate the initial release from later improvements.
A filter people could see
Our hypothesis was that keeping category filters visible would help both new customers learning what was possible and experienced customers finding a specific value. We tested two Figma prototypes: one with pill filters, another with dropdowns.
Customers preferred the pill filters. We proposed them as a new Design System component, while keeping an MVP path that used existing controls.
Testing also helped us reduce noise. A description added little to a familiar item such as First Name, but was useful for less familiar data from sources such as Shopify. Recommendations needed their own visual treatment to stand apart from the rest of the list.
From discovery to a readable message
Show where personalization is possible
I brought the entry point into supported fields so customers could find personalization while writing a subject line or message. A bolt appears when the field receives focus. First-use guidance introduces the feature when someone inserts or interacts with dynamic content.
Recommend data in context
The picker uses the field, commonly used data, and the message’s goal to recommend relevant items. Search and category filters let customers find something else.
Configure before inserting
Customers worried that changing defaults could break their content. I made fallback configuration an explicit step before insertion, with an explanation of what happens when data is missing. Other controls handle formatting and the details of a particular value, such as which item to choose from an abandoned cart.
Configuring dynamic content
Compare the configuration controls and their context.
Set the text to use when a value is missing.
Choose the item or property the message needs.
Adjust how the selected value is presented.
Start with pre-approved text for specific links.
Replace code with a value people can recognize
After insertion, a visual tag names the data in the field. Customers can inspect it for details or select it to change the configuration. The tag also needs to reflect styling when it sits inside formatted email text.
Keep the direction, make room for an MVP
The preferred pill filter was not yet in the Design System. I worked with that team to guide its implementation and provided an alternative using the components already available. That gave the team a path forward without making the first release depend on a new component.
View the full filter specification ↗ · View the full configuration specification ↗
More confidence working with personalization
The readable values helped customers understand what a name or product reference would do in their message. Fallback controls also made missing data part of the setup, so customers could decide what a recipient would see when that data wasn’t available.
That made reviewing messages and revisiting existing templates easier. Customers could discover and try personalization without the same fear that a missed bracket would send broken code to their audience.
Research and early explorations
Later picker work · 2023
The 2023 picker project began with a support baseline of more than 200 tickets a month.
