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.

  • Product Designer
  • 2014 - 2016

A bit of background…

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.

More flexibility with typography

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.

Animated landing page

Above — the different state of the WYSIWYG inline text editor

In April 2015, it was ship it day at Campaign Monitor — a full day to work on any project you want. Bradley Rodgers and I paired up for 24h to produce an animated landing page that promotes the ease-of-use and capabilities of the email builder.

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.

A new templates gallery

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.

Caring about the details

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.

That deep care about details led me to write an article explaining the benefits of invisible animation — which I expanded on as a talk at CSSConf.