PROJECT
AT&T (att.net) Desktop Navigation
The att.net site was a portal for AT&T's email users. The portal was meant to be a way for AT&T to further connect with their client base, by providing them engaging content from the many partners of AT&T. The portal was essentially a media aggregator of several highly authoritative content providers that cover many topics including CNN, USA Today, TIME, Newsweek, Bleacher Report, Sports Illustrated, Travel & Leisure, Harper’s Bazaar, and so on. This project objective was to redesign the desktop navigation of the AT&T portal product to increase engagement on verticals and boost article page views.
Flaws of the Original Navigation
OLD NAV ON YAHOO PORTAL
CURRENT NAV ON SYNACOR PORTAL
Yahoo originally ran the portal product for AT&T, and when they switched over to Synacor's white label portal product, AT&T asked us to mirror the Yahoo experience so as to not shock our users when they first migrated over to the new experience. Like Yahoo’s original design, the navigation was on the left side in a vertical format, similar to what you might see in a dashboard type of software. Another cumbersome aspect of the vertical navigation was that in order to get to the second level of navigation items under the main categories, users would have to click into that section (Ex. Entertainment) and wait for the page to load, and then they could finally see the other categories under that main section.
Ideation / Exploration
When the desktop navigation became a priority, it brought on a lot of discussion about how much we can potentially optimize to increase traffic to other parts of the portal such as the Entertainment or Sports sections. After competitive analysis with other news sites, including the new Yahoo site, we noticed almost all sites used a horizontal navigation system. Other benefits that we were striving for when moving to a horizontal navigation were an increase in page real estate, a better balance of white space versus content, and more layout opportunities for when we were ready for an overall redesign.
I explored different ways to organize the content and tried to reduce the amount of navigation items. I researched best navigation practices and found that there shouldn't be more than 7-9 items to avoid overwhelming the user with too many options or making it too difficult to find what they’re looking for.
PHASE 1: NAVIGATION EXPLORATION
PHASE 2: DROPDOWN EXPLORATION
Taking Dropdown Further
Other than moving to a horizontal layout, I wanted to explore other possibilities that we can have with the navigation. The purpose of this horizontal move, other than getting more flexibility with the layout of the page, was to also increase engagement to other verticals. Rather than doing simple dropdowns of subcategories below each main category, I started to look into inserting content cards from those specific categories as a way for a user to preview content under that section. If a user were to hover over these categories, they could see what type of content they would expect to see and possibly be more inclined to navigate to that section.
A/B Testing
We used Adobe Test & Target for our A/B testing needs for this project. For the first round of testing with our user base, people didn’t seem to be hovering enough to notice the content cards in the dropdown and we didn’t get a very high increase in traffic to verticals. The difference was minimal. We did another round of testing with new changes that included adding tabs to make the nav items feel more like buttons, uppercase text versus title case text, and the addition of arrows. In the end, the arrows and uppercase text proved to increase the amount of clicks into the dropdown by 25%.
ROUND 1 OF TESTING
ROUND 2 OF TESTING
User Testing
We also were interested in getting qualitative information from our users, considering what a large effort and change this navigation would be, so we used UserTesting.com to gain this feedback. The demographic of our user base skewed older, with a majority of our desktop users being 50+ years old, so we made sure to test with that audience. An overwhelming amount of our testers preferred the horizontal navigation over the original vertical one. They also appreciated the content cards within the dropdown to guide them to more content that was similar to what they were seeing in the dropdown.
User Flow
Final Design
After several rounds and versions of designs, we landed on the version that separated our content navigation area from the AT&T properties area. A few of our users pointed out that they thought it was much clearer when anything that had to with AT&T account information or other AT&T properties was separated into its own section and wasn’t combined with the rest of the main navigation. This also helped the issue of having too many navigation items. It was difficult for AT&T to minimize the amount of navigation items, but the separating of sections proved to be a successful compromise.
FINAL NAVIGATION
