Issue 9 \\ Patterns
 

Issue 9 \\ Patterns

When you work on anything for an extended period of time you start to see patterns everywhere. There are patterns in how you make things, and how the things you make are used. 

In this issue, front-end developer Alvaro Sanchez offers a peek inside the pattern library behind the MailChimp redesign. Design researcher Jenn Downs shares a story of the research conducted after the launch of New MailChimp, and how it informed the rapid iterations that followed. 
Tweet
Share
Forward to Friend

A Pattern Library Primer


by Alvaro Sanchez
Efficiency is important to us at MailChimp. With small teams working on big projects, we’re always exploring ways to optimize our workflow. When we started planning the redesign we looked at our past work to find ways we could improve. The redesign was a monumental undertaking that required careful consideration before starting. 
 
Our pattern library is the heart of our apps. It’s a collection of elements that work like building blocks to create new interfaces. Our previous pattern library served us well in the past, but to create a totally responsive New MailChimp, we had to start from scratch. 
 
We needed a set of patterns that were easy to use and flexible, so our UX front-end developers could work efficiently building and updating new parts of the app. The pattern library is also a big help to the engineering team, who often have to cobble together sections of the app with limited time. The patterns help the app remain consistent, no matter who’s building things out.
 
Though it’s still a work in progress, we wanted to share a few of the core patterns we’re using and show how they have shaped our design process at MailChimp. 
 

The Structure

We’ve divided the pattern library in different sections so things are easy to find, and to help us build a taxonomy for future additions. Among these sections we have: our grid system, typography, slats (blocks that contain an image adjacent to some text), form elements, lists, transitions, Dijit UI elements, and a few other miscellaneous sections. 
 
Our pattern library is built upon common web technologies: HTML, JavaScript, CSS and LESS as our pre-processor for CSS. This lets us to be more efficient with our CSS and enables reuse of snippets and variables throughout the app.

The Grid

Many smart people have built pattern libraries before us, and we relied heavily on their collective wisdom when building our own. Our grid system is built upon an 8 column flexible grid, following the concepts of Object Oriented CSS by Nicole Sullivan.  
 
To create the grid classes we use a nifty LESS class/mixin.
// Sizes
// Will be called as long the index is above 0
 
.loopingClass (@index, @columns) when (@index > 0) {
 
    // create selector, example will result .size7of8
    .size@{index}of@{columns} {
        width: percentage(@index/@columns);
    }
 
    // next iteration
    .loopingClass(@index - 1, @columns);
}
 
// end the loop when index is 0
.loopingClass (0, @_) {}
 
// .sizeXof2
.loopingClass (2, 2);
 
// .sizeXof3
.loopingClass (3, 3);
 
// .size1of1
.loopingClass (1, 1);
....
The inspiration for our grid mixin comes from a post on TheHippo blog.

Next we added some media queries (the magic responsive sauce) to make our grid responsive and BOOM! We’ve got a solid grid system that’s responsive, didn't take a lot of code to build, and is easy to maintain and expand. We use this grid to layout every page in our apps. Let’s take a look at another core element of our pattern library.

Slats

Slats, a concept we adapted from Nicole Sullivan’s OOCSS, are a pattern used anytime  you need to position an image next to some copy. For instance, an alert like this, which contains an icon and some feedback, follows the typical slat structure:
Whenever we have an image to the left of some text we use the same structure in the markup, making our code consistent and easy to maintain. 
 
Here are some examples of where we use it:
Subscriber profiles
Search results
Tweet stats
As you can see, each follows the same layout structure, but we style each case differently to best present the content.
 
Here’s the markup we use for an alert box slat:
<!-- Media Object -->
<div class="section">
    <h1>Media Object</h1>
    <div class="media"> 
        <div class="media-image"></div> 
        <div class="media-body"> 
            <p>Content here</p> 
        </div> 
    </div>
</div>
These are just a couple of the dozens of patterns we’ve built. We’re developing faster, writing cleaner code, and creating more consistent UIs with our new pattern library. Are you building your own pattern library? We’d love to hear what you’re learning. Reply to this email and tell us your story.
 
