AT&T authentication: Making sign in simpler

Problem

AT&T owns dozens of brands and hundreds of applications. Unfortunately, they all look and act differently at authentication and point of entry (i.e., sign in). To make things even gnarlier, many customers subscribe to multiple services. Each service has unique credentials, requirements, recovery flows, interaction design, and look and feel. “Sign in help” is the number one reason customers call support. Users simply can’t pay their bills.

My role

  • Strategized content messaging and hierarchy

  • Unified voice across products, platforms, and siloed stakeholder groups

  • Wrote all UX copy including error messages, notifications, and recovery flows for 250+ screens

  • Developed user flows

  • Recommended intuitive and consistent sign in URL across platforms and services (signin.att.com)

  • Adjusted strategy and content according to insights from user testing

  • Collaborated with: Team of 12 including researchers, UX/UI designers, developers, product owners, plus a large and opinionated stakeholder group

 

Project goals

  • Design and build a cohesive and consistent sign in experience across a suite of AT&T brands, apps, devices, and platforms

  • Help reduce support calls related to sign in

  • Define future-state experiences

Learnings

  • Fight for simple, thoughtful, and intuitive copy

  • Don’t settle for “business as usual” when working with large, fragmented stakeholder groups in a conservative legacy company

  • Advocate for solutions that support business goals while prioritizing user needs

  • Celebrate the nuance of consistency vs. context of use


iPhone X Isometric Style 1.png

The process

1. Competitive analysis
(got the lay of the land).

Helped conduct competitive audit of over 55 companies, products, and services with a focus on sign in, credential recovery, and identity management.

4. User testing
(rewrote a lot of words).

Worked with in-house human factors research team to evaluate design iterations biweekly with real AT&T customers. Tested and revised copy until we got it right.

2. Current state audit
(scoured the state of the state).

Assessed our current sign in experience(s). Investigated copy, consistency, and calls to action—from tooltips to form fields—across hundreds of screens.

5. Documentation
(made it shippable).

Transposed all UX copy into content requirement documents. Lead walkthroughs with content implementation and scrum teams across the business.

3. Design iterations
(wrote a lot of words).

Collaborated with designers to create sketches → paper prototypes → high-fidelity mockups → InVision prototypes. Employed Excel for copy matrices when necessary.

 
User Testing \ Design Iterations \ Documentation

User Testing \ Design Iterations \ Documentation


Our solution: Consistency across platforms

We designed a cohesive sign in experience based on consistency—not parity. We knew that UI elements like logos and background color could (and should) vary. For example, a TV sign in screen can’t be stark white. Users can’t tap a desktop monitor. But, intentional hierarchy and clear, thoughtful copy can align across properties and platforms to reduce confusion and help users sign in simply.

This work went live with the launch of HBO Max in May 2020.

 
all.png
 

Creating usable content: My time to shine

Before our team was engaged, the experience and design languages across desktop and mobile were fragmented and unrecognizable as a suite of AT&T products and services. This is where I really dug in. I helped fix inconsistencies and defend content decisions including, but not limited to:

  • Messaging hierarchy

  • Tooltip functionality

  • Credential requirements and labeling

  • Language

  • Capitalization

  • Help links

  • CTAs

after_mobile.png

Wireframes: Before & after

One of the most important parts of this project was an exercise in what should (and shouldn’t) be configurable on the sign in screen. I worked with design and research to put together a recommendation re: what to cut and what brand teams could customize for their products.

before_after.png

Visual design: Before

before_mobile.png

Visual design: After

iPhoneX_019.png
CS_Grid_Flat_Above.png
Apple TV Mockup2.png