Improved User Security for SaaS & Mobile

Overview

Tradie SaaS B2B client added Two-Factor Authentication as a mandatory requirement for Australian users.

My contribution

Senior UX Designer Product Lead Visual Designer

The team

1x Head of Product 1x Senior UX Designer – Mobile 1x UX/UI Designer 1x Design Lead (Video animation) 1x CS Video Editor (Video animation)

Year

2021

The tools

Sketch + InVision Confluence Zoom JIRA Heap

The activities

Business requirements Complementary research User interviews User flows High-fidelity design (4 rounds) Usability testing Agile user stories

Challenge

A major partner required that Fergus implement two-factor authentication for all of Fergus’ Australian users that had access to customer data. This included both admin users on the desktop and field users on legacy or next-generation mobile apps. This need for extra security was driven by the Australian Government and had hard deadlines for implementation.

The majority of the user base had only a small amount of previous exposure to apps or software that regularly required two-factor authentication for every login. The majority of field users did not have an existing authentication app installed that could be leveraged for the implementation of this feature.

The feature had to be implemented across three (3) different UIs with three (3) design systems; An angular app, a react native app and a react web platform. The solution had to minimise the development resource required to build it across these three different technologies.

Approach

As a Senior UX Designer, I conducted wide-ranging complementary research across a large number of web-based two-factor authentication (2FA) and two-step authentication (2SA) solutions. Based on this research, I developed a concept with a focus on ease of use for low digital maturity. The initial concept was a step-based wizard that allowed the user to select an authentication method (either a 3rd party authentication app or SMS) as the 2FA solution and then set up the solution.

An intermediate UX/UI Designer designed the first high-fidelity wireframe iteration of the web and mobile 2FA enrollment and logon user flows. Based on early technical feedback, I then merged these designs into a single responsive design that could accommodate both web and mobile to lower development resources. In a third iteration, to make the design mobile-first, I simplified the design so that users only completed one action or learning per step.

Due to technical constraints, I decided to remove the ability to do backup codes as a reset mechanism. And instead, designed a solution that would allow the customer’s admin to reset 2FA for their user. This reduced support overhead and empowered customers to take control. To support this change I created high fidelity wireframes that would allow admins to enable/disable 2FA for their account and reset 2FA for account users.  A Senior Mobile UX designer then tested the mobile prototype with our mobile users via remote testing.

The results from the usability testing indicated that while the web user flow worked well, the flow was too complicated and difficult to set up for a user to use an authentication app on the same device as the mobile app. We decided to only let the legacy mobile users initially set up using the SMS method, while the option to use both methods would be available on the next-gen mobile app. To complement the designs, I created user stories and acceptance criteria (BDD).

As product lead, I organised the delivery of the feature across three squads and coordinated the go-to-market release with customer-facing teams, responsible for supporting the mandatory go-live for Australian customers.

To help the user through the process, we decided to create a video explainer for customers that would see in-app. The Marketing team was responsible for the script and voice over, and the design team was responsible for the video animation. I created the animation screens and assets, and the design lead and customer support created the animation video.

Outcome

The solution included:

  • New 2FA enrollment and setup flow(s) for web and legacy mobile app. Users could choose to enrol using an authentication app or SMS mobile.
  • An In-app explainer video before the users begins enrollment.
  • New 2FA login flow(s) for web and legacy mobile users apps.
  • A new Security Settings page that allowed customer admins to enable or disable 2FA for their organisations.
  • An update to the User Settings page that allow customers admin to reset 2FA for users.

Next project