Monitor App Design

Campaign Monitor July 2014

On the verge of Apple’s iOS7 release, I was tasked with designing an iphone app that empowered email marketers to monitor their email campaigns and subscriber activity while on the go. The app needed to feel native to iOS while also encompassing Campaign Monitor’s unique aesthetic.

campaign monitor iphone app design
monitor iphone app design activity screen
monitor iphone app design report screen
monitor iphone app design subscribers screen
monitor iphone app design snapshot screen

The challenge

Campaign Monitor is a web application used on desktop-sized screens to create and send email campaigns. But what if a user is on the train and wants to check the click-through rate of their latest email campaign? What if they’re outside the office and they need to know who subscribed today and where they’re from? We saw an opportunity to empower users to monitor their campaigns and subscriber activity in real time from their mobile phones. I’ll take you through the design process we used to create the Monitor app below.

information architecture sitemap
Monitor iphone app design sketches

Ideation

Based on customer feedback and analytics, it was clear that an iPhone app would be the way to go about solving this challenge. After some research and numerous team discussions, we decided to base the app around the concept of a user’s activity feed of subscriber and campaign activity. We wanted an engaging and addictive way for users to monitor their account activity.

After numerous sketches and brainstorming sessions, we concluded that the “must haves” for the app were an activity feed of new subscribers and campaigns, campaign reports and subscriber details. We wanted to keep things very simple and focused on account activity as seen in the relatively simple sitemap above.

monitor iphone app wireframe activity screen
monitor iphone app wireframe report screen
monitor iphone app wireframe subscribers screen
monitor iphone app wireframe snapshot screen

Wireframes and prototypes

I created a quick prototype using a clever little app called Pop, that allows you to take photos of your interface sketches and link them together to create an interactive prototype on your mobile phone. I tested out the prototype on a few users to ensure that there were no major usability issues and then moved on to creating more detailed wireframes in Sketch, some of which can be seen above. I’m a big believer in “less is more”, so we focused on making sure that every element in this app earned its place.

visual design of map
visual design typography
colour palette

Pixel perfection

Visual design is always especially important at Campaign Monitor, so a lot of care was taken in sweating the details of this design. We wanted to keep the design on-brand while also making sure that it felt at home within the newly released iOS7. The design aesthetic was kept clean and minimal to reduce distractions and improve usability.

“Helvetica Neue Light” was used throughout the app to keep it consistent with iOS7 and I used different font weights and colours to establish visual hierarchy. A simple and primarily blue colour palette was used throughout the app to keep the focus on the content and a traffic light concept was employed to signify types of positive and negative activity; e.g. green shows that somebody subscribed, whereas red signifies that somebody unsubscribed.

monitor app icons
campaign monitor app icon

The icons for the app (above) were designed by a colleague, who combined single weight lines, smooth curves, sharp angles and negative space to achieve the aesthetic we were after. The basic idea was to give the icons a unique character while also ensuring that they looked at home within iOS7.

monitor app campaign report

Putting it all together

After endless hours of experimenting with visuals in Photoshop, we were finally happy with the visual design aesthetic. The campaign report screen above allows users to monitor the performance of each of their email campaigns to see who is opening and clicking their emails in real time. As well as seeing campaign activity and statistics, users can drill down to see what individual subscribers are doing. I used simple donut charts to highlight the open and click rate of the campaign, and an activity feed logs exactly who’s doing what.

One of the most engaging parts of the app, Worldview (below), allows users to watch in real time as subscribers around the world open and click on emails. Pins drop on a map as people open and click on the email and users can easily drill down to see a summary of each person. A full-screen map was used to get maximal visual impact on this screen.

monitor app worldview
monitor app subscriber snapshot

We really wanted to make it easy for users to get to know the people behind the emails in their subscriber lists, turning faceless email addresses into real people. When designing the individual subscriber snapshot screen above, I focused on showing who and where the person was from as well as showing their campaign engagement. This is actually one of my favourite screens in the app as I was able to pull several different design elements together to create a rich visual aesthetic.

Having more and more people subscribe to your email list is very exciting for most email marketers, so we wanted to make sure that users could easily manage and monitor their subscriber lists over time. The subscriber list details screen below houses an activity feed that shows who is subscribing and unsubscribing from each list; and daily, weekly and monthly reports show how many people are subscribing over time.

monitor app subscribers

A great result

Since the launch of the app a few months ago, we’ve had thousands of downloads and lots of great feedback. It’s always great to see real users enjoying a product that you’ve worked on, but the journey doesn’t end here. We’ll continue to listen and learn, because as most product designers know, a good product is never finished.