Redesigning MailChimp

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 recentCreative 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.

Tagged

The new design is a breath of fresh air! You managed to keep MailChimp exciting and simplified the site at the same time. Some of my favorite improvements include:

• The consistency of using a palette even in site illustrations
• Readability improved actually making me want to read more text -even over a repeating pattern
• Reusing and merging layouts when necessary makes digesting content easier because it feels more familiar
• Love the author pictures, though it kind of begs for a roll-over name display

Thanks Justin! We looked at a lot of different grids at the beginning of the process and came to the conclusion that we could make everything work on a simple 4-column grid. We opted for our own grid system built upon OOCSS grids, but that happened after the initial design. For more info about that, check out Stephen’s post about building the site. I’m pretty sure we ended up initially basing our grid on the Golden Grid template, but then we modified the gutters and margins. The Grid System has been a good resource for me in the past, as well as Grid Systems in Graphic Design by Josef Mueller-Brockmann.

Happy Cog has been great. They’re really helpful and quick to respond if we have any questions.

Love your new design! Modern and following a lot of current trends in design.

Do you guys sometimes feel you are fighting the perception of being too frivolous, not for serious business, because of your name and brand elements? I love it personally, but I have seen where some of my clients act like it might not be a serious company when I promote Mailchimp to them. They dont get it.

Recently, through some stroke of (bad?) luck, I was invited to attend a small roundtable of CIOs who were going to talk about technology in the cloud. I haven’t attended a meeting like this since we switched our focus from running a web design consultancy to running MailChimp. In fact, I’ve structured my entire business (and way of life) specifically so I would never, ever, have to attend such meetings. I much prefer random meetings with customers. Anyway, at this meeting, one CIO said his company could never trust any kind of hosted, or “cloud” based company, until the Obama administration finalized their stance on cyber warfare. Uuum, that, to me, sounded like an extremely elaborate excuse not to get any work done. The other CIOs talked way too long about how they were grappling with all their corporate red tape, and so couldn’t outsource anything for the foreseeable future.

This is when I remembered why we decided to focus on selling stuff to people who can simply reach into their backpocket, pull out their wallet, plug in their credit card number, and *just.buy.it.* So re: the people who don’t get it, we don’t waste our time with them. Those people are the reason we have a ginormous chimpanzee on our home page. But you know what happens? After a year or two paying thousands of dollars per month at somewhere ‘more serious,’ they start to wonder, ‘why am I paying so much for something that a chimpanzee can do for me?’ And they switch. They usually turn on party pooper mode: http://blog.mailchimp.com/party-pooper-mode-how-to-hide-mailchimp/ or they can now use co-branding: http://blog.mailchimp.com/introducing-co-branding/

But in general, we don’t care much about looking serious. We think people work all day and all night non-stop nowadays, so somebody needs to make work a little fun. :-)

I was just thinking this has to be one of the best looking websites right now. I love it, clean, bright and super easy to read. Great job, I actually don’t remember anymore the old site… I remember the console style loading intro, which was beyond cool.

Great job. I really appreciate the humor in the site too…

Offtopic: One thing I don’t really get… Can one import html in a new template and then edit it as any other template? I didn’t manage to do so…