Skip links

Scaling email communication with a design system

Designed a modular email system that enabled consistent branding, accelerated production, and scaled across educational and marketing communications.
Context

As email campaigns expanded across different teams and use cases, layouts became increasingly inconsistent. Designers repeatedly rebuilt similar components, making production slower and introducing visual inconsistencies across customer communications.

Role
  • Design Audit
  • UI Design
  • Visual design
  • Wireframing

Audit Wireframe UI Exploration Components Validation

Goal

Create reusable modules • Reduce production time • Maintain brand consistency • Support multiple email types

Design Principle

Modular by default

Build reusable components that can be mixed across campaigns.

Flexible without sacrificing consistency

Allow customization while preserving brand standards.

Optimized for production

Reduce repetitive design work and simplify handoff.

Before

Inconsistence layout

Lack of visual hierarchy

Disunited spec

Component Evolution

Components were simplified through multiple iterations to improve flexibility while maintaining consistent spacing, typography, and CTA hierarchy.

Desktop
Mobile

Component Library

Created a library of 25+ reusable components supporting educational, promotional, renewal, informational, winback and onboarding email experiences.
Pricing modules
Card
Feature block
Trust section
Alert pencil banner
Footer

Real-world Applications

Educational template
Marketing template

Design Guideline

Typography

Established a consistent type scale to improve readability across educational and promotional emails.

Imagery

Defined image styles and composition rules to create a recognizable visual language.

Background

Standardized color usage to maintain hierarchy while allowing campaign flexibility.

Outcome

The design system transformed email production from designing individual campaigns to assembling reusable modules, enabling faster iteration while maintaining a consistent customer experience. Used as the foundation for future email communications.

More consistency

Faster production

Easier collaboration

Scalable component library

This website uses cookies to improve your web experience.
This site is registered on portal.liquid-themes.com as a development site. Switch to production mode to remove this warning.