AT&T Design System overview

Role

Senior UX Designer · AT&T

Type

Brand evolution & design system

Collaborators

Lauren Godwin, John DeFrance, Eric Talkar, Adriel Caldelas

Focus

Color, typography & photography

Challenge & Solution

Evolving a brand from the elements up.

Viewed as an older and traditional brand, we sought to redefine who we are and reposition ourselves within the market as unique, youthful, energetic, and vibrant.

Working closely with partner teams, we looked to the core elements of a brand — color, typography, and photography — to evolve our overall look & feel and find new and fresh ways to express ourselves and the value we bring to our customers.

Guiding Principles

Eight principles behind the system.

01

Be practical

Integrate look and feel purposefully with function. Consider the audience and tailor experiences to their needs.

02

Provide clarity

Define clear goals for every experience, page, and component. Minimize cognitive load so users aren't overwhelmed by too much information or too many choices.

03

Design mobile first

Build frameworks and content for mobile first — mindful of limited space, short attention, and performance. Then optimize up for larger screens.

04

Avoid needless parts

If it doesn't serve a clear purpose, remove it. Be able to explain what every element is for.

05

Create for humans

Root interfaces in familiar human interactions. Draw from physical affordances and use conversational, context-appropriate language.

06

Ensure accessibility

Design for everyone. Respect common conventions and apply basic accessibility principles rather than over-designing.

07

Craft with care and quality

Create premium, easy-to-use experiences. Use negative space to keep pages light and airy, and apply color with control.

08

Maintain consistency

Provide features and behaviors people expect. Use system elements for components, icons, CTAs, text styles, and consistent terminology.

The Work

AT&T Design System — brand elements AT&T Design System — visual direction AT&T design system — 1
AT&T design system — 2 AT&T design system — 3
AT&T design system — 4 AT&T design system — 5
AT&T design system — 6 AT&T design system — 7
AT&T design system — 8 AT&T Design System — system documentation AT&T Design System — full system overview

Want the full walkthrough?

Happy to talk through the process, tradeoffs, and what I'd do differently.