Univision: Sports streaming service

Outcome

Labelling each wireframe block with the AXIS platform component it uses became standard in Massive’s UX specs for other clients. The service itself was never released. After the UI was delivered, the project folded over commercial agreements between Univision and US TV and cable providers.

Context

Univision’s networks mainly serve Hispanic and Latino audiences in the US and Mexico. The new service would carry mostly football, live and on demand, from the main leagues of the Americas and Europe. It would run on AXIS, Massive’s VOD platform, which let broadcasters release a full VOD product in a short time. The service was to be built only from out-of-the-box AXIS modules. Its working name, Socco, predates my start.

The scope covered responsive web for desktop, tablet and phone, native apps for iPhone, iPad and Android phones and tablets, and a Chromecast receiver. My part was the UX, from April to June 2018. I drew the wireframes in Sketch and specified them in Axure, with references throughout to the AXIS demo and to AXIS’s own wireframes. I worked closely with the client team in the US to deliver as much of the expected experience as AXIS allowed, and to agree alternatives where it fell short of their business requirements. Designs were reviewed at Massive and with Univision’s business stakeholders.

Organising leagues by confederation and filling the winter break

The service would carry leagues from three regions in P1, with more under each country in P2. The league taxonomy follows the confederations: UEFA for Europe, CONCACAF for North and Central America and CONMEBOL for South America. In P1 a region home page sits above its league pages. In P2 a country page sits between them, with more leagues under each country, among them second divisions and Brazil’s state championships. The Leagues menu lists regions first, then countries A to Z, then regional tournaments.

There is little content over the Christmas and New Year break, and the service needed enough to watch through it. I mapped what the service would carry at each stage of the season, from launch through mid-season to that break, when a two-week VOD cut-off left three competitions to watch. To fill the break, I recommended extending the VOD window to four weeks for major competitions and keeping two for small tournaments.

01Browse

Mapping every page to AXIS components for the build

Home, Schedule, Leagues, Region and League pages come in all seven layouts, and I labelled each block on the wireframe with the AXIS component it uses: Hero 3:1, T1 and T2 tile rows, S1 category rows, ED2 and ED4 editorial blocks, the 4.0 list. The annotations point to the same modules in the AXIS demo.

On desktop, an annotation column beside each page holds its rules and references. Among them, the navigation bar hides on scroll down and returns on scroll up, and the 3:1 hero takes playable content from any category.

Visitors on phones and tablets can browse the same content on the web as on desktop, in T2 rows, and need the native app to play video.

Fans need to see from a game’s tile, at any point in the day, whether they can watch it yet. Every tile follows one set of states, which I specified in the IA pages.

Meeting Univision’s requirements within out-of-the-box AXIS

02Playback

Matching player controls to each type of content

Viewers need different controls for a live game, a VOD game, a clip and a TV channel. NeuLion was to supply the player, and I specified the controls for each type of content, on iOS as a skin of NeuLion’s own. Live games get a 30-second skip back and a Back to Live button, active whenever the viewer is behind live. VOD games and clips add a 30-second skip forward and the full length of the event. Channels, whose streams carry little metadata, get play and pause only.

Getting games onto the TV with Chromecast

Fans watch football on the TV, and in this scope they would cast a game to Chromecast from the apps, or from the web player where available. For casting from the apps, I specified the sender flow on Android and on iOS in ten steps each, from the introduction to the extended player, against Google’s Cast design checklist and the AXIS Chromecast spec. Each step is paired with the screen the TV shows at that moment. Lock screen controls are Android only. The receiver was out-of-the-box AXIS, specified in seven states from loading to playing. Both flows click through as a prototype in Axure.

03Handover

Turning signed-out visitors into customers

For the test of whether fans would sign up, signed-out visitors had to see what the service offered and, on the web, be able to join. Signed out, the web opens on a landing page and the apps on an onboarding page. The detail pages for live, coming-up and VOD games have signed-out versions. Sign-up on the web runs from choosing a plan to creating the account, payment and confirmation.

In the apps, My Account redirects to the account on the web. On iOS that redirect was pending a review between Univision and Apple before implementation, to avoid an App Store rejection.

What was deferred, and what was handed over

Search, country pages, relative kick-off days and device management were held for P2, and the rest needed more than out-of-the-box AXIS or iOS allowed.

Sources

• Univision UX spec ↗Axure, April to June 2018Get password →
• Portfolio slide2020