Bleacher Report LIVE – Watch Page

About

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.

Screen Shot 2019-06-08 at 10.27.06 PM

Storefront before the redesign

 

OBJECTIVES

– 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

 
RESEARCH

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:

 

ABOUT US PAGE – UNAUTHENTICATED
Questions this page should answer
(these are real questions we’ve received from customers)
 
How much will subscriptions cost?
How do I activate my connected device?
Is B/R Live free to use?
What platforms is B/R Live available on?
How do I watch live games?
What different subscription options will be available?
What devices can I watch live games on?
Are there system requirements to watch live games?
How long will I be able to access games I’ve purchased?
 
NAV
Login (should it just be login on unauthenticated? Seems like most only show LOGIN button)
 
Hero Section
-Large fullscreen Video of live game/ top (popular) replay game playing in back
Could also be a sizzle real of all the top sports
( Free Preview / free trial + Sign In CTA) at bottom of video
 
CTA button for Free Trial 
is a sticky top element when user scrolls down
 
How does B/R Live work?
 Sign up for an Account
Watch certain games for Free
 2. Purchase premium content through a a monthly plan, annual plan or pay per event 
 3. Watch 
 Because watching live sports should be easy.
 
 Features section with why B/R Live is worth purchasing –
why choose us and not some other product?
Icons with explainer of each point
watch across multiple devices
watch UEFA (only US supplier)
-VOD
Free Games available
-Never miss a match (notifications?)
-follow teams/leagues

 

-Niche sports
-High quality Video
-Available in Canada
-Streams? 2?
-No contracts

 

Purchase single events instead of subscription
Spoiler Mode
NBA (partial pricing still available? )
Events available-  200+ events monthly?
 
Scroll down to a carousel of all the leagues offered
Tap on each league icon for information 
Each league could have additional video displayed with a sizzle real
(Link to a more robust and full page of sports / leagues available and what’s included with each league)
 
 
Scroll down to:
A section with popular upcoming events
-image
-event name
-description of event & date
-sign up CTA / free trial CTA
 
Subscription plan section
The best package for you?
Subscription plans available
-Monthly
-List price
-Annual
 
Could NBA be an Add on to the other two packages so that it’s separate?
If someone wants ONLY NBA then wouldn’t they just get the NBA LEAGUE PASS?
Description on what you get for each plan and benefits of each plan
What all the subscriptions always include:
LIVE & VOD
Free Events 
New Leagues added consistently
Cancel anytime
No spoilers
Show highlights / Pass Perks
Before/ After event show (UEFA)
CTA Button / Free Trial
Enter Coupon section here?
 
 
Where to watch
-iOS
-Android
-Web
-AppleTV
-FireTV
-RokuTV
-AndroidTV
 
 
FAQ section
What is BR Live?
How does free trial work?
What content is available as part of subscription?
Single Event Purchases?
 
 
Footer
Links to:
List of sports
Account Info
Contact US
Press
Help
FAQ expanded
Terms of Use
Privacy Policy
AdChoices
bleacherrepot.com
Social icons
Sign up for newsletter?
 

 

storefront sketch

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.

PROGRESS

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.

 

FINISHED 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%).

phones_watch3

 

Desktop VersionNewWatchPage_Anonymous1440
Tablet Breakpoint
Mobile Breakpoint

NewWatchPage_AnonymousFooterCollapse320