Flight journal

A journey in ProcessOut's mission control

When data meets UX

by Jeremy Lejoux on

A few months ago we decided to completely redesign our dashboard. To do so we started from scratch using ReactJS and our API. Now that everything has been done, here are a few tips we would have liked having before getting into it.

Data organization

Most of the time when designing a dashboard you will want to display as much information as possible. It is important to keep in mind that when someone enters your dashboard he does not know where to look at first and might be looking for specific information. The first thing to make sure is to efficiently split the information. Indeed, you want everything to be as clear as possible while not displaying too much at the same time. A great way to make sure you won’t lose the user is to place yourself as a new one every time you create a new page. That way you will constantly be designing with the idea that the person who will use your product does not know anything about it. You should also be asking yourself where should the most important information be? Where should the second most important information be?

Using charts

There is a good chance that you will be using charts on your dashboard. It is extremely important to use the right type of data visualization for each information you want to display. Here are the main chart types you will mostly need:

  • Line chart. They are a great way to show data evolution across time. This type of chart is well known and quickly understandable.
  • Bar chart. If you want to compare categories such as countries, languages etc or the evolution of data across months or years they are the one to go with. They are easy to understand and very compact.
  • Pie charts are also a way to go when comparing different categories which are more difficult to understand at first sight.

Other types of charts can be used as well but will only be needed for specific cases.

Keeping consistency

If you’re splitting the information correctly you will end up having a large amount of pages on your dashboard. This is not an issue as long as you keep it consistent. First of all choose a color scheme and stick to it. Try to use colors that speak for themselves (green for positivity, red for mistakes or errors, and so on). Keeping the same style for all the forms, inputs is also very important as your users will instantly know what they can interact with when a form is displayed.

Keeping everything simple

Most of your users will be browsing your dashboard very quickly and won’t spend too much time on each page so keep it simple! Use clear keywords, simple colors and try to explain complex features. This can be done using tooltips on which the user can hover over or even by using a light description text under your feature label.

User interaction

A dashboard is, by definition, a tool that keeps the user in control and allows you to manage something. This means that when using one you want to be able to interact well with it. Interaction can be done with data visualization, animations, or interface customization. In the first case it is easy to end up having a complex data page if it does not meet point 2 and point 3. But having beautiful, interactive, and engaging charts is very important. You should also pay attention not to overcharge your dashboard with too many animations and keep consistency through them.

Conclusion

Overall designing a dashboard is more about projecting yourself as a user and trying to keep everything simple and intuitive. Keep in mind that the design part is never over and that you should constantly be trying to improve it by retrieving feedback from your customer.