Campaign Monitor is an email service provider that helps people create beautiful and engaging emails. Since I joined, the company grew from fifthy to nearly two hundred people across the globe and received a $250 million round of funding. Being part of that story as the lead designer of the email builder team, I’ve had the opportunity to solve really challenging problems and have a significant impact on both the business and customers.
Above — Brendan Downs using the email builder to create a newsletter
Designing and coding beautiful responsive HTML emails is hard. The email builder makes it easy. Its intuitive drag-and-drop interface (originally designed by Buzz Usborne) empowers marketers to create engaging on-brand emails, while hidding the technical complexity behind the scene.
Above — some of the billion emails created with the email builder
A lot of customers were frustrated by the lack of flexibility when it came to typography. After going through support tickets, cycles of customer interviews, and a bunch of different concepts, I’ve been able to produce an easy-to-use solution that solved people’s problem and improved the adoption rate of the email builder.
Above — the font-size and line-height automatically adjust themselves depending on the device
As straight forward as it may seem, solving the typography flexibility problem in the context of email was fairly complex. How much flexibility is enough? What would happen on smaller devices when a large font-size has been set? What would happen when a text has been moved from a one-column layout to a multi-column layout? A bunch of questions that needed answers.
Above — before and after the typography controls were introduced, and icon early sketches
A beautiful email being the only acceptable outcome, I set out to design a solution without unnecessary UI getting in people’s way. The final result ended up being a simplified WYSIWYG inline text editor, combined with a font-size and line-height mapping table in the background to make sure the text looked great everywhere.
Above — the different state of the WYSIWYG inline text editor
Above — screenshot of the animated landing page
We set out to design a page that communicated the story of someone creating an email. While Bradley focused on the illustrations, I spent most of my time story boarding the different states of the animation, and coding the latter.
Above — SXSW picking a template from the gallery
The adoption rate of the email builder wasn’t performing as well as it could. After sending a survey to our customers, I found out that a lot of people didn’t know it even existed. I figured the previous gallery of templates was too hard to get to and that the range of templates wasn’t big enough.
So we decided to redesign the templates gallery to make it more visible and appealing to customers. As a result, the email builder became more discoverable, people liked what they saw and the adoption rate of the email builder increased by 50%.
Above — before/after the gallery redesign and the loading state once the user clicked on a template
In the new gallery, the template thumbnails have different states that help people understand what’s happening on their screen. Whether it be when they hover, click down, or wait for the email builder to load, people always receive instant feedback on the action they’ve just taken.
Above — talking to customers on a weekly basis informed my decisions
Once the flows and the higher level of the problem are solved, I enjoy spending time on the details. Those details might come in the form of a change in cursor, a “down” style for a button, or a helpful animation. I believe those details are what make a good product great.