MOO Email Template System
Role: UI Design, Graphic Design
Email is an important marketing channel at MOO, used to connect with customers at key intervals in their journey. In order to better serve our email audience, I worked closely with the CRM team to overhaul our template system, enabling increased personalization and a more flexible means of delivering content. This also meant partnering with a developer to bring the new designs to fruition and ensure smooth functionality on both desktop and mobile.
Above: A before (left) and after (right) look at a MOO email, with key design changes outlined below:
Flexibility
While the full-bleed color of our old email template was nice to look at, it limited our product placement and art direction, and sometimes clashed with secondary product imagery lower down in the email. The new white background allows product imagery to stand out, and avoids color contrast issues, all while giving us increased flexibility.
Shoppablility
Another significant change was removing the body copy next to the secondary imagery. After reviewing data that customers rarely spent time in this portion of the email, we opted to focus on naming the product clearly, with an underline to indicate click-to-shop functionality. This also enabled us to adjust the layout to create a shorter email, resulting in less scrolling.
Type Hierarchy
Improving the typography was another big focus with the new template — the old template lacked sufficient hierarchy in the secondary image modules, and the headline receded against the strong hero imagery. MOO’s new serif typeface was brought in at key junctures to offer increased headline weight. Small tweaks like bolding promotional codes also help readability.
At the heart of our redesign was the goal of creating a flexible design system, with a variety of modules that can be interchanged depending on an email’s objective. Some MOO emails are content-focused, while others are more sales-driven, and our old template did not allow for this differentiation, as it had only two distinct module types.
The new template enables the CRM and creative teams to work together to determine the appropriate modules for an email based on the customer journey. Additionally, new modules (such as the reorder module) enable greater personalization for existing customers.
We designed modules with a mobile-first approach, ensuring we could shift between a single-column (mobile) and a two-column grid (desktop).
The email below would not have been possible in the old template, but with our new content module, we are able to produce list-based emails, one of the trends we saw from a competitor analysis.
Project Team
Sarah Daley
Tara Bouley