Here’s what we’ve got for you:

• Newsletter: 12
• Non-profit: 9

While we’ve added another healthy batch of general-use newsletter templates, I think the big blip on the radar here is the expansion of our non-profit category, with easier-to-use, more stable templates.

You’ll find 3 different designs with 3 variations each, but they’ve all got one focus: getting the word out about your cause, and compelling others to help. To that end, each design features prominent donation buttons and social sharing toolbars. Depending on what your message is, you can either be dramatic in style…

…or you can serve up a more muted tone:

Or you can ignore the designs altogether and use your own style; as always, the templates are fully customizable.

That customization is handy, but sometimes you just need to send out content without playing the part of graphic designer. That’s why we continue to expand the ‘Newsletter’ category with a variety of different template options. Need to send a quick note to your subscribers, and want to stay classy? You can use this elegant template:

Maybe you want to send something a little more attention-grabbing in addition to your usual content, like a coupon. We’ve got you covered:

Combined with last month’s batch of 42 templates, and the month prior’s 33 templates, this month’s 21 templates bring us to a nice 3-month total of 95 new email templates. Not too shabby.

We’re already working on next month’s batch, with more non-profit templates, templates tailored for photographers, some that’ll work well for real estate listings, some new Halloween and fall-themed templates, and more coming down the pipe. Keep an eye out.

Here’s what we’re adding to the library:

• RSS-to-email: 9
• Fitness: 6
• Technology (iPhone & Android Showcase): 12
• Restaurant: 15

For this release, our focus was on creating some template variations for a category we felt was very under-represented within the library: restaurants. To that end, five designs were created and three variations for each of those designs were built, for a grand total of 15 templates.

These templates allow quite a bit of design leeway to make it easy for you to match your branding, whether you own a coffee shop or a burger bar. While we’re on the subject of entrepreneurship, let’s talk about the new iPhone and Android templates:

Using these guys, you can quickly get a campaign for your new app up and running, using a simple and elegant template design that puts your work up-front and center-stage without you having to expend too much effort.

Maybe you run a small gym or hold yoga classes. If so, boy, are you in luck! We’ve added a new pre-designed category, fitness, and its first batch of templates. You’ll find six templates that let you send out class schedules, news, and featured content to your subscribers:

Each template can be easily changed to fit your branding needs while still retaining a nice, clean design that will hold together across email clients.

For those of you who publish RSS content straight into an email campaign, we’ve added a collection of RRS-to-email templates that are easy to style and are pre-filled with the all of the merge tags you need for a solid RSS-based campaign:

We’ve also moved our Designer Templates – emails designed by web design titans like Veerle Pieters, Mike Kus, and Matthew Smith – out of their “Premium” section, making them available to everyone for free within the pre-designed library.

Finally, we’ve created an expanded look at our email template gallery, showcasing the hundreds of customizable email templates available within the application, made for everyone from beginners to veterans of HTML email.

Spin those campaigns up and keep an eye out as more templates keep streaming in – we’re not done by a longshot.

Here’s a quick breakdown of the templates you’ll find in the latest release:

• Stationery: 6
• Coupons: 12
• Inspirational: 6
• Newsletter: 3
• Eventbrite: 3
• SurveyMonkey: 3

Use the new stationery templates to send professional letters from the head honcho or quick updates to your subscribers on projects in the works (figure 2). If you run a retail store or an ecommerce site, the new coupon templates are going to be really handy as we approach back to school and the holiday season (figure 4). These puppies have QR Code merge tags built in so you can create a discount, then use our Pyow iPhone app to handle the redemption at your store.

The color field newsletter templates are easily customized using color themes (figure 1). Pop a photo into the header and you’ve got an elegant template with very little time invested.

We’ve also updated the Eventbrite templates (figure 5). If you’re promoting events through Eventbrite, you can connect your MailChimp account to send custom emails to attendees.

Simian powers unite with this release as we’ve introduced three new autoconnect templates that let you connect your SurveyMonkey surveys to MailChimp to send fancy invitations to your surveys (figure 5). You can learn a little more about our SurveyMonkey integration over here.

We have a lot more templates in the works too. This is just the beginning. If you’re into designing and coding your own templates, don’t forget to check out our Email Blueprint project over on Github, which contains 35 layouts (including some mobile friendly templates) that have been tested in all major email clients.

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

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 …

Above is a photo of Ron’s wall, where the designers are keeping score. If you look closely, you’ll see evidence of  just how competitive these designers are. Someone filled in Ron’s username with “poop.”

Cut. Throat.

But the latest WC 2010 – themed login screen, from our designer Andrew, looks like it’s going to be a contender:

Plus, there’s more to come.

We’ve come a long way since I was the only designer at MailChimp. This was my World Cup login, circa 2006:

I know, amazing right? Plus — and you’ll want to be sitting down for this — the little ball was actually animated. Eat your heart out, Google pac-man screen.

In addition to the fancy new features we introduced in Version 5, you may have also noticed a few changes to the interface of MailChimp. Over the Christmas holiday while things were quiet, we started to roll in a number of subtle refinements to the interface that not only make it look better, but they actually speed it up a bit too. In the pre-CSS3 days web designers often had to create a series of images to create simple things like rounded buttons or content boxes with drop shadows. All of the little images required for this sort of design elegance add some extra trips to the web server when a page loads to get all of the stuff required to display it. That was then.

