AT&T LOGIN
A New Login Experience
2020

Creative Direction
User Stories/Empathy Mapping
Information Architecture
Sketch & Wires
Rapid Prototyping
UI & Visual Design

All of our users do not have the same goals upon their initial use of our App, especially when residing in different countries. Implementing a universal login experience that would meet each of their immediate needs was imperative.

Before & AFter

Discovery & Analysis

Understanding the problem
Research showed users in various regions were having trouble logging into their accounts, where login credentials and redirections changed per country. All while prepaid users also encountered frustration when attempting to log in as they had yet to activate their account, which they would need in order to access the App. This not only frustrated users but led to an increase in calls to the call-center and a decrease in logins as well as usage of the app.

Architecting a Strategy
We needed to ease users' frustrations by targeting each of the issues they were encountering by providing them and easy user flow, while only showing the necessary elements they needed to access the app at that very moment - nothing more.


Working alongside Lead Product Manager Andres Quiroga and a team of engineers, I established the following terms:


User Needs

• Effective customer success UX
• Easy way to select country
• Simple & Minimal Login Process
• Auto-login Post Registration

OKRs

• Increase User Engagement
• Decrease call-center calls
• Decrease in Churn
• Increase number of logins

Solution

• Show only the necessary
• Redesign country selection
• Optimize the User Flow
• Auto-login Post Registration

Login Wires
Login Wires
Image Title

Designing a Solution

Exploring Ideas

Prioritizing users needs and actions I sketched out some ideas, then structuring it into wires. After a few iterations, I proposed to add something like "validating password" or "authorizing user", etc. in the submit button along with the spinner? This way you give a reason WHY It takes some time. IMO spinners without explanation can easily be mistaken as a locked up processes ("something is not working correctly"), as you can to often see it in major OSs.

Results

Design Solution Shipped

By the end of the design process, the mobile details was thoroughly redesigned. It became a simple popover modal, giving it a lightweight and easily accessible feel…. We ended up adding a button for this and that for that…..

Improvements

• Auto-login Post Registration
• Tactical UI - easy glance, quick scanning, native in-app feel
• Simple & Minimal Process — less steps to log in
• More clarity, less guessing
• Streamlined Process by integrating autocomplete & prediction text assistance
• Integration of behavioral gesturization

Login Screens
Login Screens

The Redesign Value

✓ Improved Friendly User Flow
✓ Improved Usability - better IA & design helps user understand what to do
✓ Tactical UI - easy glanceability, quick scanning
✓ Native App feel - consistent look, user doesn’t feel taken OUT of current portal they’re in
✓ Simple & Minimal Process - less steps to login
✓ Reduction in Cognitive Load - More Clarity, Less Guessing
✓ Streamlined Process by integrating auto complete & prediction text assistance
✓ Integration of behavioral gesturization

Next Project
A Digital Sports Streaming Redesign