We hope these examples give you an insight of how we work and gives you an idea of how you can make your project more efficient and flexible across platforms. 

Post-Launch Research


by Jenn Downs
When we finally launched New MailChimp, we knew we needed to come up with a strategy to process feedback from all available channels. With an app of our size, it’s an inevitable fact that things are going to ship broken or in various states of disarray. Our goal was to provide the development team insight as to what was going on outside the office, and help them prioritize what to fix first, and what to worry about later. Here’s how we did it:
 

Details from Support

Our fearless support team provided our research team with statistics related to support chat content. They categorized and tagged 300 chat conversations to give us an idea of general sentiment post-redesign. Thirty-five percent of these 300 chats were people wondering where features and pages were moved. Support researchers drilled down and told us the top features and pages people were struggling to find. Our UX dev and design teams were then able to tweak the navigation to those pages in the app and make them easier to find.

Analytics

Our analytics team provided stats on adoption rates and increases in mobile and tablet traffic.
 
We didn’t see a huge initial increase in mobile traffic, and mobile traffic was still far lower than desktop traffic, which helped us prioritize our testing post-release. We gave the dev team time to make refinements and put off mobile and tablet testing 'til a future release. We knew if we tested again too soon, we'd run into the same feedback from past cycles. We also want to make sure that we see mobile-specific issues and just not general questions about the redesign changes.
 
In the first few weeks of the redesign, we also saw our feedback form on the mailchimp.com contact page jump from 25-30 emails per day to about 50 or so per day. Once we saw this number return to normal, we knew we had passed the new release crazy times.
 
Now we can start looking deeper into issues that go beyond bugs and initial confusion. 
 

User Research

We always want to conduct interviews with users after a release, but in the case of a redesign, it’s especially important to catch people as they are adopting the new design—and there aren’t enough of us to catch everyone adopting in the first week! So we chose to do “Mini Diary Studies” that used a survey format. People switching over to the redesign could fill out the provided survey on their own time, as they went through their normal MailChimp workflow. Some even filled it out multiple times as they worked in their MailChimp account throughout the first week. In total we sent the invitation to the Diary Study to 393 people on our “Supertesters” mailing list and got 20 full responses.  
 
We also scheduled 7 remote interviews with users to watch them work as they experienced the new MailChimp design for the first time. Responses from these interviews ranged from total delight, to barely noticing that things changed, to disappointment. Results (videos, mindmaps, bug reports) were taken to the QA and dev teams immediately after this round of  interviews was complete.
 
The most fun we had with testing the redesign was bringing in a long-time vocal user to our office to jump into the new design for the very first time. We invited everyone who directly worked on the redesign to witness someone using the system firsthand. Our team didn’t have to worry about getting distracted (or bored!) reading a report or watching a video. And they didn’t need to replay the video to really understand an action our user took—they could ask questions live and get answers immediately.
 
We love our fast-paced and remote testing opportunities, and we love getting to know all our users around the world. But inviting someone into the office to show us how they use MailChimp is really an incredible experience. We’ll be doing more live meetings with the whole team in the future.
 

Always Be Testing

A little over a month after our initial launch, we’re still testing our new design. Our research allowed the development teams to move swiftly and attack the most important problems first. Upcoming tests will lean toward evaluating MailChimp on mobile and tablet devices, mixing moderated and unmoderated testing. We’ll also conduct sessions with people who have never used MailChimp before to see how their experience compares with new user tests conducted before the redesign. 
 
If you want even more info about our process, Jenn will be giving an in-depth talk on Redesigning with Research at Web Design Day in Pittsburgh October 25, 2013. 

UX Around The Web

Ask Us Anything

We want this newsletter to be a dialogue. If you have any questions for our team about pattern libraries, design research, or even Jason's homemade hovercraft, send them in. Seriously: hit reply and ask us anything. We'll try to answer every email and maybe even share our conversation in future newsletters.
Twitter
© 2001-2013 All Rights Reserved.
MailChimp® is a registered trademark of The Rocket Science Group


view in browser   unsubscribe   update subscription preferences   



Email Marketing Powered by Mailchimp

Love What You Do