WWE Network: Native apps

Context

WWE Network combined a 24-hour linear channel, the weekly shows and pay-per-view events with an on-demand library, in the same app as WWE’s news and results. Anyone could browse the app and watch short-form video and the pre-shows of live events, and the rest needed a subscription.

Massive specified Network 2.0 separately for the native apps, responsive web and TV. I covered iPhone and iPad, and Android phones and tablets, using AXIS modules wherever WWE’s content fitted them and offering alternatives WWE could agree to where it did not.

Setting out the IA

The engagement opened with two days of client workshops in Connecticut in May 2018, followed by concept decks in June. On 13 July I shared a native document for review, with the site map, breakpoints, grids and tiles, native navigation for iPhone and Android, and two options for the home feed.

In the site map, v1.0 of 4 July, I put WWE’s programming under a Watch tab, from Featured and the pay-per-views to Raw, SmackDown, NXT, In Ring, Originals and the schedule. One player and detail page had variants for pay-per-view episodes, Originals episodes, clips and playlists.

Choosing a native home feed

The Home tab showed WWE’s editorial feed of news, galleries, clips and playlists, and in July I put two ways of building it to review. The first loaded wwe.com’s home page in a webview, without the site’s header and footer. Each link opened a full-screen webview, and we agreed in review on a Close button in its top bar, to set it apart from the browser’s Back button at the bottom. I noted the assumption that any page opened from the feed, WWE’s own included, would keep its site header and footer inside the app, and asked for a correction if it was wrong. The second option rendered the feed in the app from a data source such as a JSON feed, and opened its links in a separate webview.

In both the November and January exports, the home feed is marked as in the backlog.

01Design

Designing for four device classes

In P1 I drew each page for the four device classes, and for both orientations where the layout changed, on grids and tile rows set for each class. Navigation followed each platform, with links to Apple’s and Google’s guidelines on the page. iPhone and iPad used native tab bars, and the Android bottom navigation replicated them on specs from Massive’s UI team. Sections with several shows, such as Network, used scrollable tabs along the top, and the More menu was a table view on iOS and a list on Android.

I also specified playback for every device class, with Chromecast sender flows for Android and iOS and the receiver, AirPlay as Apple’s standard flow, and a limit on concurrent streams that paused the oldest stream first.

How the sprints ran

Delivery ran in ten sprints, and each week I reviewed the work with WWE’s product and design teams and Massive’s product team. Each flow in the Axure spec has a code, LOG for sign in and CWA for account creation, and each screen a number within it, such as LOG 01-02 for the email field in focus. When WWE changed the sign-up flows through a change request, I kept the previous diagrams in the spec as v1 and linked them from the new ones, as the reference for testing.

Drawing the sign-up and upgrade journeys

Access depended on four user levels: an anonymous user (L1), a free account (L2), and the Premium (L3) and VIP (L4) subscriptions. I mapped twelve journeys in the sign-up and upgrade diagrams, each from a user level and an entry point, such as the first launch, the More menu or a locked video, to a goal level. Across the app, a locked item showed Upgrade to watch in place of Watch and opened the journey for the user’s level.

Only a Premium subscriber who had paid through the app’s own store could upgrade to VIP in the app. Subscribers who had paid on the web, by card, PayPal or prepaid card, or through another store were referred to the web to upgrade.

Branching the flows for TV Everywhere

In the November state, TV Everywhere was one page and a link on the sign-in screen for customers subscribed through a TV provider, with a note that Adobe Primetime authentication worked only in Canada and the Middle East. By early December WWE had raised a change request, as a Jira ticket, under which customers in those regions could join Premium only through their TV provider.

I branched the Rest of the World flows into a TVE branch in the same spec, reusing as many flows and screens as I could, and colour-coded each flow in the branch as unchanged, slightly changed, significantly changed or new to TVE. In the branch, a native list of providers led to the provider’s own sign-in in a webview under a bar with a Cancel button, and a success token then granted Premium or left the user browsing on a free account. VIP content, which no one in those regions could buy, showed a message that it was not available there. For the same request I added a Create account link to the sign-in screen, and asked for it in both branches to keep them consistent.

Designing the metadata blocks

Section 03 of the spec is the component library, from forms, error views and snackbars to modals, selects, a sort panel and a bottom sheet, most drawn for phones and for tablets in both orientations. In section 06 I set out WWE’s catalogue as three blocks, the metadata box on detail pages, the hero and the tile, each by content type.

The heroes matrix covers twelve types, from weekly and legacy In Ring shows to Originals, pay-per-views, clips, shows, playlists, superstars and promos, in their default, On Now and Live Now states. The Watch button reads Watch, Resume for a partly watched video longer than ten minutes, Upgrade to watch without the entitlement, or Preview for an event coming up. Tiles follow the same types, with states of their own for news and photos, the schedule, continue watching, now playing and watched.

02Handover

Writing the spec for UI and development

For the handover I documented every screen and behaviour variant for Massive’s UI designers and the developers, by device class and orientation. Where a layout was the UI team’s call, I said so on the page, marking the tablet columns of the schedule and the edit mode list as recommendations, and leaving the final styling of search, transparencies included, to the UI team. On each component page I noted its behaviour and where it is used. Error views, for example, fade when the user taps close or anywhere outside, and appear in the sign-in, reset and sign-up flows.

Outcome

By my account in 2020, the native journeys were the base for the other platforms’ UX documents and for the native UI. By the same account, the app that went live did very well on conversion and in app store feedback, with ratings up on both stores.