Network Perception - Phase 3

Creating a Dashboard for Backend Analysis

The Client:

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.​

The Task:

Now, that the existing issues with the software had been fixed in Phase 1 and Phase 2, Phase 3 was the first time I was creating an all new feature based in the Design System I created.

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.

Deliverables:

Sketch and Zeplin Files

1. Dashboard

Defining Needs

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

Pie Charts

Bar Graphs

Tables

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.

Modularity

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

Widget Templates

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.

Customization

Users are able to filter all widgets by time and place to create accurate results.

Filter menu

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.

Visibility menu

Examples of Dashboard Customization

Default Dashboard

Customized Dashboard

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

In Conclusion

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

Network Perception

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.

© 2023 by David Thrift