All educational resources, in one easy-to-find place

The challenge: Fragmented resources, frustrated customers

Klaviyo's educational resources were split across two separate sites. The thinking was that because the materials were different in nature, each deserved its own dedicated space. Instead, customers regularly reported difficulty finding content and were unsure which resource was right for them.

Academy

On-demand materials for access at any time

Self-paced courses, quick guides, and certifications

Live training

Registration-based sessions with instructors in real time

Offered across different timezones for a global audience

Navigating two sites with two different experiences led to frustration, limited awareness of what was available, and a negative impact on their perception of Klaviyo's support.

Academy

Academy: Original state

The original homepage dropped customers directly into a catalog with no orientation or guidance. Every resource card looked identical regardless of content type, making it difficult to distinguish a quick guide from a multi-course certificate at a glance.

The filters compounded the problem. Categories like Business goal, and Klaviyo area used internal language that didn't map to how customers think about finding content, and radio buttons meant only one filter option could be selected at a time.

The original academy homepage presented customers with a wall of uniform resource cards and no clear starting point. Every card looked identical regardless of content type, making it nearly impossible to distinguish a quick guide from a multi-course certificate at a glance.

The filter categories used internal language (Business goal, Klaviyo area) that didn't reflect how customers actually think about finding content. To make matters worse, filters used radio buttons rather than checkboxes, meaning customers could only select one option at a time within each category.

Live training

Live training: Original state

The live training site had a different set of problems. Two cards per row left a lot of unused horizontal space, and repeated sessions generated long lists of dates and times that dominated the page.

The filters were more sensible, but filtering by timezone rather than topic or level meant customers had no way to browse by what they actually wanted to learn. And with entirely different navigation, branding, and layout, there was nothing to connect the two experiences.

The live training site had a different set of problems. Two cards per row left a lot of unused horizontal space, and repeated sessions generated long lists of dates and times that dominated the page.

Opportunities

Understanding how customers were experiencing the product made our priorities clear, and the opportunities followed naturally.

Merge the academy and live training sites into a single experience so customers could access all resources in one place

Create a landing page to guide customers, surface relevant content, and give them confidence in where to start

Redesign the resource catalog and filtering system so customers can easily find what they're looking for

Update the UI to reflect the latest brand guidelines and align with Klaviyo's marketing website

My role and process

I led design on this project, collaborating with over 20 stakeholders across four teams:

Customer education: The content creators and managers for both sites

Customer success: The team providing customer feedback about pain points and frustrations

Creative design: The team responsible for branding and UI guidance and recommendations

Engineering: The team responsible for bringing the designs to life

The project moved back and forth through different phases:

Define

Current-state audit and user flow mapping of both sites

Competitive analysis focused on landing page structure and filter options

Design

Mid-fidelity wireframes and iterative designs

High-fidelity mockups using the marketing design system

Feedback

Multiple rounds of review with designers, engineering, and stakeholders

User testing on catalog filter options with a design researcher

Deliver

Design annotations for engineering handoff

Pre- and post-release QA to verify design and development parity

Research and design considerations

Before moving into design, I conducted a competitive analysis across a dozen platforms to understand how others approached landing page structure and search/filter systems. The findings helped establish a clear direction before any design work began.

Click images to enlarge

The filter system required the most research-driven decision-making. Working with a design researcher, we ran user tests with 8 participants to evaluate filter categories, naming, and order. The results were clear:

We cut the Role filter entirely after participants found it confusing and largely didn't see themselves reflected in the options
We landed on clearer category names (Topic instead of Category, Type instead of Format) based on how participants actually described their search behavior

We cut the Role filter entirely after participants found it confusing and largely didn't see themselves reflected in the options
We landed on clearer category names (Topic instead of Category, Type instead of Format) based on how participants actually described their search behavior

Left: Filter research results | Right: finalized filters

The resource cards went through several iterations to ensure customers could immediately distinguish between resource types at a glance. This included exploring some more expressive, colorful directions at the request of stakeholders before converging on a solution that balanced visual distinction with the restraint of the marketing design system.

A few of the many resource card iterations

Solution

Landing page

The new landing page gave the unified site a proper entry point for the first time. A hero section with a clear call to action oriented customers immediately, followed by themed sections surfacing new content, getting started resources, and live training registrations.

View the full home page

A Decide how you'd like to learn accordion let customers explore each resource type before committing to the catalog, addressing one of the core complaints from the original experience: Not knowing where to start. Customer testimonials at the bottom added social proof and helped build confidence in the value of the resources on offer.

Left: Learning resources, expanded view | Right: Customer testimonials

The contrast with the original academy was significant. Customers previously landed directly in an unorganized catalog with no guidance, while the new landing page gave them context, structure, and a clear path forward, regardless of where they were in their Klaviyo journey.

Resource catalog with filtering

The updated catalog brought all of Klaviyo's educational content together in one place. Everything was now searchable and browsable side by side, with filters that reflected how customers actually think about finding what they need.

A prominent search bar, checkboxes that allowed multiple filter selections at once, and distinct card treatments for each content type made finding the right resource significantly faster and more intuitive.

The finalized, comprehensive resource catalog

Outcomes

The results validated the core premise of the project: When educational resources are easier to find, customers use them more.

13% increase in visits to live training registration pages

Customers who may not have known live trainings existed were now finding them.

16% increase in Academy course registration

The redesigned catalog made it easier to browse, and customers were following through.

25% increase in average resource engagement time

Customers were spending more time with resources, not searching for them.

Reflections

When user testing changes the plan Testing our filter options was one of the most valuable parts of this process. We went in with hypotheses about which filters customers would find useful, but their feedback gave us a more accurate picture. The final filter set is simpler and more effective than what we started with.

Multiple stakeholders, multiple perspectives Managing alignment across a large, cross-functional group was sometimes challenging, but also one of the more rewarding aspects of the project. Having a wide variety of perspectives in the room meant a richer range of ideas and a stronger end result. Grounding decisions in customer needs and user testing findings kept the group aligned when perspectives diverged.

Branding changes, architecture endures The site has since gone through several visual updates to reflect Klaviyo's evolving brand identity, but the underlying structure has remained intact. The landing page layout, catalog architecture, and filter system are all still in use today.

Previous case study

Next case study