Authy: Logo Update Tool (powered by Twilio)

Project Overview
A case study on how I designed a new feature for Authy: a simple yet powerful way to update logos to your authenticator accounts, so it’s easier than ever to find each account.
What is Authy?
The Authy app generates secure 2-step verification (2FA) tokens on your phone. It protects your account from hackers by adding an additional layer of security.

Contributions
I was the lead product designer, I owned:
  • concept strategy
  • wireframing, flows, prototyping
  • interaction design
  • usability testing
  • visual design

The Problem

In February 2019, the Authy app automatically generated generic, blue key icons (🔑) for 2FA account token types. Here's an example shown below:

01
Slow Recognition

New and existing Authy users could not quickly find the authenticator account they needed.

02
Errors

Generic logos slowed down user recognition of the correct account they needed to authenticate.

03
Slow Task Completion

Users often ran into errors when they accidentally chose the wrong account; caused user friction and slowed down task completion.

The Challenge

Based on these known pain points, we focused our efforts within the design and development of a new feature with a 3-pronged approach:

Easier, faster recognition

Create a tool that allowed users to update their authenticator account by replacing generic logos with custom logos

Reduce errors

Increase the likelihood of users selecting the correct authenticator account

Programmatic logo rendering

Leverage Google Image Search to source logos in a scalable way. Identify edge cases generated by Google Image Search and tailor the experience to be fool-proof when Google Image Search failed.

Before & After

BEFORE

Generic “key” icons represented logos. Users found it difficult to scan and differentiate each account.

AFTER
Branded, customized logos. Users can easily scan the list of accounts to quickly find the right account they were looking for.
BEFORE
Users often ran into errors when they accidentally chose the wrong account because all accounts used generic, blue key logos.
AFTER
We developed a Logo Update Tool where users can replace generic-blue-key logos with proper, customized logos. The tool increased the likelihood that users would select the correct authenticator account because users can quickly scan authenticator accounts by branded logos.

Team

Lead Product Designer (me)
Product Manager x1
Engineering Manager x1
Back-end Developers x3
Front-end Developers x3

Process

Evaluated data & user feedback
I reviewed user feedback from the Google Play store reviews and Twitter, and interviewed the internal Authy team to identify limitations.

Early concepts

I wireframed the overvall flow and created alternative designs for specific screens

Final Designs

Results

01
Increased app rating from 3.4 to 4.0

This increase in ratings from 3.4 (August 2019) to 4.0 (March 2020), a total of 770+ reviews that saw a boost in positive reviews

02
98% user success

98% of users successfully updated their authentication accounts with custom logos

03
New York Times recognition

The New York Times reviewed the feature as a key differentiator from other competitors.