AT&T Re-imagined

AT&T Reimagined

An Agile Approach To Branding

Role

Sr. Lead Designer / Architect

Responsible for Creative Direction, Art Direction, Branding & Identity, Brand Strategy, CX Design, UX Design, Information Architecture, Prototyping

A pioneer in its field, AT&T has always been about paving the way for innovation—providing its customers with products and services that help them live a connected lifestyle. With so much competition between telecoms and entertainment companies, we looked to reposition the brand within the market with an emphasis on a more premium, seamless, and personalized customer experience while honoring its proud history.

Brand refresh

Viewed as a legacy brand, we sought to redefine the brand as more premium, energetic, and vibrant; that meets evolving customer needs wherever they may be. As an advocate for our digital team, I helped lead the effort to bring AT&T an elevated brand identity, integrated design system, improved CX and UX frameworks, and overall aesthetic quality.

Working closely with partner teams, our team looked to the core elements of a brand: color, typography, iconography, and photography, to evolve our overall look & feel and find new and fresh ways to express the brand and advocate for a modern perspective for the value we bring to our customers.

Color

Led by the core color: AT&T Blue, our Brand team proposed that we explore a supporting color palette that can help add more energy to the brand. Our team helped define the overall color theory and strategy; exploring color pairings, hues, and introducing gradients.

Typography

Sticking with our custom typeface: AT&T Aleck Sans, we examined fonts and pairings that would bring consistency to the brand, while offering more flexibility and practicality for the different platforms. We also proposed the creation of a new outlined version of Aleck Sans, which was done in partnership with the brand team and type foundry Dalton Maag.

Style Exploration

I explored ways to represent the brand boldly and colorfully across our entire ecosystem—taking into consideration print, broadcast, and digital. Style boards and a range of placements explored contextualize how color, type, photography, illustration, and composition all come together to create a fresh and revived look and feel.

Consumer Feedback

We conducted various focus group tests to validate our design direction and evaluate the overall appeal and emotional response to the current/BAU brand expression as compared to our new brand expression. The survey included 549 respondents, ages 18-55+, who were both AT&T and non-AT&T customers. We hit the mark on all of our intended goals—with the majority of respondents feeling the work was more youthful, energetic, and vibrant.

"I want to just keep looking at it. The colors, the people, the faces...are drawing me in. I didn't know AT&T had headphones. I LOVE THIS. It feels fresh, modern, and interesting — not typical or expected."

Testing participant: Female, 24 years old

Photoshoot

Our photography aims to inspire our audience and provide a relevant representation of the value we bring to our customers’ lives. We desperately needed to move away from cheesy stock imagery that wasn't consistent, unique, or compelling. The team conceptualized, strategized, and produced a library of custom imagery to help set the direction for a modern expression of the AT&T brand.

Personas

Personas were developed to tell stories of our products and services through the lens of people. They considered a diverse range of ethnicities and age groups—and even a few pet dogs. Everything from the locations, wardrobe, scenes, and shot list was developed with these personas in mind ensuring a consistent execution that felt real and relatable.

Look 'n Feel

Moodboard Lifestyle Imagery

Moodboard Studio Imagery

Creative Strategy

As guidance for the application of the added brand colors, I created a seasonal model to help the teams visualize the seasonal themes attributed to the quarterly marketing calendar. The model mapped customer archetypes and event themes based on seasonal consumer behaviors and was leveraged as an aid for the creative direction and styling of the content produced for the respective marketing events.

Events Calendar

Working with our Strategy team, we partnered to develop a marketing tentpole calendar of events that would ensure fresh and relevant content across att.com. We developed stories and a comprehensive shot list to capture the business needs through the lens of major events like Mother's Day, Back to School, Dads & Grads, and more.

Final Images

Design System

We created the foundation for a new digital design system to unite all of AT&T's products and experiences with a common visual language. It was designed to be highly scalable across platforms and serves as the basis and inspiration for multiple ongoing efforts.

Principles

1. Be Practical

The look and feel of our experiences should integrate purposefully with its function. Consider the audience and their needs, and ensure experiences are tailored appropriately.

2. Provide Clarity

Define clear goals and the purpose of an experience, page, or component. Minimize the cognitive load required to consume information and complete tasks, so users aren't overwhelmed with too much information or too many choices.

3. Design Mobile-first

Mobile should be the basis for developing all frameworks and content—being considerate of screen real estate, short attention spans, performance limitations, and people on the go. Optimize accordingly to create the right experience for larger screens.

4. Less Is More

If it doesn't serve a clear purpose, remove it. Be able to clearly explain and articulate what an element is being used for in any part of the design.

5. Human Centered

Interfaces should be rooted in common human interactions and objects. Animations and objects should be inspired by physical affordances with language conversational and appropriate to their given context.

6. Ensure Accessibility

Our experiences need to be accessible to all. Common industry conventions should be respected (don't reinvent the wheel and over-design), and basic accessibility principles applied.

7. Aesthetic Integrity

Create experiences that feel premium yet easy to use. All creative should feel well balanced, using negative space to help guide users and keep pages feeling decluttered, light, and airy. Colors should be used with control, ensuring pages do not become overwhelming.

8. Maintain Consistency

Provide features and behaviors in ways that people expect, making it easier for them to interact and accomplish their tasks. Implement familiar standards by using the provided system elements for components, icons, CTAs, text styles, and uniform terminology.

The Grid

The underlying grid structure dictates the sizing and responsiveness of all components and layouts. Major breakpoints were reduced to three.

Spacing

Spacing within and between elements is driven by a system of standardized 8-point increments, which increases consistency, and makes it easier for designers and developers to communicate, while still allowing for a great amount of flexibility.

Typography

The typography system dictates the sizes, weights, and styles available for designers and developers to use.

Modular Type Scale

The system uses a responsive, modular type scale, which helps to maintain proper type hierarchy across a wide range of devices.

UI Elements

A set of foundational UI elements serves as the building blocks of the design system. Each element solves a specific user need and has been designed to work together as part of the larger system. We partnered closely with the Design Technology team to align similar efforts and ensure consistency across in-flight work.

Example UI

ATT.com Reimagined

As one of the main windows into AT&T’s brand, products, and services, att.com was in need of an overhaul. To deliver a truly omnichannel and improved customer experience that's seamless and personalized, we got our hands dirty working cross-functionally to rethink the site from the ground up and strategize a path forward.

Sitemap & Navigation

Complex and not fully integrated, the current navigation was taxing the cognitive load, providing customers with too many decisions, and utilizing a layout that wasn’t platform optimized. Our team brought key players together to evaluate and rethink the site and taxonomy, to clearly define page types and purpose, better categorize our products and services, develop a holistic end-to-end navigation strategy, and ensure the UI design matched the quality and elevated aesthetic of the brand.

UX Framework & User Flows

Collaborating closely with our UX team, we strategized end-to-end flows and an improved framework that took into account the need for a modular, personalized, and seamless experience—allowing customers to shop when and how they want. We conducted in-depth research to gain insight into the problems users are facing and met with several design teams to understand the products they were creating, and how we can bridge paths and create an experience that’s unified from upper to lower funnel, all the way through checkout and beyond.

Homepage Components

We designed a set of components each with a specific purpose and clear guidelines. These were to be the foundation of components moving forward, with the overall goal of reducing the amount of components site-wide.

Digital Creative

Team

Interbrand | Agency
Prophet | Agency
Dalton Maag | Type Foundry