Through the magic of CSS3, the stuff we designers have pined for and gone to great lengths to achieve is now as simple as adding a tiny bit of code to a style sheet – no extra images required. Let’s take a look at a few of the places in MailChimp where you can see the CSS TLC in action:

Buttons

MailChimp has a defined series of buttons used throughout the app (see figure 1). The button color varies to communicate its priority and place in the page information hierarchy.

figure 1. Some standard button styles in MailChimp

Each button used to require two images for each color to create the left and right curved ends using a clever design technique called “Sliding Doors“. Figure 2 illustrates how the two button images sandwiched the label the old school way.

figure 2. Sliding doors technique once used on buttons.

Do the math on the buttons shown in figure 1. If it takes two images per button with 3 different types of buttons on the page – that’s a total of 6 images that have to be fetched (plus the icons), which slows the page load. Those images also add a little bit of file weight too.

With CSS3, we can create the exact same looking button with code instead of images, which means less stuff to load and a lighter page weight without compromising the original design. Here’s the CSS that makes the same sort of button sans-images:

.button {height:32px;
   line-height:30px;
   padding:0 22px;
   text-decoration:none;
   font-weight:bold;
   font-size:120%;
   cursor:pointer;
   border:0;
   -moz-border-radius:14px;
   border-radius:14px;
   -webkit-border-radius:14px;}

.p1 {background-color:#296998; color:#fff;}
.p2 {background-color:#94CFFE; color:#666;}
.p3 {background-color:#D7CDB0; color:#754c24;}

Every button gets a base CSS class called button then a modifier class (p1, p2, or p3) is added to adjust the color and visual contrast in the page. The CSS3 part that circumvents the need for images is border-radius, which simply rounds the corners of the colored box behind the button text. Viola! You’ve got buttons with no images.

You can enhance the button further with some more CSS3. When the user mouses over the element, you can create the illusion of the button lifting off of the page with box-shadow.

.button:hover {-moz-box-shadow:2px 2px 2px #999;
   box-shadow:2px 2px 2px #999;
   -webkit-box-shadow:2px 2px 2px #999;}

Click figure 1 above to see a detailed look at the button hover state.

Clear User Feedback

figure 3. The pre-delivery checklist with CSS3 is full effect.

You’ll notice that border-radius and box-shadow make appearances throughout the app these days. Essential user feedback like warnings, errors and success messages make use of these same CSS3 properties to not only refine their look, but also to improve their visibility a bit. If you’ve ever sent a MailChimp email campaign, you are more than familiar with the pre-delivery checklist (figure 3) you’ll see right before you click that send button.

Each message box and the corresponding edit button within employs CSS3 to create a soft, elegant look. Even the new Delivery Doctory follows these design conventions – figure 4.

The Caveat

figure 4. The new Delivery Doctor feature.

CSS3 opens up so many exciting design possibilities, but as is often the case with most revolutionary advancements, there is a caveat. Internet Explorer users will not be able to enjoy these new enhancements just yet, as Microsoft has yet to provide support in their browsers. Internet Explorer 9 (release date yet unknown as of release of this post) will support border radius, and some other more advanced CSS features. Until then, IE users are still relegated to an Internet Junior experience. If you are not strapped down by corporate limitations on your computer, you may want to consider switching to a more sophisticated browser like Firefox or Chrome, which do support CSS3 and also offer a faster MailChimp experience because of their more advanced JavaScript engines.

IE users will, however, enjoy the same speed boost that MailChimp Version 5 brings, but the enhanced design will simply degrade back to a less sophisticated look. Designers have been arguing whether or not it’s okay for web interfaces to look different in various browsers. Given the disparities in browser rendering engines, the final vote is unanimous.

Is it worth it?

Are these subtle design flourishes necessary? Any designer would argue that yes they are. Just as the culinary arts seek to create more than simply edible food, interface designers want to create more than just usable interfaces. We want to create beautiful, and memorable user experiences.

One of the most exciting things about our new chimp is the fact that he now has a body– unlike before when he was just a floating head. We thought that this definitely called for a celebratory gesture, and what could be better than a life-size cardboard cutout?

We like to think of ourselves as trend-setters, meaning you’re probably asking yourself where you can procure one of these for your business. We ordered our chimp from Party Standups, a company based out of Bradenton, Florida (near Sarasota). All of their cutouts are made from weatherproof corrugated plastic and can range in size from 1 ft. 4 in. up to as large as 8 ft. The image itself is printed on white 4mil vinyl using 6-color process inks, and then laminated to the corrugated plastic before it’s cut to shape. The ordering process is super simple– just upload your artwork (most standard image formats are accepted, although the company recommends a resolution of at least 100 dpi), choose your desired options (like size), add to your cart and voila! In 5 to 10 business days you should have your very own life size friend.

In typical MailChimp fashion, the folks around here have been thinking of all sorts of creative things to do with our new pal. (No, not those kinds of things.) If you’re in the Atlanta area, he is rumored to be making a guest appearance on Friday, October 3, at the 2008 Webmaster Jam Session. (Bananas may or may not be involved.) The Webmaster Jam Session is a two day event that brings together web designers, developers, marketers and visionaries to learn about the latest ideas and trends in web design, development, search engine optimization and social media. On Friday, MailChimp Co Founder and Email Marketing expert Ben Chestnut will be talking about designing for email. In his own words, “email might suck but it should still look good”. You can also catch Aarron Walter, MailChimp’s user experience designer, in these sessions on topics ranging from web standards to what’s important when building a website.