Guiding ease and support within the Klaviyo experience

Before joining Klaviyo I’d never heard the phrase “design system”, now we have one that incorporates behavioral design. How do the two work together?

In a previous post, I highlighted how we incorporate behavioral design at Klaviyo and how we apply behavioral design to reduce the gap between intention and action at four different levels.

Klaviyo’s design system team has made significant strides in codifying the design foundation through the Ascent design system. Internally, this design system drives efficiency for designers and engineers. Externally, this design system facilitates a consistent user experience.

This consistent user experience supports level 1 behavioral design — making the target action easy. For example, seemingly minor details, such as a consistent placement of actions to navigate to the next step, are guided through our Ascent design system. The target action is much easier when navigating from one step to the next is fast and intuitive. At times, how to make target actions easier incorporates behavioral insights. For example, should we make the target action a default? What about an active choice? Might the user benefit from a demonstration? Behavioral design in Ascent begins to guide how to increase the ease of target actions by incorporating context-specific insights from behavioral design.

Examples from our Ascent design system — how to identify if there’s an opportunity to apply a behavioral design tactic, then if there is, what to consider to design with the user’s context in mind.

This consistent user experience also facilitates level 2 behavioral design — supporting the target behavior — through standardizing components such as a progress indicator or progress bar. Showing progress is a powerful tactic — it provides feedback, sets expectations, and guides action. How we use these components incorporates insights from the science of motivation. For example, we leverage our understanding of motivation as we intentionally chunk each step, track progress, and celebrate. Cumulatively, showing progress can facilitate efficiency, self-efficacy, and trust.

Incorporating behavioral design decision-making into the Klaviyo Ascent design system works to overcome that pesky gap between intention and action.

Learn more about the ascent design system here.

To read more about the creation of the Ascent design system see this Behind the Pixels interview with Jason Grant.