OAuth 2.0 UI Samples
 
 

Overview

As a designer on Twitter’s Developer Platform team, I designed a set up flow that enabled developers to use a newly enabled authentication method, OAuth 2.0 when accessing the Twitter API. The Twitter API was previously only compatible with an older authentication method, OAuth 1.0a. Twitter wanted to introduce an updated auth method because it would allow developers to more effectively access newer Twitter surfaces like Twitter Spaces.

 
 

WTF!?

Authentication methods enable app developers to have users. For example, when you sign into ‘Medium’ using ‘Twitter’ you give ‘Medium’ (an app) permission to borrow your Twitter credentials, and post Tweets on your behalf.

 
 

The customer

If a developer wants to build an app using the Twitter API, and wants the app to have users, they are required to give Twitter some basic information about their app for security purposes. Effectively, developers are required to ‘set up’ user authentication. I considered three types of customers when designing this set up flow:

  1. New Twitter API v2 developers: no compatibility issues

  2. Existing Twitter API v2 developers: invite them to change, no compatibility issues

  3. Existing Twitter API v1.1 and v2 developers: invite them to change, consider compatibility issues

 

Developers are interested in OAuth 2.0 (vs the previous version) because it enables more creative app solutions. OAuth 2.0 asks for very specific permissions, whereas previous versions ask for broad permissions.

 
 
 

Design process

 
Process
 
 

Concept testing

Concept testing revealed fatal flows in our product strategy. Initially we forced developers to pick an auth method, but that was confusing for new and experienced developers. So we decided to give developers keys and tokens to both methods, and save the ‘choice’ for the build phase. 

 
 
Concept test ui
 
 

Private beta feedback

The Twitter Developer Platform had recently released new access levels and new endpoints. Launching OAuth 2.0 as a private beta allowed us to get it into the hands of 25+ developers and learn how developers would actually use these things together in practice. Our private beta developers were not shy, and gave us feedback on both the technical implementation and the set up design. 

Usability testing

I tested two distinct set up patterns with a broad group of developers ranging from beginner to advanced, and familiar to not familiar with the Twitter API. 

Version 1 - Complete a three step flow to set up user auth based on desired API version.
Version 2 - Complete a vertical list of settings without considering versions and compatibility.

We learned that the vast majority of developers, including expert developers, did not care which auth method they were using, they just wanted it to work. So, version 2 which required the least amount of upfront decision making, was the winner.

 
user flow examples
Test question example
 
OAuth 2.0 settings
 
 

Results

Within 1 quarter, 25,000 apps had enabled OAuth 2.0. Ultimately, rolling out this feature strengthened what developers can achieve with Twitter API v2.