Role

Principal Designer

Scope

I led the end-to-end design of a modular, mobile-first email design system that standardizes rewards communication across multiple clients. Built from reusable components, the system supports a wide range of offer types, layouts, and brand expressions—without sacrificing clarity, usability, or visual polish. I partnered closely with product and engineering to define structure, hierarchy, and usage guidance, ensuring the system was technically feasible, flexible, and durable across campaigns and partners. This system enables teams to ship high-quality, on-brand emails quickly while increasing offer density and revenue potential.

Rewards and offer emails are a critical touchpoint in loyalty ecosystems, yet they’re often treated as one-off designs. Across clients, emails needed to support different brands, offer types, and campaign goals—while remaining performant, readable, and usable on mobile.

The challenge was to:

  • support a wide range of merchants and offer configurations

  • maintain brand flexibility without fragmenting the system

  • optimize for mobile-first consumption

  • increase offer density without overwhelming users

  • enable faster campaign deployment across multiple partners

This work needed to function as a true system, not a collection of templates.

The system was designed with a strong emphasis on clarity, hierarchy, and reuse.

Key principles included:

  • Mobile-first hierarchy — content must scan effortlessly on small screens

  • Composable components — offers can be mixed, reordered, and expanded without redesign

  • Brand flexibility — clients can express identity without breaking structure

  • System over layout — rules and patterns over static designs

Before & After Comparisons

Before & After

Closer Look →

  • Significant reduction in module height allows more merchants in viewing pane

  • Content takes advantage of full width of device

  • Larger offer copy

  • Elevation and passback consolidated

  • More emphasis on coupon

Before & After

Closer Look →

  • Significant reduction in module height allows more merchants in viewing pane

  • Elevation and passback consolidated

Before & After

Closer Look →

  • Image full width, utilizing all available space in mobile device

  • Merchant logo full 120x60 not scaled smaller

  • Elevation flag and passback consolidated

  • More emphasis on coupon code

MOBILE EXPERIENCE BEFORE

MOBILE EXPERIENCE BEFORE

MOBILE EXPERIENCE BEFORE

No clear hierarchy, too many buttons, not enough offers in window pain.

No clear hierarchy, too many buttons, not enough offers in window pain.

No clear hierarchy, too many buttons, not enough offers in window pain.

Before & After

Closer Look →

  • Significant reduction in module height allows more merchants in viewing pane

  • Content takes advantage of full width of device

  • Larger offer copy

  • Elevation and passback consolidated

  • More emphasis on coupon

Before & After

Closer Look →

  • Significant reduction in module height allows more merchants in viewing pane

  • Elevation and passback consolidated

Before & After

Before & After

Closer Look →

Closer Look →

  • Image full width, utilizing all available space in mobile device

  • Merchant logo full 120x60 not scaled smaller

  • Elevation flag and passback consolidated

  • More emphasis on coupon code

  • Image full width, utilizing all available space in mobile device

  • Merchant logo full 120x60 not scaled smaller

  • Elevation flag and passback consolidated

  • More emphasis on coupon code

Before & After

Before & After

Closer Look →

Closer Look →

  • Significant reduction in module height allows more merchants in viewing pane

  • Content takes advantage of full width of device

  • Larger offer copy

  • Elevation and passback consolidated

  • More emphasis on coupon

  • Significant reduction in module height allows more merchants in viewing pane

  • Content takes advantage of full width of device

  • Larger offer copy

  • Elevation and passback consolidated

  • More emphasis on coupon

Before & After

Before & After

Closer Look →

Closer Look →

  • Significant reduction in module height allows more merchants in viewing pane

  • Elevation and passback consolidated

  • Significant reduction in module height allows more merchants in viewing pane

  • Elevation and passback consolidated

Making Progress Legible — closer look

Making Progress Legible — closer look

A modular component that clearly communicates progress, earned value, and remaining incentives while reducing cognitive load across all states.

© 2026 All rights reserved

© 2026 All rights reserved