Professional Documents
Culture Documents
UX Reader
Insights on process and purpose from MailChimp’s User
Experience team
© 2014 MailChimp
TABLE OF CONTENTS
Introduction
Collaboration
Research
Design
Development
Refinement
Resources
Contributors
Introduction
Reflection helps us see the best parts of our process. “We saved
ourselves so much time when we built it that way.”
Aarron Walter
Director of UX at MailChimp
COLLABORATION
Building a UX Team
Aarron Walter
Collaboration by Design
Aarron Walter
On Good Terms
Gregg Bernstein
COLLABORATION
Building a UX Team
AARRON WALTER
Back in 2008, when the MailChimp UX team was just me, I had
to be a generalist. I designed UIs, wrote front-end code, built
prototypes, interviewed customers, and conducted usability
tests. Working on so many different things early on helped me
see how it all fits together and shaped my views of the type of
UX team I wanted to build.
When I think back on how we’ve grown, I can derive a few key
lessons about building a sharp UX team. These lessons aren’t a
magic formula, but by combining a bit of rigor with a lot of
intuition, we’ve been able to get a lot done with relatively little.
Mediocre people are a drag on quality and morale, but they tend
to do just enough good work to stick around—managers have a
tough time justifying letting them go because there’s no
actionable offense. The scent of mediocrity on your team can
also scare off talented candidates. Mediocrity is an albatross we
tether ourselves to when we don’t give the hiring process our
full attention.
When you hire, look for skill fit, but don’t make it your primary
evaluation criteria. Look for passion, curiosity, selflessness,
openness, confidence, communication skills, emotional
intelligence, and intrinsic motivation, too. These things can’t
be taught—most skills can.
It sounds a bit nebulous, but I always look for the right energy
fit too. I once interviewed a candidate and knew from his
crushing handshake and deafening greeting that he would be
too overbearing for my team. As the interview proceeded, my
hunch was borne out. This guy’s alpha energy would instantly
squelch the open collaboration on my team. We spend more
time with our colleagues than we do our families. Why wouldn’t
we listen to our gut when deciding who to hire?
Respect
Seeing your work mistreated can be demoralizing. Researchers
throw themselves into studies that uncover insights that can
change a company, but their findings go unheeded. Designers
labor over pixel-perfect UIs, but the build-out cuts corners.
Developers write brilliant code, but the release gets spiked. You
probably have a few similar stories of your own—it’s the stuff
that resignation letters are made of.
This dynamic is bad for individuals, bad for teams, and bad for
the companies they serve. So why does it happen? Simple: A
lack of respect between peers.
Autonomy
Even if they operate in a respectful environment, teams can
become demoralized when they have to beg for permission. It’s
hard to experiment if you have to get sign-off first, and it’s
hard to make giant leaps forward if you don’t experiment. If
failure is not an option in your organization, then neither is
success.
Parallel cycles
Lean and Agile methodologies are the religion of technology
companies trying to gain competitive advantage by iterating
quickly on their products. The problem is, fast iteration too
often happens at the expense of research. Things get done fast,
but they’re not always the right things.
Tell stories
When we started to fold design research into our UX practice, I
thought it was enough to collect the findings and make
recommendations. But I was wrong. Research can’t create
change in an organization until it has been turned into a
compelling story.
MailChimp has been known to write 50 page documents filled
with interesting insights about our customers and how they use
our app. It’s stuff that can help us make a better product—and
could even shape the direction of the company. But very few
people are willing to pore over giant tomes of research. It’s time
consuming, and it’s not much fun. So we thought, while we’re
on a quest to understand how to make our customers’
experience better, why not do the same for our colleagues?
Keep going
I’ve been working on building and managing a UX team for
years now, and I still don’t have everything figured out. It
always seems like there’s some magic formula just around the
bend, and from what I’ve heard from UX team leaders at other
companies, I’m not the only one out here looking for it. But
maybe, just maybe, that formula doesn’t exist. There’s no one
way to describe “user experience,” so why would there be one
way to build and manage a UX team? Getting research, design,
and development to operate in harmony is what our ambiguous
craft is all about. This much I know for sure: When smart,
capable people with complementary skills are united by a deep
desire to help customers, great things happen.
COLLABORATION
Collaboration by Design
AARRON WALTER
4. CREATE CONVERGENCE
We also have a common space for lunching and chatting where
we all converge throughout the day. The heart of this space is a
fancy coffee bar where we craft caffeinated indulgences on a
LaMarzocco Linea. Great coffee draws in not only the designers,
but folks from throughout the entire company. We see
engineers, accountants, support staff, and everyone in between
pulling shots at the espresso machine, so there’s always an
opportunity to find out what other departments are up to.
5. CREATE RETREATS
Of course, there are times when large open spaces filled with
inspiring conversations can be a distraction. So we furnished a
few offices near the design studio with desks and chairs to give
people a place to hole up if they need to have a private meeting,
take a phone call, or just work in silence. We want to keep our
teams working together in the same space, but let them adjust
their work space as needed to be as productive as possible.
It was a work day, but it felt more like a great big family
reunion. Former deskmates reunited to achieve a common goal.
Breakfast, lunch, and child care were provided, but were
considered extras in the minds of the MailChimp employees. All
of them gathered to help the company and their colleagues.
As MailChimp grows, it’s important for us to retain the
community-based values we had when we were smaller. The
social aspect of our culture is something we invest in: We host
regular company-wide lunches (nacho bar!) and after-work
socials, and we have common areas with ping pong tables, pool
tables, and snacks.
These are things I’ve always known, but a while back I saw
first-hand how our diverse skills contribute to a collaborative
workflow. The UX team was working together on 3 different
projects with looming deadlines. The research team was
working on parallel studies that required sophisticated surveys
and emails to thousands of customers. The design and
development teams were busy crafting the next issue of our UX
Newsletter, and the research team was jumping in to help. We
were hustling to get these projects done, but obstacles kept
popping up that we couldn’t solve on our own. The only way we
were going to meet our deadlines was to ask for help.
No islands
As we worked on 3 parallel projects that day, 2 important skills
empowered our team: communication and collaboration.
Whenever someone had a question, they would IM other team
members to find an answer or walk up to their desks and start a
conversation. In return, each question was met with an open
and honest response and a willingness to help. Even while
working on another task, colleagues made a point to respond in
a few minutes—and if they didn’t have an answer they’d pass it
on to someone who did. No matter the situation, there was
never a dead end. We always kept projects moving forward.
On Good Terms
GREGG BERNSTEIN
Maintain legibility
In the interest of avoiding the trappings of typical legalese (and
our previous Terms of Use), we refrained from capitalizing
entire sentences and paragraphs. By now, we all have a visceral
reaction to all-caps emails or tweets (“AGH, STOP YELLING AT
ME!”). Surely a legal document can provide a safe haven from
such gauche behavior! When we had to emphasize entire
sections, we bolded them instead.
Radicalizing Data
Gregg Bernstein
Radicalizing Data
GREGG BERNSTEIN
Last year an email came through our app feedback channel that
requested a “Notes” function within our subscriber profiles. It
was the first and only time we saw this request, but we didn’t
discount it outright—it was data, and therefore important. We
responded to the customer directly, learned of the use case, and
this one piece of feedback turned into an app development. The
data we received was minimal, but by granting it legitimacy by
default, we learned something new and added a feature with
potential benefit for all customers.
Then wise up
Of course, for every piece of data you follow, there always comes
an end point. We complete our research mantra by claiming
that each data point holds value until proven otherwise. Once
we see enough evidence to contradict the data in question, we
move on.
Good research takes time and effort! Our research team spends
days setting up tests, coming up with survey questions and
interview prompts, tweaking protocols, scheduling
participants, and running pilots. Research studies can take days
or weeks to complete—and let’s not forget all the time it takes
to re-watch video footage, transcribe interviews, filter through
responses, conduct follow-up interviews, and pull out
meaningful statistics.
Posters
In 2013, we made persona posters. The UX team spent months
developing a group of “personas” that represented our primary
customer types. We wrote a formal report that discussed each
persona in-depth, and we had our designers create posters for
each, with descriptive words that summarized each customer
type.
Lunch & Learns are less formal than Coffee Hours and usually
have fewer than 20 people in attendance. The research team
has used this time to invite designers and developers to watch
usability testing footage with us. These lunches are a chance for
us to get the designers, developers, and researchers together in
a relaxed setting where we can chat about design challenges and
collectively come up with solutions.
Coffee Hours and Lunch & Learns are more visual and dynamic
ways of presenting research. They cater to folks who are more
engaged when someone speaks to them directly and they have
the opportunity to ask questions or respond.
Mini-documentaries
On occasion we’ve made short, 5 minute documentary videos
that give the whole company a glimpse at our customers’
everyday working lives. Seeing customers’ faces, their office
environments, and the technology they use helps us develop
empathy. Listening to customers talk about their organizations,
how MailChimp fits into their overall workflows, and what their
daily struggles are like has more impact than simply reading a
quote on a printed page. Plus, videos can be watched anytime,
paused, and replayed.
Research evangelists
Each of those communication forms has its place, and the
MailChimp UX research team is learning that the best way to
reach all of our colleagues is to repeat information in different
ways through multiple channels. An unspoken part of our jobs
as researchers at MailChimp is just “being around” and
promoting research whenever an opportunity presents itself.
We keep ourselves open to those serendipitous moments when
we can contribute research tidbits to a conversation we’re
already a part of. This doesn’t mean monopolizing
conversations and droning on and on about a current study—
nobody wants to be around that person. It just means being
aware of when our research might inform the work of others.
I’m one of those people who can’t wait to see what our
customers have to say, so I usually start by skimming through
the responses, just to ease my curiosity. But once I’ve gotten a
feel for what people are saying, my first priority is to filter out
all the responses that aren’t particularly helpful. For example, I
usually get a big handful of “n/a”s from folks who either have
nothing to say or just want to skip to the next question. I do a
quick search for “n/a” and all of its variations (none, na, n.a.,
nada, nope) and categorize them in SurveyMonkey with a tag,
something like “Unanswered” or “Nothing.”
Parting thoughts
Your job doesn’t end once you’ve filtered all of your responses
into categories. Sure, you might be able to say “22.31% of
respondents mention they use mobile tools,” but that statistic
doesn’t tell you who these users are, which mobile tools they
use, the tasks they are trying to accomplish with these tools, or
why they prefer to work with a mobile device. It’s our job as
researchers to draw meaning from this data by putting it into
context or digging deeper for more information. Will organizing
and categorizing data do this for us? No, but it does give us a
very good place to start.
RESEARCH
And that's just the setting. What about the questions to ask?
Should we be structured in our interviews? Would it make our
data easier to analyze? That would be the data-serving
approach. However, what we look for in design research is
naturally complex. To get closer to the true picture of our users’
contexts and the motivations that lead to their behavior and
patterns of use, we ought to be prepared for messy, unexpected
situations and data we can’t predict.
At MailChimp, when the research team started looking beyond
product features and interface issues to the stories behind these
problems, we began to refine our interviewing skills. Now we
aim to be focused yet opportunistic in what we might learn. We
want to gather consistent enough data that enables us to do
meaningful comparison across interviews and other data, but
also allow for unexpected surprises.
During interviews
A rehearsal is fundamentally different from a performance.
When you’re sitting across from the user, it’s the real thing.
There’s a bunch of great advice out there on how we should
come into interviews with guidelines—but don’t be afraid to
stray from it.
This has mostly worked well for me out in the field, but being
ever pragmatic, I set about looking for a framework. Eventually,
I realized that if we treat every interview as a story that we want
to retell, we can quite easily get at the core facts and the
nuances. By establishing key characters (who are the main
people you work with?), timelines (what happens when?),
severity of struggles (how much? how frequent?), and
emotional impact, we can extract a lot of information in a short
amount of time.
KEEP A CONVERSATION CHECKLIST
Interviewees will throw details at you that are out of
chronological order—it’s your job as the interviewer to make
sense of the story. I usually use a conversation checklist to keep
myself on track. As the conversation goes on, I keep an eye on
my checklist to make sure everything is covered. If it’s not, I’ll
find a convenient way to segue into something that might be on
my list, or go back to a point in their story for a point of
clarification.
Have a purpose
Another thing I learned very early is that there’s a process of
refinement with sketching. In the early stages, you’ll produce
tens or hundreds of very quick sketches to explore forms and
ideas. Once you start to clarify the direction you want to take,
you can start filling in more of the pieces. Many times, my
sketches focus on big things and leave out the smaller details.
You’ll see squiggles for text and rectangles that represent
buttons and images. But your sketches don’t have to be perfect
or beautiful—they just need to get your idea across.
Sharing is caring
At MailChimp, I work very closely with our UI designers Tyrick
Christian and Caleb Andrews, and we’ve figured out a quick
process for producing beautiful feature comps in Photoshop.
We start by sitting down and talking through concepts. We’ll
usually sketch as we talk, and generally get a polished idea in 5
to 10 sketches. Next I’ll photograph those sketches with my
iPhone and upload them to Evernote. There, it’s easy to add
notes and discuss them as a team. When Tyrick moves on to
create a more detailed comp in Photoshop, he has a nice
blueprint to work from filled with notes and examples about the
interactions to be designed.
Select your tools
My notebook of choice is a large Moleskin journal with squared
paper. This is the largest Moleskine notebook I could find, and
the extra real estate helps when I’m working on more detailed
sketches. The squared pages also keep things in proportion,
since sketching software usually involves drawing boxes upon
boxes of stuff. Using a notebook also helps keep my sketches in
one place, which makes it easier to refer to previous projects. I
am constantly looking back at sketches from previous months,
and having a bunch of loose sheets would make this difficult if
not impossible. (Related: I’m kind of a spaz.)
I use a Pilot Razor Point pen. It’s a felt-tip pen, which makes it
less prone to drying. The line weight is thin enough to write in
small letters, but still dark and consistent from stroke to
stroke. I buy them by the box.
In the end, we’re in a better place now than we were before the
redesign, and that makes the hard work and long hours we put
in worth it. We’ve created a system that will be the basis of our
application for future iterations. Based on the lessons of our
sister industries, we’re headed in the right direction.
DESIGN
The SVG (short for “scalable vector graphic”) has been around
for a while, but some folks are only now learning about its
exciting advantages. SVG animation is a subject that’s hard to
do justice in just 1 article, so we’re going to break it into 2 parts:
Caleb Andrews will discuss preparing SVGs for animation, and
Alvaro Sanchez will get into the nitty-gritty of how we made
Freddie’s animated high five.
You can open your SVG assets in a text editor and take a look at
the code generated. In the example above, I have SVG shapes
for a rectangle and a stroke. In theory, they’re the same thing—
a rectangle—but the code to draw them is entirely different. If
working with stroked paths isn’t your style, a stroke can be
easily expanded by heading to “Object” and selecting “Expand”
in Illustrator.
CONCLUSION
GETTING STARTED
When I took on the Freddie animation project, I was given a
prototype of the animation, made in After Effects and then
exported as a GIF. Caleb helped me re-create in Illustrator the
shapes used in the prototype—hands, arms, fur, etc. After I
labeled the layers and organized the assets, I exported them as
SVGs. This left us with 3 SVG files, one for each image of
Freddie’s arm in a different position. Next, I started to think
about how to animate the shapes.
ANIMATING MOVEMENT
I created the high five animation with 3 separate images of
Freddie’s arm, each in a different position. For the final
animation to look like a single arm in continuous motion, I
needed to create a smooth transition between each image. To do
this, I used a step animation technique and stitched the images
together with transitions in between. (Why not just animate
one image? Calculating all the points in Freddie’s hairy arm and
morphing the arm curvature was just too complex for the scope
of this project.)
The next step was ordering the stack elements in the final
animation.
Each letter is a command: “s” is for scale, “r” is for rotate, and
“t” is for translate.
// Set opacity to 0
arm2.attr( {opacity: 0} );
CONNECTING ELEMENTS
Once I had all my assets in place and initialized, it was time to
start animating and chaining transitions. This is where things
got interesting.
Snap.svg has a function called Animate. This function receives
the following attributes:
Element.animate(
attrs,
duration,
[easing],
[callback]
);
arm1.animate(
{transform:'t-50,60'},
400,
mina.backout,
function(){
// callback code here
}
);
For a more detailed view of the code behind the High Five
animation, check out the source code for yourself.
DEVELOPMENT
Pretty much all email falls into 4 broad categories: Read Me, like
newsletters or RSS-to-email campaigns, which deliver
information and are text- or image-based; Buy Me, related to e-
commerce, entice the reader to spend money; Join Me, like
event notices and invites, highlight a particular occasion and
urge an action towards it; and Understand Me, which are
transactional, like receipts and order summaries, and convey
important details or data, and little else.
With this blueprint, I felt that anyone should be able to grab the
HTML and understand how the code is structured, arrange
design patterns to suit different needs, style the email without
worrying about the framework, and send campaigns almost
immediately.
Reinforce code
Once I finished building, I ran the email through my usual
series of tests in desktop, browser, and mobile email clients. In
the first run-through, the email rendered without major issues
in all the popular email clients. I wasn’t quite finished,
however, because of 2 email clients.
You might be thinking, “But why only the Android Gmail app?
There’s one for iOS, too!” And there is, but the iOS Gmail app is
even worse—it supports nothing at all. Emails will render just
fine, but for now, you can forget about mobile friendliness.
With support for Outlook 2007/2010 and the Android Gmail app
shored up, the email is now pretty robust across multiple
clients and reasonably flexible, too.
Educate with comments
Some of these techniques may verge into “way out there”
territory, particularly for new email designers. To that end, I
made sure to include explanations within the code for why
certain bits of code are used and exactly what they do.
Tightening type
As Richard Rutter has noted, the vertical rhythm on any web
page can be achieved by carefully applying line height, margin,
and padding to the content. The trick lies in finding a suitable
line height, which forms the basis of calculating margins and
paddings.
SIMPLE MATH
Because our UI is designed on a 6px baseline grid, all line
heights, margins, and padding had to be applied in multiples of
6 to maintain vertical rhythm. Fonts, however, can be set to any
size without breaking rhythm. Our base font size is 15px, a value
that we found to be legible in all situations without making UIs
feel oversized.
Best practices suggest setting the line height of type at one and
a half times the size of the type to improve legibility. With our
base font size set at 15px, that would result in line height at
22.5px. But because our baseline grid is set on a 6px base, we
tweaked the line height to 24px, creating a relationship
between the padding, margin, and line height in all layouts.
With the math sorted, we started applying these proportions to
the elements in our app.
For all headers and other font sizes, the line height is again a
multiple of 6 and is calculated based on the font size itself. The
examples use pixel units for the sake of simplicity:
h1 {
font-size: 40px;
line-height: 48px;
}
.small-meta {
font-size: 13px;
line-height: 18px;
}
.dotted-list {
margin-bottom: (@base-unit * 2);
li {
padding-top: (@base-unit * 2)
padding-right: 0;
// 1px less padding bottom
padding-bottom: ((@base-unit * 2) - 1);
padding-left: 0;
border-bottom: 1px dotted #c0ffee;
}
}
Maintaining code with such special rules and exceptions can get
messy. A quick word with the team and a simple comment in
the code might alleviate some difficulties. Documenting the
change in a live pattern library also goes a long way.
<h1>Title: <span>Tagline</span></h1>
The font sizes in ems for the heading and the nested span using
a LESS mixin can be easily obtained as:
h1 {
#pxtoem > .font-size(@h1Size, @baseFontSize);
// 24 ÷ 16 = 1.5em
> span {
#pxtoem > .font-size(@h1SpanSize, @h1Size);
// 18 ÷ 24 = .75em
}
}
While it may get difficult to keep track of the font sizes as the
nested levels increase (lists within lists with nested divs,
headings, paragraphs, hyperlinks, and spans), a little effort up
front can help achieve a small piece of the ever-elusive CSS
nirvana.
DEVELOPMENT
Creativity in Front-End
Development
JASON BEAIRD
It’s a fun little detail that we didn’t think people would notice,
so we were pretty excited when it was featured on Little Big
Details. Thanks for the idea, Thierry. (View the clock demo on
CodePen.)
Animated GIFs for onboarding
Do over-think it (sometimes)
Budgets and deadlines sometimes require you to rely on the
most obvious solution to a problem, but it shouldn’t always be
that way. Next time you’re working out a front-end challenge,
try second-guessing your first solution. Do something a little
different. Take every opportunity you can to apply new
techniques and technologies, especially when it will delight
your users. And don’t be afraid to ask how someone else solved
the same problem—you never know what new tips and tricks
you might learn.
DEVELOPMENT
The key here is that these are high-level ideas, but they’re
based on things that we’ve been thinking about for a while. For
example, we decided to build comments and collaboration into
MailChimp months after we launched a small labs app called
OnStage, which mimicked some of the functionality we were
after. We figured out what worked in OnStage and what didn’t,
and then we took those ideas and crafted them into a plan for
the app. Once we decided to proceed, we had a clear idea of what
to build, and that focused energy let us move quickly and
release a big feature that we knew was going to work.
WEEK 1: RELEASING/PLANNING
We spend the first couple days deploying code from the last
release. We’ve also got our eyes and ears glued to our support
team, our inboxes and Twitter so we can listen hard to feedback
coming in and change fast in response. We’ve surely missed
some bugs that will need to be hot-patched to production
during the first couple of days. We’re also talking and trying to
refine ideas about what we’re building next. We have our
“release” meeting this week, too.
Dashboard improvements
Before we heard from Justin, we had already started making
accessibility improvements to the MailChimp dashboards.
These easy but effective fixes add context to the dashboard
elements, which screen readers use to provide audible
descriptions.
Takeaways
Ensuring that markup is semantic and providing descriptive
context to elements are both very easy things we can do to
make an app screen reader-friendly.
From that point on, the goals were clear and it was time to start
designing. We were working on concepts for a range of screen
sizes, from phone to desktop monitor, so we decided to build a
pattern library, which my teammates have described in detail
elsewhere in this book. During this time, we were less
concerned with creating a single, perfect idea, and more
concerned with iterating through several ideas until we found
the best solution.
Of course, the slats weren’t perfect. After the initial release, our
customers offered feedback. We listened and responded. For
instance, before the redesign the dashboard showed the total
clicks and opens; after the redesign, the slats on the reports
dashboard showed only the open and click rate for each
campaign. After users spoke up about the change, we
compromised by showing the total number of clicks and opens
when the user hovered over the click and open rates.
I experimented with tile treatments for the grid view for weeks
while other members of the team were building prototypes of
the pattern library. We wanted lists to feel more human, but
that particular direction required subscriber avatars, which we
weren’t prepared to add to the app. We thought about including
a display of each customer’s campaigns, but that would only be
useful if each email looked noticeably different from the rest,
which isn’t always the case. In the list view, responsive tables
weren’t attractive and didn’t scale well for smaller screens.
After weeks of experimentation and discussion, we decided to
change course. I discussed the previous designs with Federico,
and we agreed on a few points. We liked the idea of an efficient
table, and agreed that the content should be sortable,
scannable, and have the ability to grow vertically and
horizontally. After realizing this, it was clear that we needed
lists styled as tables, or “slats.” (Fed talked about these slats
earlier.) We quickly developed these ideas from sketches to
designs to prototypes.
Federico’s sketches.
Post-sketch designs were passed to other members of the team for
prototyping.
The UX Newsletter
@MailChimpUX on Twitter
DesignLab Blog
PatternLab
User Onboarding
Jobs To Be Done
Invision
WRITERS
ART DIRECTOR
David Sizemore
ILLUSTRATORS
Jane Song
Cover
Pam Wishbow
Research
Karen Kurycki
Design
Vaughn Fender
Development
Lydia Nichols
Refinement