Bleacher Report LIVE – Watch Page
When I came on to the B/R Live Design team the UX and the designs were almost complete and in development for responsive web by a previous Design/UX team, eventually the new website with sports video streaming launched in early 2018. The first few months the product was free to use and we spent just observing if the video streaming is stable before commerce was introduced in July of 2018. Once commerce launched and UEFA Champions League started towards the end of August a few issues started to arise, one of those was discoverability. The functionality of the “Catch List” on the left side of the homepage was based on an algorithm that would always serve up the user content that they have indicated that they had a preference for. There were multiple rules that would indicate what would take precedence; live over replay, replay over upcoming, the amount of time that has elapsed since the replay became available etc.
However, upon seeing the Catch List in the works with the editorial overrides after the launch the product team realized that the “Catch List” became very confusing and the algorithm turned out to not be as strong as it was thought initially. In addition to that, the main page was also taken over by marketing to explain what B/R LIVE is, but that was never initially in the requirements so a space for it was never carved out. Therefore the product team decided to add a spot for it quickly on the homepage without any consultation with design. Towards the end of 2018 UX testing was conducted on the web product specifically. What was found during this test was what most of us had suspected already, discoverability of the video product was too difficult to navigate and confusing. So in the beginning of 2019 the Strategy team decided to redo some aspects of the web experience to better serve the user’s discoverability of new content as well as our top content available.
Storefront before the redesign
– Improve video discoverability
– Display pass pricing and benefits of getting a pass
– Make leagues easier accessible
– Create a spotlight section to promote events for marketing
For the research the UX Lead and I teamed up with another designer and we did a deep dive into the competitive landscape of video product storefront pages. What we found was a pattern of large spotlight section above the fold, pricing plans prominently displayed, and explanation of what content is available within the product.
DISCOVERY & WIREFRAMES
Before we had the full requirements for the storefront we had some time to do a little more discovery on how this storefront page could look like. After looking at all of our competitive research we decided to try out 3 different versions: Straightforward, LIVE angle, and exclusivity. Using Dropbox Paper we wrote out all the elements that we knew would be needed to be included for the Information Architecture. Which stated the following:
How does B/R Live work?
The wireframes from the UX Lead and the quick examples of the 3 version created by me and coworkers are below:
We presented the ideas to several stakeholders who gave us really great feedback, and allowed us to reiterated and include more specific items into the storefront once the requirement were completely fleshed out in the weeks after we completed this exercise. This gave us a really good jumping off point once all the requirements were finalized and allowed us to present some ideas that the strategy team might have not thought of.
When the MVP for the Storefront requirements was presented to us I went in and started to mock up a few version of how this can look. One very positive comment and idea for this storefront was that the Connected Device design and functionality that I worked on was working really well and the strategy team wanted to emulate that for the rest of the B/R Live product.
The responsive web Watch Page launched in August 2019, which is available to view here B/R Live . Since launching the watch page redesign that I helped make we have had an increase of +26.9% YoY of unique pageviews, an increase of +108.63% YoY overall commerce, as well as a conversion for commerce/page views that jumped up +1157bps YoY to 29.54% (compared to 17.96%).