Network Perception

UX Research & UX Design

Screen Shot 2020-08-06 at 1.13.14 PM.png
Screen Shot 2020-08-06 at 1.18.52 PM.png

The Client:

NP-Live is a Network Security and Compliance Software for Electrical Utility Companies. It manages IT infrastructure, made by the company Network Perception.

My work for Network Perception has been in three main phases. This is the first Phase.​

The Task:


Conduct a Heuristic Evaluation of the NP-Live software.


A spreadsheet identifying all usability issues. Ranked by severity, with accompanying screenshots, and proposed solutions.



  1. Define Heuristic Criteria

  2. Evaluate through Use Cases

  3. Identify Issues

  4. Propose Solutions

  5. Developer Handoff

Defining Evaluation Criteria

Evaluating a platform heuristically is to evaluate the ways in which the software or app allows users to problem solve.​ It is a powerful tool for determining UX needs.


Method of Evaluation

Heuristic Criteria was based on Jakob Nielsen's 10 General Principles for Interaction Design, with some modifications to answer specific challenges in Network Perception's NP-Live software.​

Prioritizing Changes

It was important to triage, or rank, the needed improvements in a way that would allow developers to prioritize UX/UI updates to NP-Live. The simple ranking system was:

0 = Cosmetic ​

1 = Low

2 = Medium

3 = High

4 = Urgent

Heuristic Categories

Visibility of system status​

Can users understand what the app is doing?


Is the app functioning in the way that user expects?

​User control

Do users understand how to manipulate the app?


Are interactions consistent across the app?


Is this interaction creating an error?


Can users recognize needed tools easily?


Can users move freely?


Are there extraneous interactions?


Can users recover from errors?

​Help and documentation

Is guidance readily available?



Is this a cosmetic issue?


Now that Criteria have been defined, the process of working through the app using the criteria will be discussed.


User & Use Case Based Evaluation

User Personas and Journeys

Network Perception produced an extensive document with user personas and detailed step by step use cases. ​

To evaluate NP-Live I went through the entire sitemap for each user and use-case to look for violations of the Heuristic Criteria defined above.


Let's walk through an Example:


Rome is a Compliance Analyst.

Rome uses NP-Live to make sure that network connections are up to speed with compliance standards set by the NERC.

Evaluate NP-Live from Rome's perspective.

While going through Rome's use case an issue was found.

The issues were labeled in a spreadsheet.


Issue #33

Heuristic Violation:




Issue Details:

Two buttons that perform similar functions do not look the same, creating confusion.


Define a single button type for this action and apply everywhere this interaction takes place.​

modern-browser-mockup (1).png

*Screenshots like this were paired with every single issue.

After each use case was evaluated The Development Team received a comprehensive, actionable spreadsheet


In all, the Evaluation found 200+ instances in which UX improvements were needed.

Developer Handoff


The final product of the Heuristic Evaluation was this Research spreadsheet.


It included every issue, its location, its severity, its description, a solution, and a screenshot.




Screen Shot 2020-06-13 at 5.02.11 PM.png

Graphic representations of the issues found were provided to give an at-a-glance look at areas for improvement

Screen Shot 2020-07-29 at 1.45.39 PM.png
Screen Shot 2020-07-29 at 1.45.34 PM.png
Screen Shot 2020-07-29 at 1.45.46 PM.png


Analysis of the research by myself and The Development Team led us to the decision that a Design System needed to be created to bring consistency to the platform.

This consistency would provide the framework to fix a majority of the interaction issues.

That work is covered in the next project.

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 - Design System Application & Dashboard Design

The third phase was to develop a backend Dashboard for a different set of users.