Monitor app design
On the verge of Apple’s iOS7 release, I designed an iphone app that empowered email marketers to monitor their email campaigns and subscriber activity while on the go.
The problem
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? Customers needed a way 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.
Discovery
Most of our customers were iPhone users, so it made sense for us to create an iPhone app to solve this problem. After looking at customer feedback and having 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 a bunch of sketching 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.
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 bunch of customers to gauge their interest and ensure that there were no major usability issues. After making a few tweaks based on customer feedback, I moved on to create more detailed wireframes in Sketch App, 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.
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.
The icons for the app (above) were designed by Buzz Usborne, 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.
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.
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.
A great result
Since the launch of the app a few months ago, we’ve had thousands of downloads and lots of positive feedback. It’s always nice 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.
