NP-Live is a Network Security and Compliance Software for Electrical Utility Companies to manage IT infrastructure, made by the company Network Perception.
My work for Network Perception thus far has been in three main phases. This is the third Phase.
Because the Dashboard will be used by a different set of users than the front facing portions previously designed the Dashboard had to be consistent with the rest of the platform while answering these unique needs.
Sketch and Zeplin Files
Creating a Dashboard for Backend Analysis
A good Dashboard provides at-a-glance information on the status of the system.
For NP-Live the Dashboard has two use cases.
1. By Managers and Team Leaders to plot progress and set goals.
2. By Network Engineers to identify areas where problems may be occurring.
Example of a Dashboard for Marketing from the company Salesforce
The Design needed:
14 Widgets with designs for
The design needed to be Modular
Widgets needed to be able to be hidden and or rearranged at will by users
A way to filter Widgets by timeframe
The data needed to be interactive
The interactions and design needed to be consistent with the rest of the application
User Profiles from Phase 1
Now that Design Goals were set, let's see how they were met.
The grid to the right allows all widgets to fit together by creating standard sizes.
Each red block is a unit of measurement.
Any widget can be defined as 1x1, 2x1, 2x4, and so on as needed.
The result is that widgets will always fit together and make a pleasant visual arrangement.
The modular grid
In the slider below you can view the various templates of widgets that were designed. Note that some show how details of the data can appear on click.
Users are able to filter all widgets by time and place to create accurate results.
Rearranging and hiding of widgets can be accessed from an intuitive visibility menu.
This allows many different types of users to have Dashboard tailored to their needs, or to keep data secure.
Examples of Dashboard Customization
Interacting with Data
Data needed to be clickable to provide more details or to open table of data.
The video on the right walks through some of these interactions, including opening a table of data.
The table it opens is the same type as in the rest of the application to create consistency.
Dashboard Interaction Examples
Final Dashboard Design
The Final Design provides the NP-Live software with a Modular, Customizable, set of Template Widgets, that Represent Data, and are Filterable.
Final Dashboard - Default
Final Dashboard - Visibility Menu
Final Dashboard - Data Table Open
I really enjoyed creating this Dashboard. Many of my previous designs were focused on a front end user so it was an especially interesting challenge to design something for those on the backend.
My relationship with Network Perception and my work on their NP-Live software has been immensely rewarding and I can't wait for it to continue.
If you liked this design and want to talk about how we can solve problems together, contact me HERE
Phase 1 - UX Research & Heuristic Evaluation
The first phase was to complete a thorough Heuristic Evaluation of the entire NP-Live Application.
Phase 2 - Design System & UX Overhaul
The second phase was to build a Style Guide, Design System, and overhaul the UX site-wide.
Phase 3 - Dashboard Design
The third phase was to develop a backend Dashboard for a different set of users.