Old Version of the Platform
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.
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.
Sketch and Zeplin Files
1. Style Guide
2. Design System
3. Full Page by Page Redesign
Old Version of the Platform
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
1. Define the Style Guide
2. Define the Design System
3. Apply the Design System
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
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?
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.
These actions open in the menu pane and allow users to never lose sight of the map but do not provide as deep analysis.
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
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.
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.