Network Perception - Phase 2

UX Design - Design System Creation

Old Version of the Platform

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

The Task:

Phase 1 showed the need for a new design system that would reformat the entire app. This would create a framework for developers to solve interaction issues with consistency.

Deliverables:

Sketch and Zeplin Files

1. Style Guide

2. Design System

3. Full Page by Page Redesign

Old Version of the Platform

Project Process

This UX/UI overhaul of the entire NP-Live application was broken down into 3 major sections, which themselves broken into weekly sprints.

The Design Process followed Brad Frost's Atomic Design Methodology in which you design from the least to most complex elements.

Atomic Design Method: Illustration By Ed Orozco

Project Outline

1. Define the Style Guide

Low Complexity

2. Define the Design System 

Medium Complexity

3. Apply the Design System

High Complexity

Style Guide

Color Palette

Typography

Buttons

Labels

Lists

Menus

Navigation

Dropdowns

Alerts

Icons

The Style Guide was created using the Research from Phase 1.

The research dictated which elements needed designing, and which elements were fine as is.

The Style Guide created designs rules and provided context for the use of each.

 

It would be a framework for future designs.

Color/ Meaning inconsistencies in the original application

Button inconsistencies in the original application

Developer Handoff

Designs generated in Sketch were handed to developers through Zeplin to ease implementation. This sped up the iterative process by allowing for commenting and collaboration within the design.

Ready for Implementation

Zeplin provided images and other assets in accessible libraries.

The new style Guide in Zeplin the way a Developer would see it

Final Style Guide

Portions of the style guide are presented in the slider below.

The Style Guide was then used to define more complex elements 

Next - Now that the most basic elements were defined, a Design System for more complex elements could be defined.

Design System, What's Needed?

Dialogs

Spreadsheets

Tables

Forms

Comments

Notifications

Data Display

Menus and Navigation

The Design System needed to be focused on Data Analysis Elements.

This application is at its core, a Data Analysis and Data Input program taking data from across the network and presenting it for analysis.

Table of Data overlaying the Map preventing interaction

The key feature is the network map.

 

In early versions of the application users could not compare data to the map.

Dialogs and tables would overlay the map and prevent the comparison of data in a table to a visual on the map.

The Design System needed to make data and the map work together.

The Network map in a previous version

Panel Actions vs Table Actions

Separating types of Interactions

Each menu interaction was separated into two groups.

Panel Actions:

These actions open in the menu pane and allow users to never lose sight of the map but do not provide as deep analysis.

Table Actions:

Users may temporarily lose sight of the map to view tables that provide robust data.

The New Menu in place

Example of Panel Action

Example of Table Action

Defining Key Interactions

Comparing Data to the Network Map

Once interactions were separated into Panel and Table actions, interactions were designed that would allow users to hide, expand, and move data sets so that data was always comparable to the network map.

This ability to control data did not exist in the older version of the platform.

The video on the right shows some of the ways in which tables can be moved by users to view the map.

Applying the Design System and Style Guide 

The final step was to take the Style Guide, the Design System, and the new interaction paradigms, and use them to bring every screen of this software into consistency, creating where needed, new interactions.

More Table Actions

More Panel Actions

The Design Document - Showing Many Screen Designs

In Conclusion

I created a comprehensive Style Guide and Design System that was used to design over 40 new screens and over 100 interactions that made it orders of magnitude more user-friendly and provided a framework for future expansion.

This was my favorite Design project I have done so far. The ability to Lead Design and Research to create something large that I feel ownership over was immensely rewarding and educational.

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