Modernizing Legacy Experiences : NCAA March Madness Live App

This project was made to present in an interview with Turner Broadcasting System in Atlanta, Ga. I was the UX/UI Designer.

User Experiences transcend interfacing with a product on a physical level. UX is every iteration of interaction with a product and takes into account how markets and products evolve together. This is especially true when a product is itself non-tangible.

Let's take into account the March Madness Live app from NCAA Digital a division of Turner Sports. March Madness is a collegiate basketball tournament that has existed since 1939.

When March Madness was first released fans were able to interact with the product via radio, newspaper, in person, television and later cable, satellite, and personal computers as

technology evolved.

In 2019 fans are now able to experience the tournament via their mobile phones. Where the medium of transmission is now streaming video.

Paying attention to the future of cable programming and sports broadcasting we find the major broadcasters racing to provide the best sports streaming experiences.

Considering more than 2/3rds of the American population accesses the internet primarily through mobile devices it made sense to concentrate on streaming experiences via the mobile apps of the sports broadcasters.

Below is a competitive analysis of the ESPN TC, CBS Sports, and the March Madness Live app and how they compare in terms of streaming specifically college basketball content relevant to the March Madness tournament.

Concentrating on the March Madness Live app, the User Interfaces for the streaming video content, I made several adjustments that optimizes for such. The first image is the interface as it exists now, and below my refactor.

I felt the categories were a good choice, but it looked a bit cluttered and forced the user to consider two at one time. I instead stacked the categories individually and vertically thereby increasing the visual real estate allowing the user to take in more information before choosing.

I then moved the titles from the top of the cards to the bottom changing the hierarchy of information from text first to image first. Not because they don't contain important information for the user to make a decision, arguably it is the most important information, but because we are optimizing for video streaming, a goal that is visually intensive and based and as such, the thumbnail should give as much information as possible to the user.

After selecting a category the user is then taken to the video player interface. The first image is the interface in its current state and below is my refactor.

Starting from the top I noticed the "Close" navigational button was clunky as it competed with the list of sponsors that display horizontally across the top of the screen. Consequently, the logos all contain text and I assume removing them is not an option so I instead replaced the word "Close" with a "Back" chevron. There is another reason for this being transmuted into a back button as opposed to a close button, which will become apparent a later.

Moving vertically down the interface the next optimization I made was adding a subheading to the category of videos. I made the decision to include this in order to ground a user that may be viewing the content in an off season or while March Madness 2020 is ramping up. Directly right to the category title is a number and heading denoting how many videos are in the currently selected collection. It acts a grounding agent as the user moves through collections and helps the user to determine if they want to complete the task of watching all the videos or perhaps move on to a shorter collection, and vice versa.

Next, the interface showing the next up videos was cluttered so I changed the number of up next videos in the viewport to three similar to YouTube mobile, a platform dedicated primarily to video streaming. The reason I made this change was to have the app play an active role in reducing some of the amount of information overload users experience on a daily basis as willing and unwilling participants in the Economy of Attention. Another reason this change was made was in observation of Hick's Law.

The next change I made was reducing the size of the play button in the thumbnail by combining it with the video duration and moving both to the bottom right hand corner of the thumbnail. This free's up visual real estate in the thumbnail which, if our goal is to optimize for video streaming, which inherently, is visually based allows the user to receive more information from the thumbnail.

Another refactor engineered was to the copy which acts as a descriptor to for the up next videos. Originally, the descriptions are a bit text heavy for a video interface so by reducing the copy, we are able to increase the font size which allows users to take in more information at a glance which may be helpful if the user re-purposes the interface to act as an audio streaming tool meaning they are engaging with the interface from an audio first approach as they might with a podcast or music streaming app. This increases the diversity of engagement of daily use of the March Madness application. Further, a larger font size increases accessibility.

The last change change I made is displayed in the image below. It is a horizontally scrolling interface, to indicate a change in content, that allows users to browse the other categories of videos without having to continually exit back to the home page. This increases engagement and perhaps creates a video streaming vortex. It is for this reason instead of a close navigational button, we used a chevron.

CLICKABLE PROTOYPE

Note: The prototype opens on the video interface click the back chevron in the upper left hand corner to view the homepage that displays the video categories.

If you want to enter back into the video interface scroll through the categories and click

"Dunks Of The Day"