Meetup sends out millions of emails a day: member-to-member messages, event recommendations, RSVP confirmations, etc. Neither the designs nor the fragmented template system have changed in years. What if we could overhaul all of it, make it easier to work with in the future, and measurably improve the user experience?
What it is
Email Reform is a framework of design principles for improving usability and engagement across our email templates. Within that framework is a system of centrally defined and coded components used across templates to provide visual consistency, and reduce future design & engineering work. Layered on top of those components is an updated visual direction consistent with our recent rebranding, but customized for the unique challenges of email.
Before committing the resources to overhaul the system, we tested by implementing one of my designs. It lifted engagement by 30% over the previous design.
I led creation of the design framework, designed templates, and worked with one of our senior designers on the pitch that ultimately got us buy-in. Currently I work with product and engineering to prioritize template rollout and fine-tune designs.
To start, I took inventory of our existing email templates. I printed out examples of every email we had, laid them out, and worked to identify the common elements between them.
Simply reskinning emails wouldn't have been too difficult, if time-consuming. If I truly wanted to improve our email system, however, I needed to provide an overarching solution that took into account multiple factors.
- What triggers our system into sending a specific email?
- What’s the user’s goal when they read it?
- What’s our goal for their behavior?
During the inventory, I found that our templates can generally be grouped into 6 categories, each with their own triggers and goals.
Despite the different categories, it was clear that there was (or should be) a common visual language across all of these templates. That's where our responsive components come in.
Creating a component library
Components couldn't consist solely of individual elements, such as a large avatar, that could be used any which way—that's how our original template system grew so disjointed and unwieldy. Instead our components are larger, Meetup-specific objects that consist of smaller elements like lists of Meetups, headers, and Meetup groups.
These components are defined in a synced Sketch library accessible by any designer, and they also exist as centrally coded components accessible by any engineer.
By swapping out various components, we can successfully create everything from invitations to new Meetup group announcements.
Examples within the Social Interactions category:
What about desktop?
An increasing number of users read email on their mobile devices, so I designed components primarily for mobile. For simplicity's sake, components on desktop maintain the same simple layouts—just in a wider column.
We're continuing to gradually convert old templates to the new system, with priority reserved for our most impactful emails.
Because the components are centrally synced and coded, we can easily update them as our design system continues to evolve and grow.