RESEARCH & ANALYSIS

After the merger we received a request to re-imagine att.com as an experience that shifts brand perception from a company that sells phones, data plans, and internet to AT&T master brand that also includes the entertainment, pop culture assets obtained in the merger.

We decided to focus on turning the att.com experience into a destination that had high level overview of our all of our main lines of business, provide a simple navigation that allowed entry into product detail pages, and entry into various checkout flows for our products and services.

In addition, we conducted research with the previous design to understand and address user pain points. Some of the key takeaways from the previous design that informed our design process were that

  • The navigation was confusing, and required too many steps to arrive at destinations

  • Many of the page’s interactions were not mobile friendly

  • The visual design and photography felt dated and unrelatable

 

Ideation & Design

Surfaced navigation

The previous design of att.com placed all navigation into a hamburger menu consisting of 8 categories and 56 page destinations. The design is thorough, but users would often feel overwhelmed and got lost trying to find information about AT&T’s top lines of business.

 
 

Open hamburger menu revealing it’s pages and subcategory contents.

 
 

To illustrate the problem, this was the initial 3 step flow to users were required to make in order to learn more about AT&T’s wireless service plans.

 
 
 
 

We focused on ways to reduce friction to 7 pages that best represented information from our top lines of business to users. These pages are Deals, Phones & Tablets, Wireless, DIRECTV, Bundles, and Accessories. To achieve this created new design that preserves the hamburger menu navigation, but also surfaces these 7 pages in a horizontal navigation, making them 1 click or tap away when arriving to att.com.

 
 

att.com with supplemental horizontal navigation

 
 

In addition, the horizontal navigation is fully responsive, making it navigable by users on devices of any screen size through the use of gestures.

 
 
 
 
 

Landing page Overview of top lines of business

As soon as a user enters the page they are confronted with a section for hero image that highlights featured content. The section focuses on motivational photography as a way to drive customers towards our products and services. In this example, it’s imagery that was connected with 2019 new years.

 
 
 
 

As users scroll throughout page they find high level descriptions and pricing of top lines of business that are accompanied by aspirational imagery. Each of these sections have clear CTAs that lead users into purchase flows.

 
 
 
 

Another primary business goals is to sell new hardware devices with wireless plans. In addition customers were unaware of the numerous methods of hardware pickup and delivery that AT&T offers. We decided to create a module that showcases hardware devices by placing greater emphasis on the hardware images, and it transforms into a fullscreen scrollable carousel on mobile devices. In addition, it provides information about the pickup and delivery options AT&T offers.

 
 
 
 
 

New product offering pages

We also created landing pages to represent the new product offerings AT&T obtained when acquiring DirecTV and Time Warner. For example, users can now enter a flow to purchase DIRECTV within the TV section.

 
 
 
 
 

supporting community efforts

Through our research we found that many customers aren't aware of AT&T’s community efforts. As a result, we used the redesign as an opportunity to create a module that showcases these efforts on a carousel that users can scroll through. This section was differentiated from the rest of the page through visual design, allowing for the content to break away from the pages marketing material.