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.
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”.
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.
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 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.
One of the hi-fidelity mockupsInteractive 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.
