CONTEXT

Mobile Key is an authenticator app used to complete multifactor authentication when signing into Enterprise applications. 

PROBLEM

Currently, the app is not compliant with accessibility or brand standards. Data reports show increased percentages in authentication failure rates and the help desk reported high call volume for passcode issues.

FINAL SOLUTION

Introducing the new and improved Mobile Key. Through this design, users are able to spend less time signing in and gain a sense of security with the use of brand standards.

RESEARCH

I also conducted 8 remote user interviews via Microsoft Teams with users aged 20-55 years old. Our goal was to determine:

• Mobile Key Users: Why did you choose it as your authenticator?

• Downloaded Mobile Key but only used it once: Why did you only use it once?

• Non Mobile Key Users: Have you heard of Mobile Key? What can you tell us about it.

We also ran a competitive analysis around the passcode feature of other authenticator apps. We checked our their branding, UI, how their homepage is laid out, and what features are available to the customer.

IDEATION

One of the key considerations when understanding the user needed functionalities of the app was if a traditional app navigation bar at the bottom of the app was necessary. We went through several different design concepts that didn't end up satisfying user needs. Here are some ideas that did not end up as our final solution.

USABILITY TESTING

When we solidified the design and finalized our prototype, we ran a moderated usability tests via Microsoft Teams using a Figma prototype. 8 users aged 25-55 years old were given the following scenarios and tasks:

1) Imagine you need to sign in to a critical application to complete a daily task for your job duties. Show me the steps you would take to access that application using Mobile Key.

2) You need to get a passcode to sign-in to ServiceNow to search the knowledge base for a question you have. Show me how you would get a passcode.

FINAL DESIGN - HOME SCREEN

We eliminated the navigation bar in the app and brought the focus to the only feature currently available in the app.

FINAL DESIGN - PASSCODE FEATURE

When a user taps on "Tap for a passcode", they now have a visual to show the timer as it runs out. The screen reader also reads out the passcode including the time left until the next code generates. We eliminated the "Copy Passcode" button because the native to web flow is single sign-on and users do not need to input a passcode.

REFLECTION

By completely rebuilding the app, we were not only able to improve the accessibility and interface, we were also able to significantly improve the API response times and large improvements were made in tap target space. Some things I learned throughout this process:

• Always revert back to the business goals and KPIs. It is easy to get lost in cool ideas or features.

• Use clear and concise language on the interface.

• Small changes can yield big impact.