Bleacher Report LIVE – Connected Devices
Bleacher Report LIVE is a OTT sports video streaming platform. It is available on iOS, Android, Web, and of course all Connected Devices. I came to this project during a major design period for the product. It initially started out as CatchSports, a sports finding mobile app that tells you which channel / bar you can watch games. In 2017 Turner Broadcasting acquired the UEFA Champions League rights and there was a big push to have an option for cord-cutters to be able to consume this product OTT. With that CatchSports turned into Bleacher Report LIVE due to Turners ownership of the Bleacher Report brand and the sports recognition with that name. CatchSports already had a mobile app that was being adjusted to stream sports with minimal design changes. Web and Connected were non-existent yet, and that’s where I came in. Web was being worked on and close to completion by another designer and I took charge of Connected Devices. I worked with a UX Lead for Turner Sports to figure out how to create a Video only experience for users on Connected Devices as well as to create a design similarity between the already created Web mocks and the new product for tvOS, FireTV, Roku, and AndroidTV.
Create a video viewing and video discovery experience that is concurrent with how the web product works, while maintaining within the technical device limitations for each platform. The goal for this project was to have it completely designed within a short amount of time (2 Sprints before dev work started).
– Easy to discover new sports events
– Price visibility and content accessibility based on purchases
– Place user into the video experience immediately
– Distinguish LIVE, replay, upcoming content
– Sponsorship visibility
The UX Lead and I spent as much time as we could with our tight deadline to research connected device video streaming platforms to see what currently works best. Through our research we noticed 3 things that repeated in most video streaming apps and that we wanted to adapt into our designs:
1. Swim-lanes for specific content (CNNgo, MML, NBC Sports Gold, Netflix, Prime Video, Hulu, YouTube…etc.
2. Large image/video on content that’s in focus (Fox Soccer MatchPass, Netflix, Hulu, FuboTV)
3. Card vertical/horizontal differentiation for distinguishing between movie / tv show /series content (Red Bull TV, CNNgo, Prime Video, Netflix, Hulu)
DISCOVERY & WIREFRAMES
For the discovery we did very low fidelity mocks of different options for the landing page of the app where the user would see the different types of events that would be available for viewing. We tried a horizontal and a vertical swimlane for the events, but ultimately decided that a horizontal swimlane would be a lot more intuitive for the user since they are used to seeing that behavior or most video products.
The UX Lead took the low fidelity mocks that we were mocking up and created a prototype based on our findings to see how the flow of the app would feel like when the user goes from landing page, to event page, to the actual video. Below you can see a short video of the prototype in use.
As i mentioned earlier, we were on a very tight schedule to explore the UX options for the Connected Devices product and to deliver high fidelity finished mocks within 2 dev sprints. The MVP for this project was to create the Connected Device experience and to launch it in early July 2018 without a commerce component until after late August 2018. Doing this allowed the dev team to fully focus on creating the app across different devices (tvOS, FireTV, Roku, and AndroidTV)
In the initial designs we were going to have a “tray page” when the user arrows down past the first swimlane on the landing page. However, having that page made it seem very disconnected from the large video / image experience when the user first enters the app. Eventually we settled on keep only 1 and a half swimlanes visible at all times, meaning that one swimlane is fully visible at all times while the next swimlane is peeking out from the bottom, when the user clicks down the new swimlane slides up into the previous swimlanes spot.
In addition, each individual event type needed a card example for all the scenarios. That included team vs team events and a variety of non-team events.
Screen User flow and Instances:
New Sports Icons that I also illustrated as I was designing the app (the last 8 on the right: arm wrestling, lacrosse, gaming, softball, field hockey, surfing, table tennis)
The menu section needed indication when an item was in focus so I suggested that the illustrated icons I designed would include a micro animation for when the menu icon is selected. I created a mock of how the animation should work in After Effects below:
Over the course of a few weeks we were able to pull together a a really great functioning connected device experience that aligned closely to our web product. Since the launch of the connected device app we added in commerce, so that a user can purchase a game directly from the TV app instead of purchasing on web/mobile. Also towards the end of 2018 we released an AndroidTV version of the app as well, and in 2019 we added Xbox and PS4 apps.
Overall it was really engaging and exciting to create an experience for a platform of a product that did not exist before from the ground up, as opposed to redesigning an already existing product. From working with the devs on micro interactions like the menu animations on focus, to the logic and product flows.