The following is bonus content from my chapter “Redesigning With Personality” from The Smashing Book #3 from Smashing Magazine.
With clarity on personality and voice, the MailChimp DesignLab team set out to redesign the outdated website in the fall of 2010. With carefully chosen language it’s plain to see how personality is expressed in writing, but how can we wield the basic elements of design to further clarify? That was the challenge Ron Lewis (@seriousron), Mark DiCristina (@markdicristina), Aaron Robbs (@aaronrobbs) and crew faced when redesigning MailChimp.com.
Website redesigns all start with a common desire. Tear down the old to make way for the new. That was the sentiment held by Senior Designer, Aaron Robbs when he began working on the site redesign.
The theme of the redesign was that we were going to simplify everything. On the old site we had tons of different type faces, the navigation wasn’t always in the same place, there was no consistency. I thought, if I’m a user this doesn’t seem trustworthy. We wanted to instill in users a sense of trust through consistency, consistent typefaces, and by getting everything on a grid so you know where to expect things.
The old website wasn’t shy on personality (figure 1). In fact, it had too much personality. With so many colors, fonts, and layout styles, the personality felt a little schizophrenic. The lack of consistency muddled perceptions of the personality.
Rather than diving directly into the redesign, the team started with a simple little exercise. They tried to simplify the core messages of the site and the design personality into a single page. As Marketing Director, Mark DiCristina, describes, it was a liberating experiment.
We just wanted to burn the whole site down. It felt really good to imagine we didn’t have all this baggage to carry into the new site. By starting with a single blank page, we were able to ask ourselves, ‘What’s our core message?’
That one page helped us transition into new ideas about the site. We were able to strip down the navigation to the essentials. We got rid of a lot of things or recast them so it was simpler. Then we tried to be strict about what made it back into the site.
From a single page you can start to identify the key elements of a design and reflect on their relationship to brand personality. Grids, color, and type were on Aaron Robbs’ mind as he worked on the one page exercise. Though his design sensibilities tend towards Modernism inspired rationality, Robbs was conscious of how the austerity of this design ethos is at odds with the informal personality of MailChimp.
I’m a big proponent of modernism and minimalism. If we stripped it back to a four column grid and one typeface, we had to do something to bring the personality back in and take that harsh edge off. Modernism can be very sterile and empty and cold, but that’s not MailChimp’s personality at all. We thought it would be cool to put in these splashes of color, big typography, and use illustrations as a way to expand the visual vocabulary that would give our chimp mascot, Freddie, new elements to relate to.
The utility of a strong grid and the classic simplicity of Helvetica kept the design team’s focus on messaging, while the rich color and distinct illustration style conveyed personality. Creative Director, Ron Lewis, wanted to be selective about where personality was expressed in the design so it wouldn’t come across heavy-handed.
Helvetica goes with the color palette and illustration style, it communicates well and gets out of the way. We chose Helvetica because it has no personality. We already had a lot of personality in illustrations, and copy.
As Mark DiCristina explains, personality can also be conveyed by the things you don’t include.
There doesn’t have to be a lot of hand waving. The personality is in the colors, and our plain-spoken language. We try not to use marketing jargon. We try to make the layout simple.
A website is like a living space. When you walk into someone’s home, the space shapes your perception of them. We’re trying to create a place where people feel we’re trustworthy and competent, but also that we’re humans. There’s an ambient quality to design that influences a person’s perceptions and shapes trust.
The original website had almost no photography. In a few areas, stock photography was used, which made some pages feel generic and impersonal. Stock photography is a design crutch we all use at some point either because we don’t have the skills to take our own photos, or we don’t have enough time to do it the right way. But real photos of the people behind the website are a powerful tool to convey personality, and honesty in your design.
Do you remember the individual stories shared by GE employees mentioned earlier in the chapter? Those videos are portraits of people with a deep love for their work, not a corporation with mysterious intentions. Because humans are good at reading the emotions of others, we can develop a sense of trust and a common bond when a company tells the stories of the people behind them. Video and photography are both well suited to expressing the personalities of individuals and the brand that unites them.
Photography played an important role in the MailChimp site redesign, Mark explains.
The idea with the photography is that it’s supposed to be transparent. It’s very lightly edited, but for the most part it’s just a straight forward portrait of real people in real life situations.
In areas like the customer support page and the blog, photography illustrates sincerity in the people behind the brand (figure 2).
After countless hours of scrutinizing design, content, and brand personality, the redesign of MailChimp.com was launched in January of 2011. The design team watched Twitter with trepidation to see how the new design (figure 3) would be received.
Though the general consensus was positive, there was immediate response to the randomly displayed content feature at the top of the home page. Each block showcased a different feature of the app instead of simply showing a giant image of Freddie the Chimp as the previous site had. Ron Lewis quickly picked up on the criticism.
When we launched the site, we didn’t have Freddie at the top, and we got reamed on Twitter for it. People just really respond to Freddie. We learned that we can’t mess with the Chimp! He’s such a big part of our personality.
After switching the header to include a big Freddie illustration and some straightforward copy, the negative tweets subsided. Though supportive tweets make the design team feel good about their work, it’s the analytics that speak to Mark DiCristina.
Signups and site traffic have doubled since the redesign. Sure, external forces have influenced things too, but the redesign is a big part of that.
No redesign is perfect. There are always lessons learned that inform the generations of redesigns to follow. With the MailChimp.com redesign, Mark and his team learned about the balance between personality and usability.
One thing we’ve learned in the redesign process is how to balance our personality with the user’s needs. The big illustration on the features pages are a big hit with people, and they convey a lot of our personality, but they don’t convey a lot of information. So we’re in the process of redesigning those pages to strike a better balance.
Though the redesign of a website can be a heavy burden to bear, there is one thing we can take solace in. Our medium is forgiving. Don’t strive for perfection, because you’ll never attain it. Instead, strive for better, and know that a solution to your mistakes is just one upload away.