Imperfect Foods delivers groceries on a mission to eliminate food waste and build a better food system for everyone.
The source of truth for Imperfect Foods' email marketing—prioritizing efficiency, customer usability, and accessibility.
Lead Designer: Sara Utz
Designer: Tay Gmahling
Senior Manager Marketing Ops: Carey Brown
Marketing Ops: Kat Tsukuda
Anyone familiar with email marketing knows the difficulties of making cohesive, well-designed, and accessible emails across all devices and service providers. Emails are too often treated as one-off ad hoc requests, living in Photoshop or Illustrator where only designers can access them. Thus, the customer lifecycle feels disjointed with emails riddled with ancient design artifacts and broken code.
These were the issues Imperfect Foods faced when I joined In May 2021—I uncovered there wasn't a single source of truth, nor defined components for email marketing. I took on this challenge by developing Imperfect’s Email Design System.
The Lifecycle and Design teams worked closely together to map out its needs and how to solve to 'em. So, where did we land? The Email Design System was broken into four categories: Atoms, Molecules, Organisms, and Templates.
It all came together as the Email Design System, which serves as the single source of truth for email design standards and development guidelines. Notably, this system does not standalone—it was created concurrently with Product Design systems and Brand guidelines to ensure all components and standards are cohesive across every customer touchpoint.
So, why create a design system for emails? Immediately, Imperfect's Email Design System made six key improvements.
First, the system streamlined Vocab & Communication across cross-functional teams with its central location for components and documentation used in Figma, Iterable, and Litmus.
Next, it improved Design Efficiencies by allowing for quick decision making with predefined color, type styles, button styles, etc. This led to a Unified Customer Journey with the Email Design System's predefined, reusable components.
In addition, it lightened Development Workload due to all defined components named, developed, and QA-ed in advance. This also meant Accessibility increased with pre-tested colors and contrast, ensuring color blindness visibility, and alt-tags for screen readers.
Lastly, Usability improved. The system was designed and developed with email best practices in mind, like minimum button sizes for mobile and Dark Mode. All of Imperfect's lifecycle emails and ad hoc blasts now use the Email Design System, creating an improved customer experience.
