The Zero Trust Controller

#prototyping #IA #systemsthinking #visualizations

Supporting remote workforces by making the monitoring and management of devices simple and efficient. 

Role: Over 2019, I worked at Pulse Secure (acquired by Ivanti) on the Zero Trust Controller with Davide Calvo, the Principle UX Designer.

 

Solution: The Zero Trust Controller boosts enterprise security and productivity by helping administrators manage the health, configuration, and compliance of remote devices.

I received the ok to release this case study from Pulse legal, hr, and design

Outcomes:

  • Shipped & helps 20k+ enterprises increase safety and productivity

  • Supported thousands of businesses as they transitioned to remote work due to the pandemic

  • Designed a 600+ component library for the project which was reused for other products and reduced company-wide development time by 10%

hero copy.png

Selected Screens

The Dashboard

Monitor devices at a glance and push changes in seconds.

hero copy.png

Appliance Groups  

Push changes from one device to a whole group of them.

Compare Configurations 

Inspect the differences between device configurations

Project Design Principles

Principle 1: Hick's Law

The more stimuli, the longer it takes users to make a decision. 

Network attacks need to be dealt with swiftly, so reducing unnecessary complexity and interaction costs was a key priority.

Screen Shot 2021-04-08 at 9.54.05 PM.png

Principle 2: Tesler's Law

There is a certain amount of complexity that cannot be reduced. Although I focused on reducing stimuli through Hick's Law, it shouldn't abstract away any necessary features and info.

Pulse One Heuristic Evaluation

 

My design was influenced by an existing product called Pulse One to match existing customers' mental models. I conducted a heuristic evaluation on Pulse One to evaluate opportunities and design patterns.

Hierarchy + Flow

There were a list of features that would be ported over from Pulse One  which I organized into hierarchy diagram and flows.

Hierarchy Diagram

Hierarchy diagrams helped crystalize what types of pages were necessary and the big-picture relationships between them.

Flow Diagram

I then broke down the hierarchy diagram further into pages, flows, and individual features.

Stakeholder Interviews

Based on interviews with QA engineers, users (via the customer success team), and the PM, there were two reoccurring patterns needed for all of the screens:

  1. A list of all devices to monitor at a glance or select from

  2. Selected device-level info

Screen Shot 2021-04-08 at 10.12.45 PM.pn

Ideation + Prototyping

Wireframe Layouts

I then explored ways of displaying these two sections.

Screen_Shot_2021-04-08_at_8.45.04_PM.png
Screen_Shot_2021-04-08_at_8.43.21_PM.png

allows for convenient viewing of both panels at the same time

Screen_Shot_2021-04-08_at_5.25.22_PM.png

Information Architecture (Page-level)

 

There were 6 levels of information I had to display on this screen:

  1. The top navbar of dashboards, analytic & reports, etc

  2. Different infrastructure subpages

  3. Info for choosing a Device + status

  4. Individual Device info

  5. Device info categories

  6. Subsections within the device categories

     

Screen_Shot_2021-04-08_at_5.57.22_PM.png

I later reused this layout with slight tweaks for multiple other pages like device groups and inspecting configurations.

Screen_Shot_2021-04-08_at_8.01.44_PM.png
Screen_Shot_2021-04-08_at_8.05.02_PM.png

Interaction Costs + Tradeoffs

 

Navigating Alignment

Developers pushed for an 8 column table to increase access to information, but the sheer amount of information was adding more interaction costs than it was reducing.

As a compromise, I designed a new table that conveys the same information but using color and tooltips instead of columns.

Screen Shot 2021-04-08 at 11.52.41 AM.pn

For example, instead of columns for the device and task status, I used colors and tooltips to visually communicate them as states.

Screen_Shot_2021-04-08_at_4.16.54_PM.png

Error Prevention

Given the high stakes of mistakes, I designed multiple error prevention and tolerance mechanisms.

Screen_Shot_2021-04-08_at_5.45.09_PM.png

Even though it added more visual complexity, I included names under each icon given the high stakes problems if users mixed them up.

Screen_Shot_2021-04-08_at_5.35.57_PM.png

Clustered Devices

I also needed to visually communicate clusters of devices and explored various ways of conveying the relationship.

Screen Shot 2021-04-08 at 4.56.22 PM.png

best conveys relationship without disrupting IA

Screen Shot 2021-04-08 at 4.56.04 PM.png
Screen_Shot_2021-04-08_at_4.58.22_PM.png

Empty States + Onboarding

I leveraged color, microcopy, and tooltips to prompt users towards actions

Screen_Shot_2021-04-08_at_5.13.03_PM.png
Screen_Shot_2021-04-08_at_8.00.17_PM.png
Screen Shot 2021-04-08 at 4.56.12 PM.png

Visual Design

Designing a 600+ Component Design Library

Pulse Secure didn't have any Sketch component designs, so I designed a full set of dark and light UI Sketch components for this project based on the company's existing react.js library.

Screen_Shot_2021-04-08_at_8.57.24_PM.png
Screen Shot 2021-04-08 at 11.18.06 PM.pn

Web Accessibility Guidelines

At the end, I checked to ensure designs complied with WCAG accessibility standards and could be used on a tablet as well.

Screen Shot 2019-07-26 at 5.29.49 PM.png

Dark & Light UI

Users could easily switch to either mode. Dark UI was the default for my mockups to reduce eyestrain and focus on the visualizations.

Screen Shot 2021-04-20 at 8.11.52 PM.png

Shipped!

After my designs were reviewed, they were signed off for development

Reflection

This project was a complex challenge with many moving parts. It became crucial to learn how to leverage cross-functional partners and gain a holistic understanding of the product to inform my design decisions.

“The quality and the timing of Justin's deliverables have been impeccable during the entire period, while his attitude remained both positive and proactive. As his manager, I received extremely positive feedback about him from all his co-workers, with no exceptions." – Davide Calvo, Principal UX

Pulse UX Power Duo.JPG
MicrosoftTeams-image (3).png
Screen Shot 2019-08-26 at 6.45.56 PM.png
Picture1.png
Pulse Secure Dashboard    Ford Retail on Wheels App