A Starting Point

To fully understand the process we embarked on, we have to look back at the last updated designs for navigation that were created in 2013. Our approach at the time was to have adaptive headers, one style for desktop and one for mobile devices. 

Desktop (Above)

The desktop designs for navigation attempted to separate two types of content items, the game specific information from commerce. In addition, the top masthead on the nav included language links, search, login and register.

Tablet (Above)

The tablet view eliminated the separation of these two content types, game information and commerce and merged them into one list. Additionally, the teams section was called out as a button and any links unable to fit in the list would be added to the overflow menu.

Mobile (Above)

On mobile devices, the teams section moved up to be inline with the MLB.com logo while the overflow menu stayed persistent below. 

Defining a new organization

When we looked at these older designs of the navigation, it was clear that there was disorganization between the content and the content structure. This was true especially as we looked through the club navigation which was slightly different in structure from MLB.com. We started by looking all the navigation units for all 30 clubs and MLB.com.

Early Designs

In our analysis we learned a lot about how clubs and MLB structured their content and what we could do moving forward to simplify that. It was clear, that we needed to understand how many navigation units we would need to support, how much character space we should account for and what type of information should exist at a desktop and mobile display. Our first pass at designing that new structure can be seen below. 

Final Design Concept

After an iterative process of designing, we quickly realized that we needed to have two distant but very connected templates for both the club and mlb.com sites. Two templates were needed because MLB.com and Clubs had very distant branding requirements. MLB.com did not require branding, so we could have navigation links inline with the logo, while Clubs required branding, as well as a dedicated space for skins. To accomplish this for Clubs we had to drop our navigation units below the header above viewports at 990px wide.

Navigation Dropdowns

The remaining piece of the navigation that we needed to design for was the menu dropdown. We started by looking at the 2013 model for Clubs and MLB.com were we found patterns or breadcrumbs on how current club Marketing Producers were using these dropdowns, specifically how was content organized and what were the business requirements.

Desktop Dropdown

The final designs that we landed on for the desktop dropdown was to have a horizontal space above 990px. In this dedicated space we wanted to create a cleaner interface highlighting news and video sections with two content items along with a reorganization of the information architecture. 

Tablet Dropdown

On tablet devices we created a sections dropdown which would compile all the navigation units including those that were still persistent in the navigation bar. Additionally, on hover, a fly-out menu appears to allow users to see sub navigations all while staying consistent with the desktop visual language.

Mobile Dropdown

Our mobile approach was to take the tablet dropdown and double the list up to go full width. In each cell of the dropdown we made some distinctions to users regarding navigation. If a navigation link had child elements we included a pipe and an arrow. The left 70% of the cell, if clicked, takes users to the parent page, while the right 30% opens up the sub menu of that category. If there is no arrow added, that indicates there is no sub menu.