MLB Global Calendar 

Last year, the UX team faced a problem with using a generic calendar design for our webpages. Since, baseball revolves around key moments during the year and our baseball records are archived we needed to rethink our global calendar to make it easier for users to search specific dates.

As our products evolve, it has become more apparent that visitors to our sites needed enhanced control of scores, ticketing and tv product pages. The calendar module was a crucial first step. 
 

Our goal was to create a global calendar module that would be adaptable to the existing and future requirements of these pages. We started by talking with the product and business owners  to learn more about their users as well as their page specific needs. What we learned helped us define our business requirements. For instance, the scores page needed to  provide users an easy way to navigate to 'special events' during the year so the business team could highlight or promote sales.

With our business requirements our team started wireframing different design solutions. It was important for us to consider two common requests, a cleaner visual design and the ability to sort by date and by event. Due to time constraints we weren't able to initially test this module with users but will in the future.

INITIAL DESIGNS

We had a couple directions we wanted to push further from our sketches. One approach we had was to tie baseball games with their specific date as well as tie 'special events' with the year that they occurred. Out of our initial designs we chose a simplified calendar with a sort 'By Date' and 'By Event'. We also wanted an easy way for users to sort by year.

Enhanced Calendar 

Our proposal was to identify all use cases for the calendar in our products and design a user interface that would elevate the calendar to allow users to search by more than the day of the week. The new design allows users to cycle through the calendar based on month, day or event.  

Default View

The default view of the calendar shows a cleaner wider interface allowing for larger target areas for touch devices and the enhanced content organization including filters for year and events.

Today Treatment

The today button allows users to jump back to the current day no matter what month they are on. 

Date Hover Treatment

Introduced multiple states for active and hover states to give users visual feedback in the calendar interface. 

Date Range

A date range was added to the interface to highlight  a consecutive series of day an event would span. If a user selected the playoffs for instance, the playoff duration would appear in the calendar view highlighted as blue.