Design Internship at Duo Security

Improved the Security feature on Duo Mobile, moderated usability tests and learnt a great deal from the Design team

glimpse of final design
  • Task: Redesign the Security Checkup feature to enhance users' trust in the system
  • What I did: User journey map, sketching, prototyping, usability testing, icon design, content strategy, collaborative work with developers, designers, PM and researchers

Duo Mobile works with Duo Security's 2-factor authentication service and can generate passcodes for login and receive push notifications for easy, one-tap authentication. My primary project as a designer on Duo Mobile, was to redesign the Security Checkup feature. This feature was released as a Beta feature (Admin account only) in early 2017, and was slated for a General Availability (GA) release in Fall 2017.

beta design

SECURITY CHECKUP

The Security Checkup feature was responsible for checking the security hygiene of a device. By alerting the user to security issues on their device such as no passcode, out of date OS, etc. it aimed to highlight good practices (eg. Why should you have a passcode?) and provide instructions for remediation of the detected issue (How to enable a passcode?).

NEEDED SOME DESIGN FIXES

Initial testing of the feature in the Beta version brought three problems to light. Users perceived the feature as simply an alert rather than a helper. The feature also did not accomodate edge cases that affected users' trust in the feature. It was also necessary to redesign the placement of and user interaction with the feature.


THE REDESIGN FLOW

The entire redesign comprised three main stages — changing the perception, designing for accommodating edge cases and improving the user interaction.

icon iterations

I. Improving the users' perception

The perception of this feature resulted from a combination of visuals and the tone of the copy. The ultimate goal was to make the users perceive the feature as a helper and not as alert. I developed and tested various icon iterations to improve the visuals.

Landing text and icon change


By using a combination of ambiguous copy in the dropdown label and an extra paragraph of text, I could provide more context to the user while making space for the edge case design.





concept iterations for dropdown contents for FDE

II. Designing for edge cases to improve users' trust

To accomodate edge cases, I had to design an additional page beside the one for normal case. The objective was to make sure users understand that the links are clickable and would lead to a new page in the app. I designed various iterations for the dropdown for each issue by tweaking the visual treatment.

FDE final design

Not all Android devices are shipped with disk encryption, so users have to manually enable encryption. This was the normal case that the Beta version addressed. But Security Checkup identified encrypted devices with no passcode as non-encrypted devices. So it was necessary to design a set of remediation instructions for this edge case.

OS final design

The edge case for OS issue resulted from the fact that device manufacturers occasionally do not provide updates to older models. To tackle this, I designed instructions to educate the users that the latest OS supported by a device is not the same as the latest OS available for Android OS.





concept iterations

III. Rethinking the user interaction

The main goal of the feature was to notify users of the security issues without being persistent on the home screen. I designed and tested iterations featuring various ways (including swipe gestures, static drawers, action sheets) a user could interact with the feature.

iterations for dismiss dialog box

User research pointed out that users wished to hide the warning notifications. Since it was important that users should have the perfect security hygiene, it became necessary to educate them about the alternate way to access this feature after dismissing the notification.


SO WHAT HAPPENED NEXT

After getting the designs tested and approved by the senior designers, I shared them with the developers though a tool called Zepelin. Text (landing text + remediation instructions) and assets (icons and illustrations) were some of the other materials that I delivered to the developers. The feature was shipped in late September and is currently in use by over 2.5M users of Duo Mobile.


WHAT I DELIVERED

By the end of my internship, I had -


LOOKING BACK AT A WONDERFUL SUMMER

I was fortunate enough to spend my summer at a wonderful company being surrounded by some of the kindest people I have ever met. Working in a professional environment at Duo made me aware of my weaknesses as a designer and helped polish my communication skills while regular collaboration with developers taught me about proper methods for documentation and sharing design assets.