Email Design Systems: Premier Agent

Premier Agent – one of Zillow Group’s B2B brands – was seeking a better way to build emails. Rather than building from-scratch emails and “frankensteining” together new emails by cobbling together previous builds, the team desired the efficiency of an email design system. Seeking this way of building emails was crucial for to Premier Agent for several reasons: the need to lower budget, the volume of email was increasing, the need for non-HTML users to build emails (especially for quirk-turn sends), to enable easier A/B testing and to improve design consistency (an important piece for subscriber trust).

Approach

Partners:
Premier Agent leadership, Premier Agent designer leadership, Premier Agent marketing

Assessment:
I first assessed the email sends to identify design patterns. In addition, after meetings with Premier Agent design leadership, we agreed upon creating different email design systems for specific email verticals to helps subscribers start to identify the type of messaging they are receiving (e.g. differentiating between the newsletter vertical vs product update vertical) and take design consistency a step further. 

Wireframes:
After identifying common design patterns, I also identified gaps in the designs which may be useful for future A/B testing and better legibility. I wireframed a standardized shell and modules that would cater to various types content for each email vertical.

Design:
Following Premier Agent brand guidelines, I applied logos, colors and fonts to the Email Design Systems. Specific application of brand colors was decided upon after a review of corresponding landing pages for each email vertical to make the user experience more consistent across the subscriber journey.

Development:
I then created each vertical’s email design system first with the typical HTML/CSS base. To help enable non-HTML users to build email, I then layered in Marketo syntax to the email design systems to create a highly custom WYSIWYG experience in the Marketo Editor 2.0 builder. This enabled our non-HTML users to build email, offered enough flexibility to cater to a variety of our content, while also keeping Premier Agent emails visually on-brand.

Results

The efficiencies seen by Marketing has been significant, with Premier Agent emails taking potentially several days to build to approximately 30 minutes by our non-HTML users, depending on complexity.

The pre-built and pre-tested nature of the design systems has meant that rendering is consistent and lacks the previous errors seen previously when building without the system.

The flexibility of the design systems has also allowed the ability for marketing to quickly A/B test our various email verticals, helping us hone in on which combinations of modules within the design system  present our content in a way that resonates best with our subscribers.

Due to having the design systems available, as the developer, I’ve been able to focus on exploring custom solutions for emails with critical business impact. If emails we’ve custom designed and developed had performed well, I then incorporate those emails modules into that particular vertical’s design system.

An additional positive outcome includes the ability to easily reskin the design systems. In October 2018, Premier Agent announced an upcoming rebrand set to launch in Spring 2019. Updating our email channel for the rebrand will require significantly less lift due to the nature of email design systems.

Email Design SystemS

A few of the systems created for specific verticals: Sales, Newsletter and Product Announcement.

Email Campaigns

Email campaigns created using the email design systems.

SALES

The Sales vertical was growing but had little ability for testing. The email design system required flexibility as the team conducted several A/B tests to see what resonates most with our subscribers.

NEWSLETTER

The Newsletter vertical was cancelled in the past due to poor performance and the inability to iterate due to lack of resources. Establishing an email design system enabled a structured way to relaunch the newsletter and A/B test various ways to present content to our subscribers without requiring additional resources.

The newsletter saw evolution as performance data helped inform the team of what our subscribers responded to the most. The refinement of the newsletter from the relaunch to current state was completed without email development support as all available modules already existed within the established email design system.

PRODUCT ANNOUNCEMENT

As a way to help distinguish product announcements, I created an email design system that was still on-brand but included modules that enabled the ability to highlight app or program value props.