Dynamic Content
Klaviyo's Email Builder Feature
OVERVIEW
One of the main advantages of Klaviyo as a messaging platform is its ability to include message content that can be customized for each individual recipient, even when working at scale.
While many templates include recommended dynamic content, it is often presented as pieces of code between "{ }" symbols.
This project aimed to redesign how dynamic content is inserted and presented across the platform, with an emphasis on usability and extending to a wide range of use cases.
OVERVIEW
One of the main advantages of Klaviyo as a messaging platform is its ability to include message content that can be customized for each individual recipient, even when working at scale.
While many templates include recommended dynamic content, it is often presented as pieces of code between "{ }" symbols.
This project aimed to redesign how dynamic content is inserted and presented across the platform, with an emphasis on usability and extending to a wide range of use cases.
OVERVIEW
One of the main advantages of Klaviyo as a messaging platform is its ability to include message content that can be customized for each individual recipient, even when working at scale.
While many templates include recommended dynamic content, it is often presented as pieces of code between "{ }" symbols.
This project aimed to redesign how dynamic content is inserted and presented across the platform, with an emphasis on usability and extending to a wide range of use cases.
OVERVIEW
One of the main advantages of Klaviyo as a messaging platform is its ability to include message content that can be customized for each individual recipient, even when working at scale.
While many templates include recommended dynamic content, it is often presented as pieces of code between "{ }" symbols.
This project aimed to redesign how dynamic content is inserted and presented across the platform, with an emphasis on usability and extending to a wide range of use cases.
ABOUT
Web email builder feature
ABOUT
Web email builder feature
ABOUT
Web email builder feature
ABOUT
Web email builder feature
ROLE
User Experience, User Interface
ROLE
User Experience, User Interface
ROLE
User Experience, User Interface
ROLE
User Experience, User Interface
TEAM
Product • Juan Castaño, Corrine Lin
Design • Gui Schmitt
Engineering • Lindsey Curran, Nikita Shenkman, Daniel Kezerashvili
TEAM
Product • Juan Castaño, Corrine Lin
Design • Gui Schmitt
Engineering • Lindsey Curran, Nikita Shenkman, Daniel Kezerashvili
TEAM
Product • Juan Castaño, Corrine Lin
Design • Gui Schmitt
Engineering • Lindsey Curran, Nikita Shenkman, Daniel Kezerashvili
TEAM
Product • Juan Castaño, Corrine Lin
Design • Gui Schmitt
Engineering • Lindsey Curran, Nikita Shenkman, Daniel Kezerashvili
THE PROBLEM
THE PROBLEM
THE PROBLEM
THE PROBLEM
Code-centric approach was hard to understand and inhibited creativity
Code-centric approach was hard to understand and inhibited creativity
Code-centric approach was hard to understand and inhibited creativity
Code-centric approach was hard to understand and inhibited creativity
The classic editor used special snippets of code in brackets (like {{ first_name }} ) that rendered dynamic content on send.
While technically inclined users were OK handling code, we got insights from research that most users had difficulty understanding what each piece of code meant and were uncomfortable using it.
Fearing they would "mess things up" or “break it”, users were less inclined to modify our templates to express their brand.
Some of our most popular templates, like abandoned cart emails, had a considerable amount of the message showing as code on the email builder.
The classic editor used special snippets of code in brackets (like {{ first_name }} ) that rendered dynamic content on send.
While technically inclined users were OK handling code, we got insights from research that most users had difficulty understanding what each piece of code meant and were uncomfortable using it.
Fearing they would "mess things up" or “break it”, users were less inclined to modify our templates to express their brand.
Some of our most popular templates, like abandoned cart emails, had a considerable amount of the message showing as code on the email builder.
The classic editor used special snippets of code in brackets (like {{ first_name }} ) that rendered dynamic content on send.
While technically inclined users were OK handling code, we got insights from research that most users had difficulty understanding what each piece of code meant and were uncomfortable using it.
Fearing they would "mess things up" or “break it”, users were less inclined to modify our templates to express their brand.
Some of our most popular templates, like abandoned cart emails, had a considerable amount of the message showing as code on the email builder.
The classic editor used special snippets of code in brackets (like {{ first_name }} ) that rendered dynamic content on send.
While technically inclined users were OK handling code, we got insights from research that most users had difficulty understanding what each piece of code meant and were uncomfortable using it.
Fearing they would "mess things up" or “break it”, users were less inclined to modify our templates to express their brand.
Some of our most popular templates, like abandoned cart emails, had a considerable amount of the message showing as code on the email builder.
Best-practices were unclear
Best-practices were unclear
Best-practices were unclear
Best-practices were unclear
Users were relying on external help documents to learn about essential best practices such as the inclusion of fallback language to avoid weird empty spaces in a sentence (in case the recipient didn't have a “last name” on the database) and other data modifiers that can ensure consistency (for example, forcing that all first names are capitalized adequately in a sentence).
The guide for dynamic content was in the top 5 of the most visited articles in the help center.
Users were relying on external help documents to learn about essential best practices such as the inclusion of fallback language to avoid weird empty spaces in a sentence (in case the recipient didn't have a “last name” on the database) and other data modifiers that can ensure consistency (for example, forcing that all first names are capitalized adequately in a sentence).
The guide for dynamic content was in the top 5 of the most visited articles in the help center.
Users were relying on external help documents to learn about essential best practices such as the inclusion of fallback language to avoid weird empty spaces in a sentence (in case the recipient didn't have a “last name” on the database) and other data modifiers that can ensure consistency (for example, forcing that all first names are capitalized adequately in a sentence).
The guide for dynamic content was in the top 5 of the most visited articles in the help center.
Users were relying on external help documents to learn about essential best practices such as the inclusion of fallback language to avoid weird empty spaces in a sentence (in case the recipient didn't have a “last name” on the database) and other data modifiers that can ensure consistency (for example, forcing that all first names are capitalized adequately in a sentence).
The guide for dynamic content was in the top 5 of the most visited articles in the help center.
Users didn't know where dynamic content could be used
Users didn't know where dynamic content could be used
Users didn't know where dynamic content could be used
Users didn't know where dynamic content could be used
While Klaviyo content builders featured a basic picker to insert dynamic content, many popular use cases for dynamic content didn’t feature any indicator.
Users didn't know they could personalize the subject line of an email or the label in a button. Klaviyo needed a standardized insertion method for dynamic content, ideally aware of the context of use.
While Klaviyo content builders featured a basic picker to insert dynamic content, many popular use cases for dynamic content didn’t feature any indicator.
Users didn't know they could personalize the subject line of an email or the label in a button. Klaviyo needed a standardized insertion method for dynamic content, ideally aware of the context of use.
While Klaviyo content builders featured a basic picker to insert dynamic content, many popular use cases for dynamic content didn’t feature any indicator.
Users didn't know they could personalize the subject line of an email or the label in a button. Klaviyo needed a standardized insertion method for dynamic content, ideally aware of the context of use.
While Klaviyo content builders featured a basic picker to insert dynamic content, many popular use cases for dynamic content didn’t feature any indicator.
Users didn't know they could personalize the subject line of an email or the label in a button. Klaviyo needed a standardized insertion method for dynamic content, ideally aware of the context of use.
How might we...
optimize the use of dynamic content in Klaviyo, empowering users to efficiently create customized messages on a large scale?
Process
Process
Process
Process
Research
Research
Research
Research
We started with an analysis of competitors and other consumer products that let people pick content that changes depending on context.
We started with an analysis of competitors and other consumer products that let people pick content that changes depending on context.
We started with an analysis of competitors and other consumer products that let people pick content that changes depending on context.
We started with an analysis of competitors and other consumer products that let people pick content that changes depending on context.
Feature was seen across competitors, but few had an intuitive experience (lots of code exposed)
Research on web apps that had some level of dynamic content / stylization.
Good examples were seen in platforms like HubSpot and Airtable.
Research highlights
Platforms with a large catalog of items to choose from have success showing some hierarchy or categorization to help users find what they want.
Most platforms do not expose a fallback/default value and still rely on code on the canvas, despite its usability shortcomings.
Contextualizing the data with samples or a clear statement of what will occur in certain scenarios (for fallback data) elevates users’ confidence that they are selecting the right item.
HubSpot's approach to account-level default value ensures brands can stay consistent in their communication, regardless of who is writing the email (for example, having “friend” as a fallback for First Name)
Iterations
Iterations
Iterations
Iterations
To set scope we partnered with stakeholders in Product to vote on features that we believed were important to include for the initial release and those that should be handled in subsequent releases.
To set scope we partnered with stakeholders in Product to vote on features that we believed were important to include for the initial release and those that should be handled in subsequent releases.
To set scope we partnered with stakeholders in Product to vote on features that we believed were important to include for the initial release and those that should be handled in subsequent releases.
To set scope we partnered with stakeholders in Product to vote on features that we believed were important to include for the initial release and those that should be handled in subsequent releases.
I explored a wide range of options for how we should showcase the insertion experience, including menus and display options.
Additionally, I focused on how different categories could be displayed and how we could offer some preferences that would be applied to any given piece of dynamic content.
I explored a wide range of options for how we should showcase the insertion experience, including menus and display options.
Additionally, I focused on how different categories could be displayed and how we could offer some preferences that would be applied to any given piece of dynamic content.
I explored a wide range of options for how we should showcase the insertion experience, including menus and display options.
Additionally, I focused on how different categories could be displayed and how we could offer some preferences that would be applied to any given piece of dynamic content.
I explored a wide range of options for how we should showcase the insertion experience, including menus and display options.
Additionally, I focused on how different categories could be displayed and how we could offer some preferences that would be applied to any given piece of dynamic content.
When bringing some of the iterations from wireframes to a mock state using our design system components, I explored how the feature set we wanted could be accomplished with modals, dropdowns and segmented controls.
When bringing some of the iterations from wireframes to a mock state using our design system components, I explored how the feature set we wanted could be accomplished with modals, dropdowns and segmented controls.
When bringing some of the iterations from wireframes to a mock state using our design system components, I explored how the feature set we wanted could be accomplished with modals, dropdowns and segmented controls.
When bringing some of the iterations from wireframes to a mock state using our design system components, I explored how the feature set we wanted could be accomplished with modals, dropdowns and segmented controls.
From that initial exploration, we had an assumption that showing data categories directly in the UI (using “pill buttons”) was important for both new users trying to get a sense of what is possible and advanced users that want to quickly find something specific.
To validate our assumptions on this space and get some early responses on how users felt about this direction, we performed user validation tests using prototypes in Figma - one with a pill buttons for filters and another one using standard dropdown components.
From that initial exploration, we had an assumption that showing data categories directly in the UI (using “pill buttons”) was important for both new users trying to get a sense of what is possible and advanced users that want to quickly find something specific.
To validate our assumptions on this space and get some early responses on how users felt about this direction, we performed user validation tests using prototypes in Figma - one with a pill buttons for filters and another one using standard dropdown components.
From that initial exploration, we had an assumption that showing data categories directly in the UI (using “pill buttons”) was important for both new users trying to get a sense of what is possible and advanced users that want to quickly find something specific.
To validate our assumptions on this space and get some early responses on how users felt about this direction, we performed user validation tests using prototypes in Figma - one with a pill buttons for filters and another one using standard dropdown components.
From that initial exploration, we had an assumption that showing data categories directly in the UI (using “pill buttons”) was important for both new users trying to get a sense of what is possible and advanced users that want to quickly find something specific.
To validate our assumptions on this space and get some early responses on how users felt about this direction, we performed user validation tests using prototypes in Figma - one with a pill buttons for filters and another one using standard dropdown components.
Main takeaways
Users overwhelmingly preferred the new pill element over the dropdown, validating our assumption that it should be proposed as a new design system component.
For some items that were considered self-explanatory (such as "First Name - The recipient's first name"), the description line did not provide value and could be removed to improve the list's scannability. However, the description was still helpful for providing context on data coming from other sources (like Shopify) and other extreme use cases.
Stakeholders felt that our recommendations (listed first when users open the selector) could use an additional visual differentiator to stand out from other options in the dropdown.
Solution
Solution
Solution
Solution
Discoverability and
first-time use
Discoverability and
first-time use
Discoverability and
first-time use
Discoverability and
first-time use
A bolt symbol is added on focus to all fields that support dynamic content.
The first time a user chooses to insert dynamic content or interacts with existing dynamic content on a field, a dialog contextualizes the feature and offers additional resources in case they'd like to learn more.
A bolt symbol is added on focus to all fields that support dynamic content.
The first time a user chooses to insert dynamic content or interacts with existing dynamic content on a field, a dialog contextualizes the feature and offers additional resources in case they'd like to learn more.
A bolt symbol is added on focus to all fields that support dynamic content.
The first time a user chooses to insert dynamic content or interacts with existing dynamic content on a field, a dialog contextualizes the feature and offers additional resources in case they'd like to learn more.
A bolt symbol is added on focus to all fields that support dynamic content.
The first time a user chooses to insert dynamic content or interacts with existing dynamic content on a field, a dialog contextualizes the feature and offers additional resources in case they'd like to learn more.
Selecting an item
Selecting an item
Selecting an item
Selecting an item
A popover menu visually exposes dynamic data that users can use in their messages.
It uses the context, such as the goal of the automation, to provide recommendations for which data users should use.
We use the context of the field, commonly used items, and the message goal (campaign vs automation) to inform what gets recommended.
Users can also find what they're looking for by using the pre-selected search field or category filters.
A popover menu visually exposes dynamic data that users can use in their messages.
It uses the context, such as the goal of the automation, to provide recommendations for which data users should use.
We use the context of the field, commonly used items, and the message goal (campaign vs automation) to inform what gets recommended.
Users can also find what they're looking for by using the pre-selected search field or category filters.
A popover menu visually exposes dynamic data that users can use in their messages.
It uses the context, such as the goal of the automation, to provide recommendations for which data users should use.
We use the context of the field, commonly used items, and the message goal (campaign vs automation) to inform what gets recommended.
Users can also find what they're looking for by using the pre-selected search field or category filters.
A popover menu visually exposes dynamic data that users can use in their messages.
It uses the context, such as the goal of the automation, to provide recommendations for which data users should use.
We use the context of the field, commonly used items, and the message goal (campaign vs automation) to inform what gets recommended.
Users can also find what they're looking for by using the pre-selected search field or category filters.
A popover menu visually exposes dynamic data that users can use in their messages.
It uses the context, such as the goal of the automation, to provide recommendations for which data users should use.
We use the context of the field, commonly used items, and the message goal (campaign vs automation) to inform what gets recommended.
Users can also find what they're looking for by using the pre-selected search field or category filters.
Configuring options
Configuring options
Configuring options
Configuring options
Once the user selects an item, context is provided about the need to include a fallback.
Certain popular uses of data from e-commerce platforms can have special controls, like choosing what item from an abandoned cart the user would like to select, based on preferred criteria.
Once the user selects an item, context is provided about the need to include a fallback.
Certain popular uses of data from e-commerce platforms can have special controls, like choosing what item from an abandoned cart the user would like to select, based on preferred criteria.
Once the user selects an item, context is provided about the need to include a fallback.
Certain popular uses of data from e-commerce platforms can have special controls, like choosing what item from an abandoned cart the user would like to select, based on preferred criteria.
Once the user selects an item, context is provided about the need to include a fallback.
Certain popular uses of data from e-commerce platforms can have special controls, like choosing what item from an abandoned cart the user would like to select, based on preferred criteria.
Once the user selects an item, context is provided about the need to include a fallback.
Certain popular uses of data from e-commerce platforms can have special controls, like choosing what item from an abandoned cart the user would like to select, based on preferred criteria.
Improving usability by eliminating code
Improving usability by eliminating code
Improving usability by eliminating code
Improving usability by eliminating code
After insertion, the title of the dynamic data is presented as a visual tag on the field.
Users can hover to see more details or click on the element to edit the configurations of the dynamic content
After insertion, the title of the dynamic data is presented as a visual tag on the field.
Users can hover to see more details or click on the element to edit the configurations of the dynamic content
After insertion, the title of the dynamic data is presented as a visual tag on the field.
Users can hover to see more details or click on the element to edit the configurations of the dynamic content
After insertion, the title of the dynamic data is presented as a visual tag on the field.
Users can hover to see more details or click on the element to edit the configurations of the dynamic content
After insertion, the title of the dynamic data is presented as a visual tag on the field.
Users can hover to see more details or click on the element to edit the configurations of the dynamic content
Since dynamic text can be stylized if included in an email body for example, it was an important consideration for the visual tag to represent added styling.
Improving the design system vs MVP version
Improving the design system vs MVP version
Improving the design system vs MVP version
Improving the design system vs MVP version
Our ideal solution used pill toggles to filter sections, but that was not a component available in the Design System at the time.
I worked with the Design Systems team to guide the implementation of the component while providing a version that utilized 100% off-the-shelf components that were available at the time.
Our ideal solution used pill toggles to filter sections, but that was not a component available in the Design System at the time.
I worked with the Design Systems team to guide the implementation of the component while providing a version that utilized 100% off-the-shelf components that were available at the time.
Our ideal solution used pill toggles to filter sections, but that was not a component available in the Design System at the time.
I worked with the Design Systems team to guide the implementation of the component while providing a version that utilized 100% off-the-shelf components that were available at the time.
Our ideal solution used pill toggles to filter sections, but that was not a component available in the Design System at the time.
I worked with the Design Systems team to guide the implementation of the component while providing a version that utilized 100% off-the-shelf components that were available at the time.
Our ideal solution used pill toggles to filter sections, but that was not a component available in the Design System at the time.
I worked with the Design Systems team to guide the implementation of the component while providing a version that utilized 100% off-the-shelf components that were available at the time.
While compromised, the MVP version would allow us to deliver value faster and fix this major usability challenge in our platform.
While compromised, the MVP version would allow us to deliver value faster and fix this major usability challenge in our platform.
While compromised, the MVP version would allow us to deliver value faster and fix this major usability challenge in our platform.
While compromised, the MVP version would allow us to deliver value faster and fix this major usability challenge in our platform.
While compromised, the MVP version would allow us to deliver value faster and fix this major usability challenge in our platform.
links & hobbies
links & hobbies
links & hobbies
links & hobbies
links & hobbies
Photography ∙ Playlists ∙ Films
hey, thanks for visiting
hey, thanks for visiting
hey, thanks for visiting
hey, thanks for visiting
hey, thanks for visiting
have a nice day
have a nice day
have a nice day
have a nice day
have a nice day
PIXELS POLISHED WITH ♥, BY GUI ∙ LAST UPDATED EARLY 2023