IMPERFECT FOODS
Building a flexible design system that makes brand consistency effortless
Client
Imperfect Foods delivers groceries on a mission to eliminate food waste and build a better food system for everyone.
Timeframe
2021
Role
Summary
Imperfect's email design was fragmented, and our teams lacked a shared understanding of the process. So, we built an email design system that streamlined the design and development process, guaranteeing brand consistency throughout the customer journey.
Designer
Tools
Figma
Litmus
Iterable
Problem
Imperfect’s email design was disjointed, lacked consistency, and was partially outdated. Our teams lacked a shared foundation around process, language, guidelines, and brand design. This created process inefficiencies for each team, as well as disjointed emails and inconsistencies within our overall customer experience.
Goal
Build a single source of truth for teams that simplifies the design, testing, and development process, and ensures consistency across the customer journey.
Getting started
We created a comprehensive map of the customer journey and reviewed all our emails to determine the requirements for our new design system. We ultimately decided on several Atoms, Molecules, Organisms, and Templates.
Finding the right tool
The current process of designing emails ad hoc with Adobe Illustrator was resulting in a feedback bottleneck. We needed a tool where designers, marketers, and developers could easily collaborate.
Enter Figma—with components, assets libraries, text styles, auto-layout, spell check, comments, and more.
Building the design system
We developed a library of reusable components, guided by clear standards, that can be easily assembled to create cohesive and branded emails.
To ensure that components are consistent across every customer touchpoint, we created the new Email Design System alongside the Product, Landing Page, and Social Design Systems.
Using the design system
Instead of starting from scratch, our designers and developers have everything they need to build any email.
In addition to living in the Figma Asset Library, the new modules were developed, QA’ed, and saved as reusable HTML/CSS code blocks. This saves a lot of time in the development and QA process because the blocks can be easily plugged into an email.
Impact
The Email Design System changed the game for our teams in four key areas.
❤️ Improved cross-functional team communication
With a source of truth, shared naming conventions, and reusable modules, our teams are always on the same page from kick off to development.
🎉 Reduced design and development workload by 70%
Thanks to the system’s prebuilt design and code library our designers and developers can now create, build, make decisions, and test emails much faster.
🌎 Ensure a cohesive customer experience
Predefined modules built using shared atoms across the Email, Product, and Landing Page Systems make it a breeze to maintain visual brand consistency.
👁️ Prioritized accessibility and usability
We improved the overall accessibility and usability of our emails by making them mobile responsive and darkmode friendly, ensuring ADA compliant color contrasts for those with color blindness, and using live text which makes it easier for people using screen readers.
Team
Sara Utz, Lead Designer
Tay Gmahling, Designer
Carey Brown, Senior Manager Marketing Ops
Kat Tsukuda, Marketing Ops
