Nexthink

 
 

Portal V6

Portal - along with Finder and Search - form the core of the Nexthink software. The proposal of the Portal is to be a friendly and less technical environment.

In this project we had to come up with solutions to display a high volume of complex information without cluttering the screen and becoming too overwhelming.

 

Dashboards

Users can build their own Dashboards that consolidate and compare live and historical data. They are fully customizable by widgets and can be edited in real time.

 
 

Widgets

They're the soul of the dashboards. Acting as building blocks, there are a wide array of types of widget, like tables, metric lists, line charts, gantt charts, blocks of text and more.

Reordering the dashboard
In some situations we had to come up with intuitive and well established interactions, like drag & drop to achieve good results.

Publishing module – scroll behaviour
With a high density of information in the screen, we had to minimize the addition of new elements, but at the same time keeping them easy to be discovered.

Renaming dashboard error message
Messages had to be displayed as the interaction was going on, so behaviour patterns were created to accomplish that.

 
 

Menus

Menus were also an important part of this project. They may behave in many different ways, displaying filters, drop downs and calendars. They could also have sub levels in a limited space environment.

 
 

Components

In a project with such complexity, a library of components had to be created. The development team was situated in a different country, so for the sake of consistency, the best way was to use the same measurement rules for each element; from icons to buttons states and form elements.

 
 

Visual Elements

The best way to display all the information we needed was to develop a system to keep everything organized and structured. Screens with lots of information had to coexist with relatively empty areas. Numbers and data had to look crisp. Typography rules had to be established and graphics needed to stand out.

Grid
By the characteristics of this project, a special care was given when creating its grid. It has 12 columns of 72 pixels with a gutter of 16px between each column. All components align to an 8 pixels square baseline grid. Type aligns to a 4 pixels baseline grid.

Typography
Roboto is the typeface of choice. Slightly condensed, it works well in tables and graphics.
For titles in the dashboard, the original choice was Gotham. But due to copyright issues, Montserrat has been the choice to replace it.

Colors
Colors do have to carry a meaning in some situations and in others don't. So a palette was created having that in mind. For instance, a hue of blue and green should communicate something without saying if is good or bad. And in other scenario, green (good) and blue (neutral) have to co-exist with red (bad) and yellow (attention). A support palette was also created for some specific cases.

 

Project's outcome

The design system is holding itself well. Different modules with lots of data have been created and the results look pretty good. Clients were pleased by the freshness of the interface, specially when compared to the previous versions.