brackets system
Baseball products follow the cadence of a season and have specific moments in the form of jewel events that create moments that spike interest and engagement. The yearly all-star game, the home run derby, and the post season are times when baseball is more in the news, and on the minds of its millions of fans.
Part of the post season is a brackets contest, where the winner(s) receive a cash prize for a perfect bracket. The stated goal for the 2020 season was to re-imagine our current one-off approach to this event and create a configurable design system that could be used across the org, multiple times a year for various content initiatives. I worked in tandem with the front end development to provide the design for the components, and how they interacted together. I then provided the designs for the end-to-end experience of starting a bracket, log in, and viewing results.
DATA & INSIGHTS
We researched other products during a competitive analysis and found that most other sport sites had not adapted their navigation and UI for mobile. Users were likely presented a large desktop sized image that included the brackets branches which forced the user to scroll both horizontally and vertically to locate the correct matchup they wished to focus on. Some provided zoom features, which also felt insufficient.
HYPOTHESIS
If we redesign the brackets interface to be mobile first and provide the ability to focus on bracket rounds, then users will engage at higher numbers and for longer sessions because this approach will reduce the chore of using traditional bracket navigation.
To provide a mobile first approach, I built out a prototype of an interaction model. The foundation of the model was to organize each round of a bracket into a highly flexible column. It could assume the shape of a traditional bracket tree, or, on a tap of the column area or top navigation, it would collapse vertically into a focus state for easier scanning and scrolling. A user on mobile is only viewing a single round column of the bracket at a time. But this allows for a much easier interaction of reading and filling out the bracket. I designed some responsive containers for the bracket matchups and their corresponding states.
The mobile interaction model
The desktop interaction model
LEARNINGS
The redesigned brackets interface was big success for the 2020 season, showing a significant increase in completed brackets as well as a large increase in account creation and log-ins for MLB's platform. Beyond the event itself, the new system has been used to create brackets around a variety of content types and applications, becoming a new configurable tool in the product toolbox.