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
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
France, Belgium, Spain, Italy
In 2005, Livnat et al, from the University of Utah, discussed a new way of visualizing data for situation awareness. Their methodology emphasizes the importance to having access to the right information (what) at the right time (when) in the right location (where), during a crisis/emergency situation.
In their research on Cognitive Load, Sweller and al.(1998) described the salient role of information architecture and white space in cognitive processing of an unknown data. The difficulty of presentation induces a longer time to understand and use the new information.
Users become frustrated when they lose the power of the action they are performing. Under the term control feedback, it is known to have a negative impact on their engagement as well as their overall performance, and evaluation of an interface.
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.
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.
Logs in, and reviews the dashboard.
A tool for accessing detailed and raw data when needed.
When and where dit this issue occur?
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.
Logs in multiple clients’ account to overview metrics.
A tool for monitoring his robots’ metrics and gathering feedbacks.
What is the name of the server of this object again?
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.
Connects to multiple servers to identify bugs and to perform tests.
A tool for gathering all servers' bugs in one place.
Can I have access to the root of this server? I need to test the robots!
Users have access to the same data, but with different angles. They can interact with it, and analyze in great detail the issues that have happened. Here are the different views of the dashboard.
CEO / General view
Technician / Advanced view
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.
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...
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.