|
|
|
|
Pricing your product in a way that gives people the right value at the right cost is a challenge. Presenting that pricing structure in a clear, succinct way is also a challenge, especially when you have several types of pricing plans, each with multiple tiers. Our marketing team took some time last fall to evaluate our own pricing page and rebuilt it in a way that made it easier for our customer to understand. |
|
|
In the past, our pricing page was divided by the types of plans we offer: forever free, monthly plans, pay as you go, high volume (both monthly and cost per thousand), and transactional email. That's a lot of plans! The page was nicely organized, but it was a lot of information for potential customers to process. We occasionally made edits in an attempt to simplify the page, but we knew there had to be a better way to communicate our pricing structure.
|
|
|
The “Aha!†moment came when our research team found that our customers typically saw themselves fitting into one of three categories:
- Entrepreneurs
- Growing businesses
- High volume senders.
After a series of customer interviews and surveys, it became clear to us that as businesses mature, their motivations and interests change. Young businesses, for example, look for an inexpensive way to get started. Large businesses tend to have large email lists and care more about high volume sending.
|
|
|
Based on this insight, we created separate pricing pages for each of these three customer groups. We tailored the content on each page by presenting the pricing tiers and features that are directly relevant to the customers in each category.
|
|
|
As we rebuilt the page, we also thought it might be helpful to add some visuals. Any images we use are intended to create a richer understanding of the concepts we’re communicating along with adding visual interest. So we came up with several different options that we felt gave a more comprehensive picture of our three pricing categories.
|
|
After some debate, we decided the animals were the best choice. They communicated the pricing category concepts visually and added a touch of humor that fits well with the MailChimp personality. Your brain is quicker at interpreting images than text, so the animals made the differentiation between the categories quicker.
We were curious to see how our new design would perform compared to the old one. We consider a conversion when a visitor clicks a "sign up" button from this page. To our pleasant surprise, sign-ups increased 7% more on the new page with the animals, while sign-ups on the new page sans animals increased 6%.
|
|
|
The reason why the redesigned pricing pages encourage more sign-ups isn’t just because people love cute little toy animals (and let’s be honest, we do). Because we took the care to structure the pricing information in such a way that better matches our customers' sending needs, the new pricing page makes it easier for them to decide which plan is best.
|
|
There's still time to vote!
The MailChimp team has been nominated for two net awards this year. The competition is stiff, and we'd love your vote!
|
|
|
We've written a lot in past newsletter issues about our pattern library and how it helps us iterate quickly and ensure consistency in MailChimp. Building with and extending existing patterns is a bit like working with Legos. You know when you start building exactly how the pieces should go together. Sometimes though, it's fun to break out of the pattern box and do things a little differently. I have few examples of this to share. |
|
Text based text-align icons
|
|
|
We needed to add icons like the ones above for left, center, right, and justified text alignment. I could have easily added 4 new characters to our icon font but they just seemed too simple. I decided to take a creative approach and build them with CSS. Basic CSS Shapes are common practice but are usually created by adding background colors to modified block elements. Instead, I used aligned Em and En dashes as pseudo elements to allow them to inherit text size and color the same way an icon font would. It was a fun little exercise and it only took a few lines of CSS.
|
|
|
A much more complex example of front-end creativity was the result of a single tweet. We get a lot of great UX suggestions via Twitter, but Mardav Wala took this one as a personal challenge:
|
|
“Given their amazing copywriting I’m always a bit disappointed that MailChimp’s icon for scheduled campaigns does not reflect the send time.â€
|
|
|
Mardav had been tinkering for a while with a JavaScript library called D3.js. D3 is typically used to create complex charts and data visualizations—not simple little clock icons. We already planned to start using D3 for making charts, so it ended up being a great excuse to try it out. Mardav whipped up a prototype and with a little help from our awesome engineering team, it was converted into a custom Dojo widget that we now use all over the app.
|
|
|
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.
|
|
Animated GIFs for onboarding
|
|
|
Whether you pronounce it with a soft "G" or not, the humble animated GIF is definitely making a comeback. We've always used video tutorials to teach people how MailChimp works. Most of these videos are less than 2 minutes long, but we've found that sometimes you only need a few seconds. Since last year's redesign, we've been using animated GIFs occasionally to show, rather than tell, how new interface patterns work. Unfortunately, when converting screen capture footage to GIFs in Photoshop, the file size can be pretty huge.
|
|
|
Last week, Federico Holgado created a series of short animations as part of an onboarding process for our new editor. Even with fairly aggressive compression settings, the images each weighed in at over 1MB. That's pretty tiny for video but way too heavy for a quick animated tutorial. Federico started looking for other examples of animated gif screencasts and stumbled across an email he received from the photograph platform, exposure.so. The 2 GIFs in Exposure's email had a bit of photographic content, were sized for retina displays, and weighed in at a mere 171KB and 401KB, respectively. Federico asked Exposure's Luke Beard what they used to accomplish such a feat and he quickly replied: "only the best, cockos.com/licecap/".
|
|
|
At first we thought we might have been Punk'd. The table-based site looks like something out of the 90s, the company that makes it is called Cockos Inc. and the name LICEcap didn't inspire much confidence either. It's GPL free software though, so Federico gave it a try and re-recorded the GIF above—taking the output from 1MB down to a minuscule 182KB. Thanks for the tip, Luke!
|
|
Switch Workshop at MailChimp
Caring and designing for customers require an understanding of why they come to you in the first place, and why they leave. MailChimp is thrilled to host the Switch Workshop on March 6, 2014 at our Atlanta headquarters.
- You’ll participate in live customer interviews.
- You’ll learn new techniques for unearthing the deep insights that most companies never bother to dig up.
- You’ll understand why people switch from one product to another, and how you can increase the odds that the switch goes your way.
- And you’ll be able to put everything you learned to immediate use.
Seats are limited to 32 people, and tickets go fast. For our UX Newsletter subscribers, we're happy to provide a discount of $100 off the price of admission. At checkout, enter the promotional code THE-UX.
|
|
|
Ask Us Anything
We want this newsletter to be a dialogue. If you have questions for the MailChimp UX team about our preferred text editors, our favorite Atlanta lunch spots, or even how our UK researcher, Steph Troeth, enjoyed working with us on the other side of the pond this week, 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.
|
|
|
|
|
|
|
