Modernizing the experience of email blast creation
Product design
Email blasts are one of the most mission-critical features for NationBuilder customers. The power and convenience of having communication tools alongside your people database, fundraising tools, and website have kept this one of the most heavily used areas of the product, despite rarely receiving major updates to functionality or usability. One of the most common customer requests was the ability to customize the look and feel of the entire email without knowing HTML. Only the body of an email was editable with a very limited WYSIWYG, while the header and footer existed as a separate HTML template. The ability to customize email communications to represent your organization was critical yet unfortunately out of reach for many customers.
The ability to modify the look and feel of your email with a drag and drop interface is now table stakes, and we knew bringing such functionality within an integrated system could be especially powerful. But we also knew this would be one of the largest user experiences projects we’d ever taken on, and could only consider it because of our new design system, NationBuilder Radius. It was critical to find ways to reduce risk and manage the mammoth scope by breaking down the work into smaller pieces.
Success would be measured by an increase in NPS related to email, and an increase in the number of custom email themes created.
Design then conducted customer and partner interviews to learn of pain points with greater fidelity. I facilitated weekly internal think tanks to learn from customer-facing teams what issues they were seeing most frequently. We also observed behavior through FullStory. One fascinating learning was that customers were hacking cloning functionality to customize the body as an extension of the theme. Customers would use the limited functionality of the email body WYSIWYG to create a layout using tables, and then endlessly clone the email and replace the content.
We knew the experience of visually designing an email would be best when all unrelated distractions dropped away. A future visual editor would also require maximum screen real estate. A product goal of particular importance was the ability to launch critical workflows from anywhere, eliminating the need to always navigate away from where you were working. Starting work by creating a full-bleed focus state seemed like a way to accomplish both goals. A Product Designer and I created a prototype of the focus state which we tested with a cross-section of customers and partners. We were soon confident to begin work.
A cross-functional team with Backend Engineers, UI Engineers, a Product Manager, a Product Designer, and I operated in two-week sprints, each initiated with a sprint kick-off and concluding with a retro. Our first task was to bring the existing email blast experience within the focus state, with as minimal changes as possible, as organizations were understandably sensitive to retraining their staff unnecessarily. Before long we not only launched the focus state within the existing email flow, but we also brought it to our Automation functionality, where customers could finally customize their drip emails without leaving the Automation workflow. As a way to minimize risk, we also included a link for customers to temporarily access the existing experience as they become familiar with the new.
As we designed the new drag and drop functionality, as well as several other improvements to the email blasting workflow, the design team invested our time heavily in creating a robust prototype within Figma. This allowed us to quickly begin testing complex interactions and design assumptions without occupying any time from engineering. Recording sessions using Zoom with audio transcription enabled allowed anyone to asynchronously search and identify common themes.
One critical early learning was that numerous organizations wanted to use permissions to limit access so regular staffers couldn’t change branding in the header or footer. By creating distinct header and footer blocks which required a certain permission level to edit, we were able to satisfy this demand in a simple way.
Once we felt confident in our prototype, we created a comprehensive spec doc in consultation with the Product Manager which not only guided engineers through all the details and nuances of the MVP, but also attempted to address questions proactively.
While this project is still in development and has shifted to primarily an engineering effort, design-focused beyond the MVP. While I cannot publicly discuss specifics, NationBuilder’s integrated system unlocks unique and powerful possibilities which we explored through various prototypes.
We also designed concepts to address one of the main stressors customers have: accidentally sending an email blast. A simple solution familiar to most people is creating an “Undo” affordance, providing a few moments immediately after submitting “Send” to cancel the delivery. While some of these concepts may not see the light of day, quickly designing prototypes to then gather feedback from customers provided us with data to act on when ready.
Perhaps most consequential—both the focus state and the drag and drop interface are scalable patterns that can eventually unlock dramatic usability improvements across the product.
