Sander van der Woude

Senior Product Designer at MessageBird↗

Previously at Blendle, IENS, Mediamatic.

Graph on top of the Insights Overview showing traffic per channel over time with filtering options.

Insights

Project information

MessageBird

Q2 2018

My role:

Sole designer in close collaboration with the data team.

data visualization

reporting

data design

Something that our users missed in the MessageBird dashboard in 2018 was a way to get insights into their usage and traffic, and be able to create reports and visualize them. So we set out to do just that: allow advanced insights through useful graphs and offer certain default ones relevant to every channel.

The data team at MessageBird was working on a Reporting API for our more technical users to use, but we also wanted to provide this functionality to all our users, regardless of technical proficiency.

Video created for promoting Insights by Devon Moodley. Artboard and assets created by me.

Establishing good practices

I have done a course on Data Journalism, on how to tell stories through data visualization. When it comes to designing data, there is a wealth of knowledge already available on best practices and "do's and don'ts" that have been proven. But it's a balancing act of sometimes giving the user what they want. For example, pie and donut charts are a pretty bad way to present data, but people really like to see them. So we did end up providing the user with the option to render a report like a pie chart. We did decide early on that we wouldn't show any pie charts on the overview pages, to not encourage a bad practice.

We changed this card for SMS status from a pie chart (left) to a bar chart (right).

In terms of color schemes, I wanted to keep it simple and easy to understand. Green and red for respective positive and negative trends (always accompanied by labels for accessibility, of course), and a couple of neutral colors in the blue-ish spectrum to distinguish combined line or bar graphs.

Early versions

Here are some early sketches. Some of them will have pie charts, which were abandoned quickly.

Netflix-like overview with a row per channel.

Single channel overview, with trend cards on top, and summary cards underneath.

A more modular view where users would be able to construct their own overview.

In the end, we went for a big eye-catching graph on top that could give you a quick overview of how all your channels are performing over time. Underneath you would see the most relevant data summaries in the form of cards. All of these you would be able to dive deeper into and customize like you will see later on in custom reports.

On top of the page, the big eye-catching graph presenting traffic over time, while cards underneath persent summary data relevant to the channel. All of these can be explored further by diving deep into the data.

Custom reports

Users would also be able to create complete custom reporting using every kind of filtering method available and visualize the data in a variety of ways (including pie chart). These reports could then be saved and exported.

A very advanced feature-rich way to extract your data and export it.

I created a fun little animation for Dribbble to present the work we did for this Insights page.