Reimagining Overview

Refreshing the user experience and interface
for AT&T’s account dashboard

Client

AT&T

Post Purchase – Account Overview

Role

Senior Product/UX/UI Designer

Performed full product design cycle: research, IA, UX, UI design, user testing

Tools

Figma

Sketch

UserTesting.com

overview

Introduction

AT&T’s account overview page serves as a central hub for customers to manage their accounts, pay bills, and access various services. However, prior user research and competitive analysis revealed a cluttered interface with a confusing navigation structure. This led to frustration and difficulty finding essential information. As a Senior Product Designer, I spearheaded the redesign of the account overview page, aiming for a user-centric experience that prioritizes clarity and ease of use.

Challenges

Information Overload: The existing page overwhelmed users with a dense layout and excessive details.

Inconsistent Visual Hierarchy: Lack of visual hierarchy made it unclear what information held the most importance.

Complex Navigation: The navigation menu was convoluted, hindering users from finding specific features.

These are just a quick summary of the challenges from a user standpoint. As the lead designer for the projects, I had to deal with:

backend logic resulting in developer limitations
multiple stakeholders with competing priorities
a design system overhaul that was not complete as the redesign was in works
ever-changing timeline for completion and implementation

Mobile image of AT&Ts's account overview page before the redesign

Desktop image of AT&Ts's account overview page before the redesign

who

Users

Retail and business clients who manage their AT&T accounts

Stakeholders

Multiple stakeholders from varying product areas (wireless, internet, profile, etc.)

Developers

Redesign coincided with an update to the backend environment

design process

Research & Discovery

User Interviews & Surveys: Conducted interviews and surveys with AT&T customers to understand their pain points and expectations for the account overview page.

Competitive Analysis: Analyzed account overview pages of major competitors to identify best practices and potential improvements.

Information Architecture

Journey Mapping: To gain a deeper understanding of the user experience, I conducted journey mapping exercises. This involved visualizing the user’s journey from start to finish, identifying pain points, and identifying opportunities for improvement. By mapping out the user’s interactions with the account overview page, I was able to gain valuable insights into their needs and preferences, which informed the design decisions throughout the project.

Wireframing: Developed low-fidelity wireframes to visualize different layout options and information hierarchy.

Visual Design

Design System Integration: Utilized AT&T’s existing design system to ensure brand consistency and efficient development. At the time, the Design System was going through a complete redesign. Account Overview was the first area of the AT&T web experience to switch from the old system to the new one. Because of this, I was instrumental in working with the DS team to create new patterns and guidelines.

UI Component Design: Created reusable UI components like cards, buttons, and progress bars for a cohesive look and feel.

Prototyping: Developed high-fidelity mockups and clickable prototypes to test the redesigned interface with users.

User Testing & Iteration

Usability Testing: Conducted usability testing sessions with a representative group of target users. During these sessions, users were given a set of tasks to complete on the redesigned prototype. We observed their behavior, listened to their feedback, and documented any usability issues they encountered. This feedback was crucial in identifying areas for improvement and refining the design to ensure an intuitive and user-friendly experience.

We conducted multiple rounds of usability testing with iterative improvements based on the findings from each session. This iterative approach ensured that the final design addressed the initial usability challenges and met the needs of our target audience.

results

The redesigned account overview page boasts significant improvements:

Simplified Layout: A cleaner and more spacious layout with clear sections improves readability and reduces user cognitive load.

Prioritized Information: Key information like account balance, recent activity, and payment due dates are prominently displayed for easy access.

Enhanced Navigation: A streamlined navigation with intuitive icons facilitates effortless access to all essential features.

Modern Visual Design: A contemporary and visually appealing design enhances the overall user experience.

After - Desktop - AO

impact

The redesigned AT&T account overview page has been met with positive user feedback, demonstrating increased satisfaction and improved navigation efficiency. By prioritizing user needs and creating a clear and intuitive interface, the redesign empowers customers to manage their accounts with greater ease and control.

Future Considerations

A/B testing different personalization options to determine the most effective configuration.
Integrating AI-powered recommendations to surface relevant services and plans based on user behavior.
Continuously monitor user feedback and conduct follow-up usability testing to ensure a continually optimized user experience.

Reimagining Overview