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.
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.
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.
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 …
So great and refreshing!
Colors?
Though you have made significant improvements to the interface and experience, the colors distract me from seeing any of that. I’ve been waiting for a blog post to provide the reasoning behind the coloring that reminds me turning on invert colors under Mac Accessibility options.
I truly miss the warm inviting feeling of mailchimp that now appears cold and abrasive. On the bright side, I am glad to hear you will be offering some limited theme customization to catch up with Campaign Monitor in that department.
Look forward to further posts to clarify the interesting approach to color on your site. Thanks!
I agree — I really like the old colors. The new site really lacks something in warmth that the old one had.
I agree with Christopher 100%. Don’t get me wrong, I absolutely LOVE MC and “beggers can’t be choosers.” In other words, as a free customer, who am I to criticize at all. That said, hopefully our comments can help improve MC which is why I write.
I do think the new colors are very distracting, too bright/offensive to the eye, cold, and heavily detract from your logo and areas that are functionally important to the app. The clean, simple, muted colors that MC used to have (the beige and yellow tones) made me take MC more seriously and feel warm fuzzines when I went on the site. The current colors make the site look a bit like a circus parade and you don’t know whether to look at the clown or the chimp! In other words, the discordant colors are agonizing to the brain, causing me to think there is something wrong with the page/site and not focus on the application itself. It also lacks the warmth the old colors conveyed. Beauty is definitely in the eye of the beholder and these are just my opinions. But I’d recommend the seminars led by Leatrice Eiseman who is “the” color expert in our country, or else read one of her many detailed books on color. She also heads the Pantone Color Institute and you can hire her for consultations. I think the team did an excellent job in redesigning the site. It goes without saying that MC has by far the most technically superb and advanced product. It’s just the colors that are used to communicate your product that may push people away/cause them to take your site less seriously. Especially since your logo and company name are already a bit non-traditional (although I personally do love both), it might make sense to use colors that convey harmony, stability, permanence, and warmth, rather than discord and trendiness. Otherwise the new site is excellent! GOOD JOB MC!
Loving some of the things going on but the dashboard is still a bit messy. Here’s a screenshot for you to illustrate a couple of what I hope are quick fixes (from Safari 5.x … latest release): https://img.skitch.com/20110204-1dpsfpkrfdsk1mupn4hiq8fg9n.jpg
Awesome redesign! I noticed it the other day when logging in and thought, “This is so much easier!”
I definitely agree about the colors being a bit harsh and distracting. The warmth of the colors used before was much nicer to work with than the new template.
Aarron, I love the redesign. It’s definitely nice and crisp and even happier than what it was like before. The only disappointment for me is the absence of MailChimp monkey in header. I see him in screenshots but not on the actual site.
Bring the monkey back, please! :)
Perhaps you have Party Pooper mode on? Go to Account > My Defaults to check. Freddie is still there!
There he is! Horray!
Thanks Aarron! I’m relieved that Freddie is back in life again! :)
Sorry chaps,
just do not like the new colour. I find it depressing. Please go back to the orange.
I have now sorted out where you have moved things to, but it would have have been nice to be warned about it.
Other than that, you’re great!
Best wishes
Neil
I miss Freddie!
Hey, Kyle. See my comment above. Maybe you just have Party Pooper mode on.
Hey Ben,
Love the new interface. I just received an email from SurveyMonkey today that had some sort of moving flash slideshow embedded inside it. Did they use MailChimp? (Here’s the link: http://bit.ly/hL1jvR) Is this one of the “new things” we can expect? Do tell! Have a nice weekend chimps.
Eep eep,
Justin
Not sure if it was sent via MailChimp, but that just looks like an animated GIF(?). MailChimp (or any ESP, for that matter) will send those files fine. There are, however, some interesting developments discussed here: http://www.magillreport.com/Biggest-Thing-to-Hit-Email-in-10-Years-Expert/ But it appears to be under beta for most of those inbox providers.
Thanks Ben, I learned something new today!
We definitely hear your concerns about the changes in the color palette. But you know what? We received just as many complaints about the previous color palette too. In our daily lives we often approach design with a subjective perspective, and as such there’s no winning when designing for the masses.
In our team, we base our design decisions on psychology, and science. We went with an analogous color system with a single compliment in the redesign for good reasons (http://en.wikipedia.org/wiki/Color_scheme). Analogous colors let us easily draw attention to particular elements in subtle ways. For example, the teal buttons you see on the dashboard have visual contrast in the interface, communicating their importance among mostly greyscale elements. The watermelon color of the “Create Campaign” button is a compliment to the header blue, which is visually appealing (not my opinion here, colors opposite one another on the color wheel always work together, hence the name “complimentary”). We use that color sparingly to clearly communicate primary actions in a page.
So why blue? It’s statistically the most appealing color, it communicates wisdom, trust, it’s peaceful, and relaxing. People spend *a lot* of time in our app. We want our users to stay chilled out when they’re busy working on their next campaign, and we want them to have the relaxed psychological state when they contact our support team so we can help them better. The blue is not a corporate, suit and tie blue, because that’s not what MailChimp is. It’s got slightly higher saturation with a little more white in it. It’s similar to the Simpson’s sky blue, and there’s nothing more uplifting than a blue sky.
Even though you know a bit more about the reasoning behind our color palette change, chances are you still might not “like” it. But rest assured, we have your best interests in mind. Here’s the happy ending, though. As I mentioned at the end of this post, we are working on Co-branding, which will let you tweak the app colors and add a logo. It’s like a game of hackie sack. Everybody wins.
Incidentally, if all this design talk has you wanting to critique more, you might want to read this article I wrote about “The Art of the Design Critique”: http://thinkvitamin.com/design/the-art-of-the-design-critique/. Thanks everyone for the feedback and discourse. We appreciate it and look forward to hearing more from you.
As a designer, I do understand wanting to make things fresh, etc.
As a business owner and self-proclaimed marketing expert, I thought your previous colour scheme married to the idea that even a monkey can deliver mail was unique and funny… giving mail chimp a great brand identity. Now you look like one billion other sites…
HUGE MISTAKE
Me too! I want old colors back :)
I would just like to say that i think the new layout, colours, typography.. everything is simply fantastic!
You cannot please all of the people all of the time =)
Keep up the good work, I think this site is friggin’ awesome!
Absolutely brilliant design.
Didn’t like the old one at all.
I dig the colors. I use this at work and it looks less like I’m playing. I also dig your take on wanting to chill us out a bit. When I get frustrated with Mailchimp I don’t want all this happy warm toned crap smiling at me while I can’t figure out what I’m doing wrong.
I enabled Party Pooper mode and turned the Chimp off. The poor thing should not need to live in this cold ice world.
White text on a light turquoise background in the subscriber chart. tsk tsk tsk :-)
From a functional perspective MailChimp is almost as good as ever, just let me switch the colours back. It is all CSS, right?
What you don’t know is that by enabling party pooper mode, you’ve sent Freddy to a tiny dark closet with spooky eyes and strange noises. He much prefers the sky blue header and he’s begging for you to let him back up there. Just sayin.
Also, the white text on the subscriber chart hover bubbles was an oversight. It’s been fixed already and should be live shortly. We deserved those tsks.
Is that what the black page footer is? Freddy’s dark closet?
The footer is merely #191814, the place where Freddie has to go when you turn on party pooper mode is much darker. :)
+1 for the old colors.
I agree with some of the sentiments on color. It’s a bit weird. An analogous color scheme, really? Maybe it’s great for print, but for a interactive website with call to actions, and links? I’m concerned that it’s taking away from usability, not adding to it.
Like you’ve used the watermelon color on buttons, then in secondary links, and then sometimes in the background. Seems like a confused hierarchy of information design to me. Yea, perhaps I’m too strict in my adherence to using specific colors for specific cues.
Overall great design and experience. I like the simplified header. And as always as a company Mailchimp, you continue to astound and impress me in every way.
I appreciate your brief run through of your methodology on your color choices. I believe you have the theory correct but did not follow through in practice.
That is, yes analogous color schemes certainly can work well for the reasons you choose. Even the colors you mentioned and your reasons for choosing them can work. However, as we all know all blues are not created equally (or any color for that matter). It’s your particular shades that you choose that are unnerving.
And as a user (for me) they do the exact opposite of your intentions. Rather than a chill relaxed feel, they make me anxious and give me a head ache. (a literal headache).
So overall I think the warm inviting color palette was perfect, but I can understand choosing another color palette even if it’s worse like a dark haired man going through a mid-life crisis and coloring his hair blonde. But if you choose an Andy Worhol color approach please turn the colors down.
In the end hearing you have our best interests assured is disappointing. I currently have an account with MailChimp and CampaignMonitor which I have been going back in forth between. Campaign Monitor for features like managing all client accounts under my own domain and MailChimp because of their site layout and beautiful colors.
As the color disruption is so bad for me I will be completely leaving MailChimp for Campaign Monitor. Sure, this does not matter much, but for your remaining customers please be sure to to listen to their comments and see if they truly are inline with what you consider best for them. Thank you for your time.
I think what Christopher said is spot on.
Color theory is all well and good, but there are thousands (if not hundreds of thousands) shades of blue that have other analogous colors. Why the ones you guys chose?
Additionally, the statement that you guys have our best interests at heart seems a bit…presumptuous. The implication is that we don’t really know what we need, and that MailChimp knows best. I understand that there’s often a knee-jerk response to change, but that just doesn’t seem to be a great way to handle it.
Unlike Christopher, I won’t be leaving MailChimp (yet), but this branding shift (and response) does disappoint me.
Hey, Rob.
Really what we’re trying to communicate with this long post and further explanation in the comments is that we’re working hard to make the app experience the best we can. Sorry if that was poorly communicated. Feedback like you and others are sharing here is *truly* valuable to us, so thanks for taking the time to share it.
I agree with Christopher about the shade selected and this is such a fascinating discussion because what stymies me is that there are just as many people on the discussion board saying how much they love the new color scheme. I mean, do those people have saturation nearly turned off on their monitors? Are they really seeing what I see? Do they not get the same headache that Christopher and I do from the discordant colors on the new site? Beauty is definitely in the eye of the beholder and there are many examples in fashion where someone wears royal purple with a seafoam green blouse and I’m like “WHAT?” yet they are featured on the “best dressed” list in a magazine. I guess I’m confused as to why others not only don’t see what I see, but how they could be so drawn to the color scheme and love it. Please realize that I’m not asking this question arrogantly as if I’m right–I’ve been wrong plenty of times and this discussion is all about personal opinion and perception, anyway. I’m asking it because it gets at the fundamental question of how two people could see the same thing yet have completely opposite reactions to it. In this case, the opposition is strong–we strongly dislike it while others strongly like it…how could that be? And how can a company ever “get it right” in their branding and color schemes if there is such a difference of opinion among an audience? Philosophically speaking, Catherine
If we’re a webmaster for multiple clients, is there a way to toggle between the accounts we manage without a logout/login each time?
Right now, you can use account keys to link accounts under a single login http://kb.mailchimp.com/article/can-we-have-multiple-users-on-our-account-with-limited-access. Your comment sparked some discussion in our team about how we can make that a little easier. Stay tuned.
I love the new colors, keep up the good work!
I’m wondering why you remove the navigation bar from the sign in page? I’ve seen it done on many other web apps but I’m not sure the purpose… I know it’s a good idea on checkout and registration pages to decrease the possibility of people clicking off and guiding them through the funnel better but why on a log in page?
Most of the changes to bring the site up to date are good, but the colors just ruin it. I can’t look at the site for too long now, due to the harsh contrast in the colors, the blues and the orange are too bright, then you have the new orange, gray diagonal lines that vibrate, then the mint green!? I mean, what is going on? The subtle blue and yellow colors that made the brand are now gone and the Chimp seems like it doesn’t belong. I was very surprised by these color changes, just as I would be if Pepsi suddenly changed their colors form red and blue to orange and green? Remember how upset people were when they changed the Gap logo? They had to change it back almost immediately… Please revert to the warmer colors you had before, so that we can then appreciate all the new features, fonts and changes! And please put the Chimp back up there next to the MailChimp logo!
Awesome design guys. I’m luvin’ this :)
Keep up the good work!
Mailchimp ftw!
I LOVE MC and everything you do, but I was surprised to see a change to such a messy and cold new dashboard.
Even the login screen is messy now, with the ‘login’ button appearing over the social links.
I’ve also found some columns in my templates taking on a new wider width and have had to redesign some of them.
And I’m not sure what all those missing images of people are going to add to my experience when I look at my dashboard.
Thanks for taking the time to explain the decisions but your, “you may not think you like it, but we know what’s best for you” explanation had me scratching me head a little bit.
Hey, Russell.
The issue you described with images on the dashboard is a know bug that will be fixed shortly. Sorry about that. The login issue is new to us, though. Would you mind sending us a screenshot and browser details via support? http://mailchimp.com/support/
Nice but there are some basic navigation elements missing (or maybe I couldn’t find them!). For example how can I go back to my campaign list when editing a campaign. I don’t want to save, just to go back to the list.
The navigation in the campaign builder is the same as it’s always been. With each step in the process, we automatically save for you. The “save & exit” button will actually take you right back to the campaigns dashboard.
I absolutely love MC. The old was great. The new is fantastic! I’ve been using MC for about 4 years. With that in mind, I never really had any issues getting around in the site or the interface. Even so, you guys found a way to make it even better and easier for an almost daily user. I set my mother up with an MC account a couple of years ago to help market her gift shop. She constantly had questions on how to do this, that, or the other. However last week I received a call from her, letting me know how much nicer the new MC was. She said it’s easier to use, better organized, had some nice new features and even seemed to run better. With these sort of comments coming from a very Internet illiterate user, YOU GUYS HAVE NAILED IT! Hopefully now I won’t have to play the role of tech support/customer service near as often! And for what it’s worth, I like the new colors. Sometimes a big change like that is shocking. But overtime, people grow to love it. I’d be willing to bet the next time you all change them you’ll get the exact same comments. I look at as it’s the same Frankie, he’s just changed clothes a little. Nice work!!
As a first time user on Mail chimp I was disappointed on how confusing this was as well as frustrated- and it seems like it doesn’t respond well to PC’s. I remember looking at mail chimp a while back and it looked really simple quick straight to the point and easy to understand, but this was not at all. I started the account today and canceled today.. hopefully it goes back to simplicity.
[...] brings it closer to “intuitive” for me.What’s even better is that they’ve shared some of their thoughts on the redesign as well and you could probably learn a thing or two, and it’s definitely [...]
One more moan (for now). The animation of the ‘List Growth’ chart is also very slow, which is quite annoying as I look at the current month for the number of new subscribers / List Import so far. The ‘current month’ is the last one to slowly animate in.
Would be nice to speed it up again or disable the animation when running Party Pooper Mode.
I am among those who liked the old colors. In my opinion, they just went better with the monkey theme. The colors were energetic; the new ones are dull. Have you ever seen a dull monkey? Well perhaps, if it’s old and about to die… No!
But anyway, my main issue with the redisign is that I can no longer access MC using Chrome! It’s been like this since the redesign. The home page just keeps loading, never showing the monkey picture. Chrome eventually tells me the page become unresponsive and asks me to kill it. It works fine using IE. I’ve just emailed your tech support, I was just wondering if anyone else is having this issue. Thanks!
We’ve not seen any Chrome issues on our end (we use it a lot in design and development), but if you could provide us with a little more insight, we can try to troubleshoot. Could you fill out this form? https://mailchimp.wufoo.com/forms/chrome-issues/
Thanks in advance for your help.
I also don’t really like those new colors. Everything seems more technical now ;( Especially the big black part at the bottom. For me, there are too many different design elements (top to bottom: orange, grey, black, deep black???).
Besides that I like the new structure, the way information is displayed and the main navigation.
Another thing I don’t understand… Opening the first page of mailchimp.com there is almost no information about what MC actually is or does. Only the html title tag tells me something about Email Marketing. Also the part “what is MC” just comes up with a single line “Publish and Share Email Newsletters”. So what I notice from first sight is “Still free but bigger”, “Customer Stories” and “Templates”. Nothing about email, nothing about campaigns, nothing about online software. I think there should be a short but big info telling what you actually do. Or do you think everybody visiting your website already knows?
Looks great guys… I like the new design even though I’m a new customer and never saw the old one! One thing though, does your embed ajax form not work with wordpress? I could get it to work on a local html file but on my site the ajax never loads.
it’s probably conflicting with other javascript files in your wordpress installation, try disabling all of your plugins one by one and see if deactivating any of them gets the form working.
You might be experiencing a JavaScript code conflict with another plugin you have installed. Take a look at our WP plugin form to simplify things: http://wordpress.org/extend/plugins/mailchimp/
Excellent, I noticed that you just released an update addressing the animation speed of the charts. The white text on a light blue background has been fixed as well.
Hopefully the situation with the colours will be addressed once the ‘custom branding’ feature is rolled out.
PLEASE make the home page — or at least ONE commonly-used page on the site — SKINNABLE.
THEN please make a skin that looks like KISS!! (from the cover of the wonderful first album — KISS KISS.
Thank you :)
yes, i noticed the helvetica because it made me vomit. why don’t you put some nerd glasses on that chimp as well? just sayin’.
Blah blah blah… MC, I love the new design and colour palette.. Simple retro styling of yesteryear. Not distracting, not abrasive and certainly not a step back on anything done prior.
Well done on simplifying MC more than it already was. Kudos!!!
Love the design, love what you do and love what you help me do
Top bannana Freddie, keep the good stuff a coming!
I am glad you are going to make it easier to add a company logo. It would also be nice to be able to design a compnay template for all communications so image identifcation and branding is established.
Keep up the good work and I like the fact that your going to add more templates for those of us who are not graphic artists by birth !
All templates are customizable so you can include your logo. They also automagically grab your website’s colors and styles, if available. What kind of trouble are you having w/customizing?
[...] looked right on our bright yellow header. This is something we kept in mind when working on the app redesign and we’re excited to announce that with our latest you can now customize the design of your [...]
[...] might have noticed that we updated the mobile version of the app when we redesigned the app earlier this year. The original mobile web app was released back in 2008—it was time for an [...]