Feb 4, 2011

Redesigning the MailChimp App

Our recent redesign of the application has been a long time coming. We had to take our time because redesigning too quickly with hundreds of thousands of users would leave some folks behind. For that reason, we took 6 months to make slow, steady changes that improve the user experience and lay the ground work for some cool stuff to come.

Last summer we started paring back design elements, trimming code, and eliminating extraneous bits to arrive at a slimmer interface the first version of which was launched in August. Some people took note as subtle changes appeared, but many folks didn’t as it takes a special type of person to notice a change in fonts or slight tweak in layout. Did you notice the shift from Trebuchet MS and Lucida Grande to Helvetica? (Of course you did!)

That wasn’t really the redesign, though. It was the pre-design. Monday night, we launched the next step in our redesign process. It’s still the same ol’ MailChimp you know and love, but with a revised look and a few refinements to improve the user experience.

Unified Experience

We really wanted to create a consistent, and unified experience when you go between MailChimp.com and the application. Though siblings, the two had been designed very separately, which made the connection between them not as tight as we’d have liked. Our talented DesignLab team have been slaving away on a stellar redesign of MailChimp.com (Hey, Madge. You’re soaking in it), and as luck clever planning would have it, the code and design changes we did last year on the app made it easy for the UX team to create a stronger visual relationship between the sites through color, type, and basic style.

MailChimp App Redesigned

Simplify The Header

As part of the design unification process, we rethought the header a bit too. Previously, the global navigation was separate from a top utility bar where account info and logout link were shown. With the redesign, we moved the Account menu into the global navigation because we discovered 8 of the top 20 pages in the app are inside this section. It deserves to sit alongside the other frequently trafficked areas where it can be readily at your fingertips.

Account Menu

We also added a small menu at the top right of the header that shows the username for the account you’re logged into, handy for those of us with lots of different accounts and can’t quite remember which of them we’re logged into. In that menu you’ll find a logout link (a convention adopted by Twitter, Facebook and other major web apps), and your plan details which you can view with a simple mouse hover. When your earn monkey rewards or your monthly plan is upgraded after a bunch of new sign ups, we’ll show you a little iOS style indicator on the menu indicating there’s important info inside.

Go Faster

We trimmed a lot of code during the pre-design and redesign processes. We hopped on the CSS treadmill and managed to cut about 120kb, which means the app got faster, and it’s now a lot easier for us to build out new interface structures whenever we need to.

But sometimes speed isn’t just about code weight and load times. The other bandwidth constraint we face is between our ears. Our brains are masterful at filtering through a lot of info to pick out the salient points, but the more content there is in an interface, the slower we are at getting our bearings and taking action. With this in mind, we quietly introduced an extras on demand approach to our forms. Form fields often require a little help text to guide users as they enter content. If you’ve got a big form with many fields, each with help text of varying length, you can accidentally create an intimidating interface. Since you only need help text when focused on a field, we decided to simply keep it hidden by default, and animate it in just when you need it. Leaner interfaces result in faster usage.

Refined Forms

Little Big Change

Though the end result of the redesign might feel a little dramatic to you, it’s really just the same ol’ MailChimp. For the most part, everything is still in the same place under the same label, it’s mostly just a cosmetic change. I say "just" but we think it’s a change that’s pretty important.

We know that attractive interfaces work better, and therefore a redesign of the app is kind of a big deal. As Donald Norman, a pioneer in usability and human computer interaction, points out in his book Emotional Design, beautiful design creates a positive emotional response in the brain, which actually improves our cognitive abilities.

“Attractive things make people feel good, which in turn makes them think more creatively. How does that make something easier to use? Simple, by making it easier for people to find solutions to the problems they encounter.”

When we tweak the design of MailChimp, we’re not just indulging ourselves in the creative process, we’re working hard to make a more productive environment by making you feel good in the space you inhabit.

Paving The Way For New Things

We had one more thing in mind with this long redesign process: Co-branding. In the not so distant future, you and/or your company will be able to tweak colors and add your logo to make your MailChimp account a cozy, custom little experience. Yeah, we’re always thinkin’.

Now if we could just figure out how to add Kiss posters to reports. Hmmmm …