John Quealy

Email at NationBuilder

I was responsible for improving the user experience of email and increasing the value of sending from our platform.

  • Product Design
  • Product Strategy
  • User Research

Overview

NationBuilder is the most widely used community organizing software in the world, powering everything from local nonprofits to first-tier presidential campaigns. Because email is an essential part of relationship building, the average customer sends at least three emails a month. That means any friction in the process can amount to a lot of pain and frustration for users.

I was the product designer on email at NationBuilder for over four years, but this study highlights work done over one particular quarter of two-week sprints. I worked alongside one product manager and a handful of engineers.

Problem

Despite being one of the most used features of the product, customer satisfaction with email was relatively low because the content editing experience had fallen far behind our competitor’s. We needed to improve the user experience while also increasing the value of sending from our platform.

Before: Content editing and previewing was separated between multiple screens.

Solution

Our objective was to improve the editing experience by reducing the time and complexity of creating and sending emails. We decided to focus on making it easier to add images, call-to-action buttons, and personalized content because they are the most effective ways to move supporters to action ― our core value proposition.

After: The unified editing and previewing experience allowed users to see their changes in real-time, providing confidence in how their email would look.
We were also able to incorporate a lot of user experience and technical debt improvements.
  • Updated the email flow so that it could be completed in any order, no longer forcing users to select recipients upfront
  • Created smart fields, a user-friendly UI to obscure the Liquid programming language
  • Introduced the ability to create buttons with the editor, removing the need to include images created elsewhere or fiddle with tables
  • Unified inserting content through an "+ Add" interaction, removing the need to memorize icon buttons
  • Added in-line image uploading directly to the editor, removing the need to upload images to a separate files section
  • Upgraded to the latest version of our WYSIWYG software across all areas of the platform

Outcome

Our email improvements led to a 40% reduction in the time it took users to create an email. And we found that emails sent using our new personalization tools raised 30% more from donors!

"SUCH AN IMPROVEMENT. Being able to see what your email looks like NEXT to the editor? Groundbreaking."
- NationBuilder customer
The most exciting, important product release since I've been at NationBuilder. Yeah, I said it. This is going to be absolutely game-changing for existing customers, and for acquiring lots of new ones. Inspiring work. Thank you, thank you, thank you.
- NationBuilder Director of Sales Strategy

Details

Understanding our Customers

To gain a better understanding of how our customers used email, I collected over 50 responses to a survey about their typical email workflows. I then personally invited 10 of our users to walk me through their process and show off some example emails.

From these interviews, we learned:

Defining the Problem

“I just want to get the email out with as little effort as possible. I don’t have a lot of time to figure out how to design them!”
“Most of our emails are an image, two sentences, and a click to learn more — even this is hard in NationBuilder.”
“It takes me 6-9 hours to assemble each email despite the fact that they all typically look the same.”

From my discovery research and some investigation using product analytics (FullStory), I was able to identify these key pain points for users:

Constructing the email editing user journey allowed us to indentify opportunites for improvements:

Setting Ojectives

To narrow our focus and scope, we decided that our goal would be making it easier to create the typical call-to-action email that most customers were trying to achieve. Call-to-action emails expressed the highest value of using NationBuilder's integrated platform over a competitor.

We hypothesized that making it easier to add images, call-to-action buttons, and personalized content would allow customers to create more effective emails faster.

We decided our success metrics would be:

Exploring Ideas

We heard from users that they wanted a drag-and-drop style editor, something more similar to what they were used to from competitors like MailChimp.

So I designed, prototyped, and user tested some different concepts for how we could achieve a more guided content editing experience.

A stacked layout resulted in tedious scrolling between the content, save, and preview functions.

A content blocking concept had the most favorable reaction, setting a north star for where we wanted the design to end up.

Refining the Solution

The primary problem we identified when talking to customers and watching their behavior in FullStory was that it was difficult to understand what an email was going to look like while editing content. Users wasted a lot of time navigating between the content and preview screens while editing their emails.

So we introduced a new layout that brought the editor and preview side-by-side, enabling users to understand what their email was going to look like while they were editing content.

Users had to start from scratch every time they created a new email, even though they typically sent similar-looking emails.

We introduced the ability to start a new email from a previous one, enabling users to effectively create their own templates.

Users felt they didn't have the time or ability to learn how to use Liquid to personalize their emails, diminishing the value of using our integrated platform.

We introduced smart fields, a visual interface that made it easy to personalize email content for each individual recipient.

Users found it difficult to create reliable buttons, despite being an important part of most call-to-action emails.

We introduced a feature that allowed users to easily insert buttons directly from the email editor toolbar.

User Testing

I conducted user testing in order to measure the impact of our changes on the email flow.

Prompt

Participants were given an example email to recreate which included adding an image, personalization, and a call-to-action button.

Result

After conducting this test in both the existing and updated experience, we saw a 40% reduction in the time it took to complete the email when using the new flow.