Mar 28, 2012

Refining the Templates and Campaigns Interfaces

With the recent 7.0 release of MailChimp we’ve made some changes to the Templates and Campaign Builder sections. The traffic statistics of these two sections made it a particularly scary challenge for the product design team. Campaigns and Templates respectively are the third and fifth most trafficked areas of the app. It’s no surprise why. They’re the heart of MailChimp. Making changes to such critical parts of MailChimp while more than a million people are using it is like wrenching on a 747 while in flight. No pressure.

But rather than standing paralyzed in fear (okay, there was some paralyzed standing around), we forged ahead to try to solve some problems we’ve seen users struggle with. Last year we conducted usability tests on the Campaign Builder and Templates sections to see what we could do to speed up the workflow for existing users while helping new users get their bearings.

We’ve watched people click the back and next buttons in the Campaign Builder repeatedly as they navigate back to a step where they’ve made a mistake or needed to make a quick change. Click, the page loads. Click, the page loads. That cycle gets frustrating and slows down your workflow. The progress bar at the top of the page in the Campaign Builder has always let users navigate non-linearly to a specific step, bypassing the cycle of clicks and page loads, but few people realized it (figure 1).

Figure 1: The old Campaign Builder header with no clear indication that you can jump nonlinearly between steps.

The new header in the Campaign Builder (figure 2) now includes labels describing each step and the button treatment gives a better indication that it also works as a navigation system (we interface designers call this affordance).

Figure 2: The new Campaign Builder header showing step names.

We’ve been adding a lot of templates as of late—197 in the last six months to be exact. We also offer a lot of nice options to import templates, code your own, or just customize a basic layout. Some users became overwhelemed with the options, especially those who were new to MailChimp. We’ve created clearer template pathways (figure 3) that will guide both novices and pros as they create their campaigns and templates.

Figure 3: Clear template pathways in the new Campaign Builder interface. These pathways are also now in Templates.

Though adding a lot of new templates to MailChimp helps people design sophisticated communique, it comes with a price. The more templates you add, the harder it becomes to find the right one. As our first step in helping people browse through templates, we’ve added filtering options (figure 4) so you can show only the categories that are relevant to you. We’ll continue to simplify template discovery in future releases.

Filter Template Categories
Figure 4: Filter template categories down to just the ones that are relevant to you.

In our usability test sessions we noticed that templates, in general, were a point of confusion. We heard more than a few users ask "What’s the difference between a Template and a Campaign?" Veteran MailChimp users know that Templates are reusable layouts that establish your branding. Campaigns add content to an instance of a Template. This concept is pretty central to getting your bearings with MailChimp, so we’ve added an educational block in the Templates and Campaign Builder sections to explain (figure 5). Dismiss it, and it’s out of your way for good.

What's the difference between a template and a campaign?
Figure 5: What’s the difference between a Template and a Campaign? A new help block explains, then gets out of your way.

You’ll find that the Templates and Campaign Builder sections are awfully similar these days too. Now you can select one of our Designer Templates as the starting point for your Template, add your branding, tweak some colors and save as the starting point for future Campaigns.

We’ve got more on our mind after watching people using Templates and Campaigns. Gentle iterations are our aim as we make improvements. We don’t want to leave our devout users in the lurch. We just want to continue to make MailChimp as easy as it is powerful.