Simplifying complex data


UX Designer

Witbe has powerful monitoring tools, from traffic, to bandwith, to UX, all around France and Europe. They are leaders on their market with clients like TV channels, ISPs, stores, banks, etc. However, developing a branded and a specifically tailored dashboard for each new client, and maintaining it, cost them resources and money. They requested to redesign an in-house user-friendly dashboard.

After researching, sketching, and reviewing technical possibilities, we decided to create a unique interface for 3 different targets and usage, leading to a flat design drilldown that focuses on data and meaningful graphics. We prototyped directly into the browser in low fidelity.

Despite a warm welcome, Witbe had to shut the project down, due to financial restrictions.


  • Sector / Type

    Big data - Analytics, Test and Measurement / Web app / Redesign

  • UX Focus

    Unbloated data, Cognitive capacity, Control feedback

  • Same data, different people

    Dealing with opposite needs in regards to the same content

  • Leader of the market

    Leader in QoS and QoE Test and Monitoring since 15 years

  • European market

    France, Belgium, Spain, Italy


Competitive analysis

A world of data and engineers

In 2012, everybody talks about big data, data mining, and data visualization. Cloud computing and open source data enable exponential possibilties. Witbe, leader of the market in France and Europe, has 5 main competitors: IP Label, Captain Dash, Cyfe, Dataiku, and Hadoop by IBM.

Witbe is open to Data Scientists and Developers (like IP Label, Dataiku, and Hadoop), but also to CEOs. They want to break the "only engineer" access that comes with big data. It is one of their strengths in their market. However, like 4 of their competitors, they strongly rely on tables, and on a preset chart and colors to display data. Unlike the rest of their competitors, they are still not mobile-friendly (80% of the market) and they don't let their users build the dashboard on the go (67% of the market). Nonetheless, their expertise in coding analytics robots easily outweights the competitors.

  1. 67 first display tables
  2. 40 addressed to CEO
  3. 60 have deep insights
  4. 80 have a mobile app
  5. 58 offers customization
Highlights of the market analysis regarding big data, and analysis competitors, such as: IP Label, Captain Dash, Cyfe, Dataiku, and Hadoop by IBM.


Hughes Lemieux, 57


Reviews the dashboard every morning when entering his office. Looks at it every once in a while. Just wants to be reassured he is paying for a service that works.

  1. Tasks

    Logs in, and reviews the dashboard.

  2. Wants

    A tool for accessing detailed and raw data when needed.

  3. Asks

    When and where dit this issue occur?

Camille Sacre, 31

Js Developer

Develops scripts for traffic, bandwith, and user experience monitoring all day long. He tries to come home early to take care of his wife and child.

  1. Tasks

    Logs in multiple clients’ account to overview metrics.

  2. Wants

    A tool for monitoring his robots’ metrics and gathering feedbacks.

  3. Asks

    What is the name of the server of this object again?

Alfred Morin, 42


Spends his work day to fix issues found on servers. He is a hard worker and comes home only when all the bugs have been fixed.

  1. Tasks

    Connects to multiple servers to identify bugs and to perform tests.

  2. Wants

    A tool for gathering all servers' bugs in one place.

  3. Asks

    Can I have access to the root of this server? I need to test the robots!

User flows


Art Direction

Solarized updated

Javascript developers and Technicians spend a lot of times looking at tables, numbers, and graphics on a screen. We wanted to address the issue of eye fatigue by using a color scheme that is not too aggressive, as pure white and pure black can be, and that has enough contrast to draw attention. This is the reason why we decided to give another application to the Solarized color scheme by Ethan Schoonover, which was at first designed for terminal usage. As the Solarized color scheme is consistent across calibrated and uncalibrated monitors, it was the perfect candidate for handling data all day long. However, in order to make a real difference with the palette, we also gave a fresh touch to the color palette to make graphics more appealing to deal with.

Color scheme
Witbe Color scheme

Down with green color

It can be unorthodox to ban green as a "everything is alright" color. Yet, after testing with users, it appears that keeping it creates more confusion. Indeed, users need to be able to instantly spot where are the issues. However, green has been kept for only two actions: dismissing a false positive, and checking an issue as resolved. We also came up with the idea of displaying a horizontal calendar for the last 3 months: it helps users to spot recurring patterns, and to react accordingly.

Calendar details
Details of the calendar

Flat design, data visualization, and intuitivity

When Windows released its Metro tiles in 2011, flat design was not at the peak we know today. However, this mix between Swiss Design and minimalism is a great way to emphasize on data and actionable content. Moreover, we were inspired by data visualization, and we worked to make the most of important data by accentuating numbers and relationships between them. The interface is also fully intuitive: users can select and type the date, or the range, they want to review, they can compare indicators on graph simply by clicking on the indicators. They can measure loss or gain of activity simply by hovering, or dragging through a period, and so on...

Graphs of a robot
Details of graphs of a robot

Inspired by annual reports

In order to support data visualization and give a sense of reporting, we used Gotham font family for headings, and body text, and call to action, Verlag family for annotations and legends. Numbers are displayed in Tungsten Medium for reporting, Vitesse Medium for errors. All fonts have been created by Hoeffler and Frere Jones, for Typography.com.

Gotham is a sans serif typeface, inspired by a form of architectural signage that achieved popularity in the mid-twentieth century, especially throughout New York City. It has been commisioned by GQ magazine. Their editors wanted to display a typeface with a "geometric structure" that would look "masculine, new, and fresh". GQ agreed that they needed something "that was going to be very fresh and very established to have a sort of credible voice to it," according to Jonathan Hoefler.

Specimens of Gotham, Verlag, Tungsten, and Vitesse font families