Imperfect Foods: Email Design System
Client: Imperfect Foods delivers groceries on a mission to eliminate food waste and build a better food system for everyone.
About: The source of truth for Imperfect Foods' email marketing—prioritizing efficiency, customer usability, and accessibility.
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.
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.
Case study: https://sarautz.webflow.io/projects/eds