Klaviyo: Leading UX & Design Systems
Context / Story
Klaviyo is a leading marketing automation platform for e-commerce, helping businesses personalize customer engagement across email, SMS, and more through powerful, data-driven tools.
When I joined as a Senior Product Designer and Design Systems Lead, Klaviyo was preparing to launch its most ambitious campaign yet: “The Only B2C CRM”—a repositioning that marked its evolution from a marketing tool to a full-fledged CRM purpose-built for B2C brands.
At the center of this shift was the Klaviyo Data Platform (KDP), a unified customer data layer powering new AI-driven features like omnichannel campaigns, automated SMS, personalized in-app messaging, and customer support tools.
To support the scale of this rollout, I was brought on to:
-
Lead UX and design execution for key pages and campaign assets across web and marketing
-
Build a new design system from the ground up to improve speed, consistency, and scalability
Klaviyo’s outdated system was slowing teams down. My work helped lay the foundation for faster, more cohesive creative execution—both for the B2C CRM campaign and future initiatives.
The Challenge
Klaviyo’s team was preparing to launch an exciting campaign and share a suite of new products while driving traffic and growth but the design foundation wasn’t ready to support it.
The creative scope was massive: a new brand direction, a website refresh and global ads across surfaces like high profile parts of New York, the Vegas Strip and the Sphere. The timeline was tight, and the quality bar was high.
But the design team was operating with an outdated, fragmented system—missing key components, lacking documentation, and built on old visual patterns. Designers were rebuilding from scratch, introducing inconsistencies and slowing velocity across the board.
Klaviyo needed someone to help with design execution while also establishing a scalable design system—bringing structure, speed, and cohesion to a fast-moving campaign and future projects.
Objectives & Success Metrics
My Role & Scope
Process & Collaboration
My work at Klaviyo spanned two major tracks: building a scalable design system and shaping the UX for the B2C for CRM campaign. Each required a different mindset. The campaign was fast-paced and collaborative, involving a wide cross-functional team. With shifting creative direction and tight deadlines, flexibility and communication were essential. Strong design strategy emerges through cross-functional collaboration—aligning on goals, surfacing friction points, and solving real problems together.
The design system work, by contrast, was more focused and methodical. I partnered with one other designer and our manager to rebuild it from the ground up. Though our team was small, we brought in key stakeholders from design and engineering to ensure alignment and adoption. The result was a living, intuitive system that became a foundational tool throughout the campaign.
Campaign Design Process
In parallel to the system work, I led design execution for the “B2C for CRM” campaign—collaborating across marketing, design, and development teams to translate the evolving brand direction into a responsive, high-impact web experience. We moved quickly from early wireframes to polished mockups and animations, referencing the design system wherever possible to reduce friction and technical debt.
I owned key pages in the CMS, implementing them directly in WordPress to speed up delivery and reduce pressure on engineering. Throughout, we held regular reviews with stakeholders, including senior leadership, to ensure alignment and momentum. Final QA included a multi-language rollout and accessibility checks. I also incorporated lightweight Rive animations to enhance interaction without compromising performance.
Throughout the process, I made it a point to regularly advocate for accessibility best practices and helped ensure all designs were inclusive and compliant. In addition to working in Figma, we also used Rive for lightweight web animations and micro-interactions, helping add subtle motion to select components while maintaining performance and clarity and directly implemented designs into WordPress CMS to take pressure off the development team(s).
Early branding iterations based on the design brief
Research & Strategic Context
While I wasn’t directly responsible for conducting user research, I worked with Klaviyo’s dedicated UX research team who provided audience insights, behavioral data, and feedback that helped shape the overall campaign direction.
For the “B2C for CRM” campaign, the creative brief was clear: this was a flagship launch designed to excite users, stakeholders, and even Wall Street investors. The directive focused on bold storytelling, visually rich design, and a premium web experience that balanced hype with usability.
My role was to help bring that vision to life, translating brand messaging and research-backed positioning into user experiences that were visually compelling, performant, and intuitive across devices.
Wireframes and Design Evolution
Design System Evolution
The design system was built using an atomic approach, starting from the smallest elements and growing into reusable templates. Doing this approach decreases design and development time, team communication and consistency and easily documents changes and updates as the inevitably roll out. At the same time, it also improves the user experience by ensuring consistency among components of every level from the most foundational level all the way though templates.
-
Tokens & Variables: I created centralized definitions and rules for color, typography, spacing, and shadows and more while also creating Figma variables to allow for consistency.
-
Atomic Components: Designed modular, accessible components like buttons, toggles, tabs, inputs, and form fields—each responsive and ready for reuse.
-
Complex Modules: Combined atoms and molecules into page sections like testimonials, product highlights, pricing blocks, and FAQs.
-
Page Templates: Built out full-page scaffolds using the new design language, enabling designers to prototype and ship pages faster while maintaining consistency.
Every aspect of the design system was version-controlled and optimized for clarity and reusability. As components matured, I worked with other designers and key developers to replace outdated assets and align on system usage across files.
Screenshot samples from the design system (colors and typography)
B2C for CRM Page Design
For the campaign work, I began by interpreting creative briefs and translating narratives into layout structures. Early exploration involved loose wireframes, layout sketches, and visual experiments—often focused on storytelling, modularity, and visual rhythm.
Key page elements I worked on included:
-
The homepage hero section—balancing bold messaging with strategic CTAs
-
Mid-page campaign sections—featuring rich imagery, data points, and product storytelling
-
Custom components like animated feature callouts and customer examples
-
Interactive elements and layout variations designed to feel premium and dynamic
Throughout the process I shared versions regularly in Figma and presentations for stakeholder feedback and for user research, integrated updates to the design as the new branding evolved, checked for accessibility and made sure to update the design system as new templates and modules were approved and shipped.
Example wireframe iterations
Example high fidelity iterations (homepage / branding explorations)
Finished Designs and Handoff
The final designs reflect a balance of brand storytelling, performance, and design system integrity. For the B2C for CRM campaign, the visuals were crafted to feel bold, premium, and forward-looking—supporting Klaviyo’s positioning as the first CRM built specifically for B2C.
Design system highlights include:
-
A fully built out design system with documentation and variable based assets.
-
Accessible, documented components ready for immediate use and adoption.
-
Scalable and responsive page templates designed to unify the visual language and speed up future design work.
Campaign highlights include:
-
A redesigned homepage hero section built to quickly communicate the campaign’s value proposition while engaging a range of audiences.
-
Rich mid-page content modules focused on product storytelling, customer success and feature highlights.
-
Reusable interactive components and animations that enhanced the UX without adding to technical debt, all implemented using WordPress and animation tools like RIVE.
-
Full responsiveness across desktop, tablet, and mobile breakpoints.
These designs not only met the needs of the “B2C for CRM” campaign launch, they laid the foundation for faster, more consistent work across the design team(s) going forward.
Example homepage before > after
Example web pages for the campaign (link to website at the bottom of page)
Reflection
Overall, this was an extremely rewarding project that taught me a lot about how to implement a successful design system and campaign for a large company.
Watching the “B2C for CRM” campaign roll out internationally across multiple languages was an incredibly rewarding and exciting moment. It’s success proved the flexibility of both the hands on design and the organized system behind it.
Internally, one of the most meaningful outcomes was seeing the design system adopted across the marketing team. It became a living, evolving artifact that captured the new brand patterns, enabled faster collaboration, and massively improved the speed and quality of work across the board.
Lastly, this project reinforced the value of creative strategy in design. Prioritizing not just about how to make something look great but more importantly how to scale it, document it, and make it usable across the teams.
The project was an overall huge success leading to massive continued user adoption of the platform thanks to the efforts of the team.