It’s never been easier to find design inspiration. Dribbble, Instagram, and thousands of blog posts are more than ready to surface the great work of the design community. There’s a downside, though: We often only see the triumphant shiny final product.
We all know the design process isn’t always a straight line and a tidy story. It’s full of stops and starts. Behind every UI element, there were unrealistic deadlines, explorations that went nowhere, and surprise outcomes.
Thus is the story of the Mailchimp high five. Since it was founded in 2001, the email service provider has built a thriving ($600 million in revenue according to Forbes) business by not taking itself too seriously. The bootstrapped company has remained the envy of those of us who build brands and is the subject of lots of press that often asks some version of the question, “How can the rest of us do what Mailchimp did?
The high five users receive from the Mailchimp mascot Freddie is one of the most memorable—and successful—animations ever conceived by a SaaS company, and emblematic of Mailchimp’s tone. The simple monkey hand has spawned its own sub-brand and has come to be one of the most-cited examples of user empathy. After all, you can delete a bad tweet, but you can’t unsend an email. The email is the last bit of permanence in an ephemeral web, so you might as well get a high five afterward.
But the quirky high five that helped build a SaaS giant wasn’t the result of a master plan; it was a hurried last minute idea by a group of developers and designers at the end of a long redesign process. We spoke with four of them to learn exactly how the high five happened.
“The email is the last bit of permanence in an ephemeral web, so you might as well get a high five afterward.”
Aarron Walter, Director of User Experience: I became a Mailchimp customer in 2005 and I knew the feeling of sending out a campaign and being totally stressed out about it. Because once you send an email, you can’t really suck that back in. I just always thought, “Someone should come into my office and high five me right now! I’m deserving.” So [when I worked there] in 2008, I wrote a piece of copy that displayed after you sent a campaign: “High fives! Your email is in the queue.” That copy was there for years, and in 2012 we were doing a redesign.
(Note: Aarron is now an InVision employee)
Caleb Andrews, Senior Project Designer: Aarron was like, “we should put this [high five] in the app!” And he was always so good at never giving direct direction — just telling us the thing we might or should do. We would figure out the rest. It creates an awesome level of trust.
Aarron: During our redesign, we overlooked this most important part in the whole process, which is you get to the end and you don’t actually have anything to do there, which is why we overlooked it. It’s not about usability, it’s not about performing a task flow, it’s just about reacting to an accomplishment.
Caleb: No one person can take credit for this whole thing. The original hand was illustrated by Justin Pervorse a crazy, crazy, brilliant designer.
Aarron: I remember running upstairs from the third floor to the fourth floor. The third floor is where the product design and engineering teams were, and running upstairs to the fourth floor where the marketing illustrators were. And just asking Justin to do a quick illustration of a Freddie high five.
Justin Pervorse, Illustrator: The illustration that we use for that was actually a part of just like some random project that we had thrown together. It was from the hand of the Freddie paper dolls toys Fuzzco made.
Justin: We would always invest time initially by just using stuff that we had easy access to, it made it really easy to iterate fast on a lot of these ideas. It felt obvious to me to reward people for the “sending” step in the process.
Caleb: [For the static version] all I did was put it in a circle and put [Justin’s illustration] at the end of the flow when you’re finally ready to send your campaign.
Aarron: And we launched with [the static version]. It was a high five now personified by Freddie’s hand, and that started to elicit tweets and responses.
Caleb: It was cool was just seeing the immediate reaction to it. Like people’s emotional reaction, I could not believe anyone would be so emotive towards this static hand.
Justin: I remember the immediate gratification of seeing people talking about it on social media. I didn’t think that it actually would get that much of a reaction. But people really loved it.
Aarron: People started to take photos of their hand. And then we decided, “Hey, let’s take a little bit of time with this.”
Alvaro Sanchez, Senior Frontend Developer: It was a static image but we wanted it to take it to the next level.
Caleb: And then Alvaro Sanchez and I were tasked with animating it and we were given an unnaturally long time to actually animate this hand, like three weeks. Any other company would be like, “What are you doing? Why are we giving you this time animating this monkey hand?”
Aarron: It was like a small piece of text turned into an illustration turned into an animation and when it became an animation is when it took on this new life.
Alvaro: They gave me an After Effects file, which contained the explorations and they said, “We want to put this into the web.” Back then, we obviously didn’t want to use Flash or anything like that. So the only way was via Javascript.
Aarron: The technology had kind of shifted and we could do .svg animation for the first time.
Caleb: We did everything in our power to just make it readable and clean. And I think for some weird reason that’s the part we were most proud of. We were like, “Damn, this is well-built! You know, if it looks good, that’s nice. But this is just well built!”
Alvaro: I didn’t have the knowledge to like break the illustrations apart. So [Caleb] basically recreated the initial illustration, which was Justin’s.
Justin: This asset was made for something else and turning it into this very simple response to someone doing something with the product was never intended. I recreated it. What we had from them was too detailed. It was more textured. And it evolved more after I left the company.
Alvaro: I was telling Caleb, “Hey, I need one more layer.” And he was like, “Yeah, let me do it.” He was super patient with me.
Aarron: There’s an Easter egg hidden in that. So if you continue to high five, it gets redder and redder and redder. And then finally it launches you out to a game Fast Fives.
Aarron: People started responding and tweeting with videos of them high fiving their screen. And then Mailchimp used to DM people sending them a special one of a kind high five shirts. And then we made a high five version of the foam finger that we handed out at pride parades and events. The notion of the high fives blew up into something bigger and synonymous with the brand, all because of an animation.
Alvaro: Our users are very dear to us and we were very always very keen to provide a good experience for them and it was important for us to acknowledge those moments, [that’s why we made another] for the moment of anxiety and nervousness before sending an email.
Justin: Different versions of it stemmed off from that initial thing because it just kind of made sense. We asked, “What are some others like generic poses?” And that’s how we got the sweaty button.
Caleb: Yeah, that was another three weeks, and another thing that any other company would have been like, “What are you doing?”
Alvaro: I just saw the drops in the initial illustration and I was like, wouldn’t that be cool if I can somehow make this hands sweat whenever I want? I also had to program them getting created and then disappear.
Caleb: It was everybody’s parts coming together, but I think again, everyone got the space and time to work on it.
Alvaro: I remember reading some tweets like, “Oh my God, Mailchimp, I was already so stressed out and you’re putting this in front of me? It makes me more stressed out!” But at the same time, it was a way of us actually stopping and acknowledging their work and how important it is.
The stress of that shaky little Mailchimp monkey hand before sending an email is unlike any other stress I’ve experienced in my life pic.twitter.com/7p6vIwJrRD
— Jessica Wuensch (@jessica_wuensch) June 6, 2018
Aarron: There’s a fancy algorithm to generate the random drops of sweat. Alvaro got very scientific on this thing!
Caleb: I don’t think I’ve ever worked so closely with an engineer on something so silly. I got to spend so much time both getting to know Alvaro personally and working with him and understanding technical limitations that I had to help him work around. It created empathy with engineers that I’d never had before that I still employ today. Doing this is somewhat absurd but the absurd little details can delight people in a way that make them want to pay the $29.99 a month.
Aarron: Animation can be so powerful. It can create an emotional experience that connects with you, and it’s also a way of communicating that there are people behind the software who understand your journey and challenges you face here and we’re reflecting that back to you in this interaction.
“Challenge ideas and don’t just take everything they give you. Be part of the creative process. Don’t, don’t be just the end of the line where you go, “okay!””
Alvaro Sanchez
Caleb: People will show me apps and the things they’re showing me are not the product itself—it’s the moments. It’s the transitions. It’s the considerations that they most appreciate. Not even talking about how the product impacts their life for what it does for them.
Alvaro: I always speak to my developers now, to not only pay attention to the code but to speak to your designers and create a relationship. Challenge ideas and don’t just take everything they give you. Be part of the creative process. Don’t be just the end of the line where you go, “okay!”
Caleb: Occasionally, I’ll overhear someone say something like, “You know, we gotta capture the essence that we did with the high five.” [laughs] I don’t think it’s something you can recreate.
This interview has been edited for length and clarity.
Want to read more about animation inspiration?
by Sean Blanda
Sean Blanda is the Editorial Director for InVision. Previously, he was the Editor-in-Chief of Adobe’s 99U and a founder of Technically Media. He currently resides in Philadelphia.
