App Design Critique: Google Authenticator app

Published in

mzdraper

7 min readMar 8, 2020

Google Authenticator is a 2FA code manager with its sole function to add and generate six-digit 2FA codes. I use this app on a daily basis to log into work and personal sites. It is an extremely simple user interface that I’d like to explore.

I’m not going to explore the pain points of switching or losing devices because that’s a rabbit hole with work security and the other apps that are integrated with it.

How does it work?

There are two workflows a user would undergo when using this app: adding a new 2FA token and retrieving a 2FA code. There are other supplemental features specifically around the 2FA codes, such as editing the name of a 2FA code or deleting it from the app. There are less relevant features such as viewing the TOS, reporting a problem, etc. that I won’t go into.

User flow for retrieving a 2FA code

What’s not working?

Using this application daily for multiple websites, I’ve been frustrated over:

using the wrong code for the wrong website
adding one site multiple times and not knowing which one to use
unnamed codes (though this is somewhat a user error, design can solve it)
opening the app when the timer is about to end.

How could it be improved?

Let’s first think about why this app is designed the way it is, screen-by-screen.

The navigation bar’s icons are conventional icons for “menu”, “add”, and “edit”, which are the respective functions. Why did they not tuck plus and write into the menu? It’s likely because they’re more common actions than submitting feedback or looking at legal documents. However, they are right next to each other, which might be a problem for someone with larger thumbs.
Each 2FA component is comprised of the same 4 elements. Are there any repeating elements? The time chart. Is this the best way to represent this? What if the timer was at the top, but the 2FA code was at the bottom? Is it visually difficult that the text of each component is identical?
Why is there so much negative space at the bottom when I have 3 more codes? Does each component need this much space?

For context, the numbers first turn red and then begin to flash when there’s only a couple seconds left.

The text is red, the pie timer is smaller but doesn’t change colour.
All the codes are running out at the same time, meaning all of them are flashing at once. Is this the best visual to give to users? It makes it seem more alarming than it is. Is there another way to communicate time than several large red flashing numbers when another code will generate right after this one expires?
What’s the value add with flashing? Is the purpose to hint to users to use the next code? Is it intentional to make it difficult to read, so the user doesn’t waste time struggling to copy this code into the app before the time runs out?
Does it need to turn red and flash? Will only one suffice?

For context, I went from the landing screen to here but tapping on a 2FA component.

The app confirms that I copied a 2FA code with the bottom status bar saying, “Copied” But I have no idea which 2FA code I just copied from this message alone. I will say there is a slight visual feedback when tapping where the white component turns grey, but I think the copy message could be more thought out by adding the title of what I just copied. Something as little as, “Copied Google”
But that does run into the problem that each 2FA component must have a name. That negative space at the bottom is actually another 2FA component that just doesn’t have a name. More on this later.

For context, this is the screen for editing 2FA components to be reordered, deleted or for the account info (username or email) to be changed.

The reorder icon is conventional, but it’s also very similar to the menu icon. Would arrows make more sense to differentiate?
When reordering, there isn’t any visual or haptic feedback that a 2FA component is selected, but it moves once the users finger moves. This could be detrimental to mixing up unnamed 2FA components.
I actually made up the “account info” section. There’s nothing that tells me what is actually meant to go in that section.
Is it obvious from the iconography that 2FA components can be deleted here? Would it make more sense if the trash can icon were disabled at the top (or somewhere) instead of very faint the plus or menu icons?

I’m unsuccessfully trying to delete a 2FA component. I thought it was weird that the delete button is (1) only a word instead of an icon + interaction like all the other interactions in this app, (2) at the bottom of the screen, also unlike the other icons of the app, and (3) center justified. However, the add a 2FA buttons are at the bottom and are icon + words and left justified. There’s similarities, but not enough for Google level design.

Following the conventions of the rest of the app, I selected a 2FA component, then clicked done. But nothing happened?

I won’t go through the adding a 2FA code because I think the flow and screens is actually done pretty well compared to what I critiqued above.

Thinking about the 2FA component

The 2Fa component has 4 pieces: the account domain, the 2FA code, presumably relevant account info and a countdown timer in the form of a decreasing pie chart.

Domain

While my main concern as a user is to get the code into the 2FA field, I need to retrieve the correct 2FA code. I’ve put into 2FA codes 3 times before realizing it was for the wrong domain. This makes me wonder if bolding the typeface is enough of a distinguisher when the 2FA code is so large, coloured and occasionally flashing. The timer also distracts from the domain title since there’s a decreasing motion. What is the most important information? I suppose this could be stored in the section I self-declared as the account info, but a polished design ought to be a bit more restricted for the intent.

The third component screenshot wasn’t included in my earlier screenshots because the list is actually scrollable and I have more 2FA components. Looking at the screenshot below, I have 4 unnamed domains for 2FA codes with the same email address. I think it’s for my work’s internal CLI programme, but I don’t know which one is the right one to use.

Thinking about organization

There’s no internal organization for people who use 2FA for Personal and Work and maybe School or Volunteer or any other category that people would need login access. Cast the net wide, and let users type in their own name for folders. Or maybe tags.

There’s no ability to search for a specific domain or username. What there were folders? Or tags? Or colours? Or a More Info that had this meta data along with date added? Anything that indicated what is what in this app could be really useful if a user has a substantial amount of 2FA codes.

Thinking about the navigation bar

In the Gmail app, they separated the “Search” and “Compose new mail” icons at the top and bottom of the screen to avoid this. The navigation bar of the Google Authenticator app puts adding a new 2FA code and editing them right next to each other. As aforementioned, this is tough for people with larger thumbs. Would disaggregating these buttons into top and button like in Gmail (1) be more intuitive, (2) help usability for users with larger thumbs and (3) give a more consistent brand to the Google design system? For #3, I took a took a look at other Google apps apart from Gmail (Keep, Calendar, Tasks) and they all have a + sign in a circle on the bottom right of the screens.

This was an interesting app to review because part of me felt like I was borderline feature pushing with the organization ideas and the other part of me felt like the app was being too visually overwhelming. I think a tighter visual design and UX design of this app could really improve its experience. But taking another step back, I don’t think Google makes (or loses) literally any money (though I could be totally wrong) from this app, so maybe there isn’t a driving business decision to make these changes either.