Redesigning MailChimp

“Information presented with clear and logically set out titles, subtitles, texts, illustrations and captions will not only be read more quickly and easily but the information will also be better understood and retained in the memory. This is a scientifically proven fact and the designer should bear it constantly in mind”

- Josef Muller Brockmann

We’ve now had almost a month to gauge the response to the redesign, and we feel it was overwhelmingly positive. We’re glad so many people tweeted feedback, concerns, likes, dislikes and in general just cared enough to express an opinion at all. Thanks so much for that. We thought it would be fun and hopefully informative to share some insight into our motives and to dispel any notions that the redesign was purely for cosmetic reasons.

First and foremost, we approached this project out of a necessity to better organize the ever growing mountain of information and resources that our site provides our users. We were very cognizant of the fact that if we embarked on this path, we had to carefully consider how to balance our playful image with our powerful product. MailChimp helps 600,000 people send 40 million emails a day–that’s a serious business. Finding this balance was the most challenging part of the entire undertaking. While it was a major visual change in almost every way, at its core it was really just the first step in improving communication between us and you.

Establishing Conventions

At the outset we knew our responsibility was to succinctly and elegantly organize a lot of content into a visual order. To generate an order we had to establish a set of conventions for typography, color and illustration, and construct a grid system that could house all of these elements. MailChimp needed the design to create a familiarity and consistency for the user from page to page. In addition to constructing an organized, legible and infinitely adaptable site, these conventions also had to communicate reliability to the user and foster trust.

The biggest challenge of designing for the old MailChimp site was the lack of an established direction. A designer tasked with creating a new page for a new feature, for instance, had no starting point. There wasn’t an existing grid, spacing, type style…nothing. Meta, Helvetica, Gotham, Lucida Grande, Georgia, and a handful of other typefaces were used freely everywhere. The site was a bit scatter brained and lacked a singular voice.

So our first step was to create a grid that would act as a foundation for organizing the content. Using a grid helped us quickly organize pages and presented us with an array of different layout options. We opted for a simple 4-column grid because it was flexible enough for our goals, but also simple enough that any designer or developer could easily pick it up. Having a set structure early on proved to be indispensable and allowed us to get through all subsequent challenges quickly and efficiently.

We used Helvetica. Only Helvetica. Helvetica…there, I said it. We craved consistency, and we wanted to use a typeface that was adaptable and neutral. We needed a workhorse that could be used in big bold headlines, smaller subtexts and even smaller body copy. Helvetica just made perfect sense for us and lined up with our goal to simplify. By limiting ourselves to 5 different sizes throughout the entire site–90pt, 30pt, 20pt, 15pt, and 13pt–we were able to establish rules for hierarchy and resolve questions about the use of typography on the site.

MailChimp has a history of great illustration. Jon Hicks designed our mascot Freddie, who’s currently bigger than ever on the homepage, and our own Ron Lewis has done many variations on Freddie in the past couple years. We saw an opportunity to extend that rich history by creating a library of new illustrations. Linda Eliasen and I worked closely to hash out a style that we could both adhere to. And just like we addressed the typographic problem, we sought to create a simplified style of illustration.

The end result has allowed us to branch out in our ad campaigns. For example, the slide above is from a recent Creative Mornings event with Milton Glaser. We also wanted to give Freddie a much needed rest. We promise he’s not going anywhere, though—he looks better than ever on the new color palette.

In the past, we played it safe with washed-out colors like tan, yellow, beige and brown. Color became an important part of the new MailChimp. In a way we felt like we were waking up the brand. This new palette really allows us a greater flexibility to experiment and grow the brand into the future.

The most awesome aspect of this redesign is that it’ll always be a work in progress. Rest assured that every day we’re looking for ways to offer an easier, more enjoyable experience for you.