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
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%
Monitor devices at a glance and push changes in seconds.
Push changes from one device to a whole group of them.
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.
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 diagrams helped crystalize what types of pages were necessary and the big-picture relationships between them.
I then broke down the hierarchy diagram further into pages, flows, and individual features.
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:
A list of all devices to monitor at a glance or select from
Selected device-level info
Ideation + Prototyping
I then explored ways of displaying these two sections.
allows for convenient viewing of both panels at the same time
Information Architecture (Page-level)
There were 6 levels of information I had to display on this screen:
The top navbar of dashboards, analytic & reports, etc
Different infrastructure subpages
Info for choosing a Device + status
Individual Device info
Device info categories
Subsections within the device categories
I later reused this layout with slight tweaks for multiple other pages like device groups and inspecting configurations.
Interaction Costs + Tradeoffs
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.
For example, instead of columns for the device and task status, I used colors and tooltips to visually communicate them as states.
Given the high stakes of mistakes, I designed multiple error prevention and tolerance mechanisms.
Even though it added more visual complexity, I included names under each icon given the high stakes problems if users mixed them up.
I also needed to visually communicate clusters of devices and explored various ways of conveying the relationship.
best conveys relationship without disrupting IA
Empty States + Onboarding
I leveraged color, microcopy, and tooltips to prompt users towards actions
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.
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.
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.
After my designs were reviewed, they were signed off for development
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.