top of page

Redesigning Google Authenticator

10 Weeks

Google Authenticator is a dated application. Aside from key security features that other competitors have incorporated, they also lack brand cohesion and accessibility options.

Impact

Received the University of Washington School of Informatics Innovative Award, out of 100+ teams in the INFO 200 course, awarded by teaching assistants.

Role

User Research
Prototyping
UI Redesign
Academic Writing

Tools

Figma
Adobe Illustrator
Hand Sketching
User Personas

Teammates

Duaa Zaheer

google-staging.PNG

Introduction

In 2015, there were 59 million cybersecurity incidents reported worldwide, and by 2020, this number rose to 300 million. Released in 2010, Google Authenticator is a Google application for two-factor authentication, commonly used in conjunction with Google accounts, and designed to reduce the risk of online breaches. Rather than verifying an account during the login process with a text message, Google Authenticator generates random codes a user can enter instead as the second factor.

Design Process

Article Research

Each team member began by reading 3-4 articles to gain an objective understanding of Google Authenticator's affordances and the grand engineering challenge of securing cyberspace.

Competitor Analysis

We compared and contrasted the differences between Google Authenticator and other two-factor authenticator applications such as LastPass, Authy, and Duo. As part of this analysis, we also looked at user reviews on the iOS app store to learn what types of features users liked or disliked about these applications.

Some notable quotes from our analysis:

  • "If you use google authentication you have to do everything all over and there is no backup with google authentication."

  • "I still prefer to use Authy over something like Google Authenticator, which is much faster, because Authy's UI is better and it's more fully featured."

  • "The sync between devices is super easy and seamless."

​

User Personas

To facilitate our design process, we focused on scenarios regarding two user personas. We sought to analyze the two broad categories of user types for Google Authenticator in order to better understand our users, reflect upon their needs, and improve the functionality of the Google Authenticator application.

​

Person A

  • 30 years old

  • Active user of Google Authenticator

  • Experienced with smartphone and tech savvy

 

Person B

  • 51 years old

  • First-time user of Google Authenticator

  • Recently purchased a new smartphone and often asks daughter for help with technology

User Interaction Flows

ui-flow-original.PNG

This is the UI flow for the original application.

ui-flow-redesign.png

This is the UI flow for the redesigned application, created using Adobe Illustrator.

Ideation

Each team member began by creating 1-2 hand-drawn, low-fidelity sketches of features and a redesigned Google Authenticator based off of the background research we conducted.

ui-flow-brainstorming.PNG
low-fidelity-sketch.PNG

Prototyping & Final Design

Following ideation, my team reconvened and discussed the sketches we had created. We noted the key features to include based off of our User Personas and background research. We agreed to iterate upon my low-fidelity sketches in Figma.

Redesign Features:
Branding

  • More semantic aesthetics and visuals

  • Logo


Functionality

  • Biometric requirement to enter app

  • Set-up instructions for first-time users

  • Account backup

  • Syncing for multiple devices

  • Central location to change passwords


Accessibility

  • Option to increase text size

  • Option to read audio recitation of six-digit code aloud

  • Option to increase contrast

google-staging.PNG

Takeaways

  • Learned how to consider application scenarios for a diverse user group with user personas

  • Learned how to redesign an improved UI flow based off of an existing UI flow 

  • In the future, when designing for accessibility, conduct validation testing with targeted group

bottom of page