← Archive
News Portal

AT&T Navigation Redesign

The att.net portal served 45 million+ AT&T email users (most over 50) and generated $41M+ a year in ad revenue, with content from partners like CNN, USA Today, TIME, and Sports Illustrated. As Lead UX Designer, I redesigned the desktop navigation to increase engagement on verticals and boost article page views — working with a PM, AT&T product marketing managers, engineering, an A/B testing engineer, and a scrum master.

The att.net portal.
AT&T portal on desktop

The problem: most users checked email, read a few homepage stories, and bounced. Vertical subcategories were hidden until users clicked into a vertical and waited for a page reload — e.g. clicking "Sports" before ever seeing NFL or NBA.

Original vertical navigation.
Original vertical navigation

Mobile as proof: a horizontal nav on mobile had already delivered a 41% lift in vertical page views and 13% more article page views, which built the case for bringing it to desktop. (Marvel prototype)

Old nav.
Old navigation
New header + nav.
New header and navigation
New profile menu.
New profile menu

Research & ideation: performance metrics, stakeholder interviews, AT&T user surveys, and competitive analysis all pointed the same way — nearly every major news site used horizontal navigation. I researched nav best practices (7–9 items max) and worked with AT&T to consolidate their many links into a dropdown, keeping focus on the main content verticals.

Header + nav exploration (v3).
Header exploration v3
Header + nav exploration (v4).
Header exploration v4
Expanded nav (v5).
Expanded nav v5

Content-card dropdowns: instead of plain subcategory dropdowns, I explored inserting editor-curated content cards under each category, so hovering previewed the vertical's actual content.

Dropdown with content cards (v1).
Dropdown with content cards v1
Dropdown with content cards (v2).
Dropdown with content cards v2
Dropdown with content cards (v3).
Dropdown with content cards v3

A/B testing (Adobe Test & Target, 10% of users): round one showed users weren't hovering enough to discover the cards. Round two tested tab-like nav items, uppercase vs. title case, and added arrows — the arrows and uppercase text increased clicks into the dropdown by 25%.

Round 1: title case.
Round 1: title case
Round 1: uppercase.
Round 1: uppercase
Round 2: title case.
Round 2: title case
Round 2: uppercase.
Round 2: uppercase
Round 2: arrows added to nav items.
Nav with arrows
Round 2: black horizontal nav.
Black horizontal nav

Usability testing: tested with the actual 50+ demographic via UserTesting.com. Testers overwhelmingly preferred the horizontal nav and appreciated the content cards guiding them to similar content.

Desktop nav user flow.
Desktop navigation user flow

Final design: we landed on separating the content navigation from the AT&T-properties area. Users found the split much clearer, and it resolved the too-many-items problem AT&T had struggled to prioritize down.

Final desktop navigation.
Final AT&T desktop navigation
← Previous
InMotion Hosting