Duo Security · 2018

Device Insight

Device insight was the first data visualization feature released for Duo Security customers in early 2016. The goal of this feature was to help customers (IT administrators) understand the health state of their devices at a glance. We let this feature live and breathe for 1.5 years and then we revisited the design based on the feedback we gathered from customers.

Side-by-side comparison. The old Device Insight page uses donut charts and three near-identical line charts for operating systems, browsers and plugins. The new Endpoints Insight page leads with end-of-life and out-of-date breakdowns per platform, then today's counts and historical trends.
The old device insight page on the left and the new one on the right

Why design Device Insight in the first place?

75% of breaches happen because of compromised user devices.

Most breaches happen because of compromised devices or credentials. Most compromised devices are running out of date software such as operating system (os), browser, or plugin. These devices pose a serious security risk for organizations. They are open to security vulnerabilities, and leave open doors to data that needs to be protected.

Research (or get your shovel out)

Customer visits

I along side with a user researcher visited 5 customers in the Bay area to talk about how they set requirements around devices, their devices’ ideal states, and how can Duo help their administrators understand device information and take actions on that information.

Tech support tickets

I searched through our technical support database using relevant key words (such as operating system policy, device insight, out of date browser, etc.) and was able to locate dozens of tickets.

Data and analytics

Using Duo’s internal logging system (Kibana) and Google analytics, I was able to uncover how often customers interact with the current Device Insight page and if they perform any actions on the page.

Design process

Step 1: Mind Map

First, I created a mind map. This was an excellent exercise to broaden the boundaries of thinking, expose hidden connections, and think “outside of the box”.

Not sure what mind map is? Read about it.

Hand-drawn mind map centred on improved Device Insight, branching into browsers, operating systems, plugins, laptops versus mobile, managed versus unmanaged devices, and what the admin persona, Gary, will do with the data.
Mind map sketch

Step 2: Sketching ideas

Pencil and paper are the cheapest and most rapid ways to iterate upon your ideas. I shared the sketches with my engineers and PMs and showed them to customers to get early validations.

Four pencil sketches of dashboard layouts with donut charts, device totals, recent software releases and line charts of out-of-date devices over time, some coloured in.
A few of the hand sketches

Step 3: Rough mockups and UX interviews

Rough mockups is something in between wireframes and hi-fidelity sketches. The goal here is not to decide on visuals, but rather find a solution. I use rough mockups to start conversations with our customers, something that at Duo we call “UX interviews”. These interviews help me define:

  • Are we on the right track? - Is there data that is missing? - Can our customers take actions on the displayed data? - Is the terminology something that a customer understands and speaks?

Feedback from these UX interviews helps me to iterate very quick and converge to find a solution.

A grid of more than 25 grey wireframe versions of the top of the Device Insight page, labelled V1 to V23.
Nine of the top-of-page wireframes shown larger, comparing different arrangements of device totals, donut charts and trusted endpoint counts.
Three wireframe versions of the lower half of the page, each pairing a line chart with today's count of devices with out-of-date operating systems and browsers.
A few rough mockups

UX interviews are also great opportunities to bring everyone on the same page. I made it mandatory for my engineers to attend at least a few of these calls.

Step 4: Hi-fidelity prototypes and usability testing

Now it’s time to create hi-resolution mockups that will be used to create clickable prototype via Marvel app. We use these prototypes to do usability testing with customers as well as internal stakeholders.

High-fidelity Endpoints Insight page in the Duo admin panel. Coloured bars show the share of end-of-life, out-of-date and up-to-date macOS, Windows and mobile devices, followed by today's 620 endpoints with out-of-date operating systems and a 30-day line chart.
One of the hi-fidelity mockups
Interactive prototype built in Marvel App

The conclusion

Device insight was a massive project that lasted 5 months. However, success of it relied on continues collaboration amongst many people and teams:

– engineering team – a product manager – designers from the data team – pattern library team

The project is set to launch in July 2018. We are building better metrics to track how engaged our customer will be with this page.