Designing RTÉ Player

Overview

RTÉ is Ireland’s Public Service Media Organisation and I work as Product Design Lead on the Design and UX team. RTÉ Player is RTÉ’s live and on-demand video streaming platform available on app, web and connected TV. RTÉ has four live TV channels (RTÉ One, RTÉ 2, RTÉ News and RTÉ Jr) and a large catalogue of on-demand programmes and movies.

During my work on the RTÉ Player project, I have designed a new mobile and tablet app for iOS/android devices, updated and created interactive prototypes for the connected TV and web products, created a unified design system for RTÉ Player and introduced a variety of new features and components across all platforms. (Note: Some components shown below are not yet available in the production app).

Jump to…

You can skip ahead to a specific part of the case study using the links below.

Mobile and Tablet App
Mobile and Tablet Prototypes
Connected TV Apps
Connected TV Prototypes
RTÉ Player on Web
Design System
Development and Launch

Mobile and Tablet App

Getting Started

I worked with the Product Team and Project Management to finalise the project brief and scope. I tested other video streaming apps on mobile and tablet to see how each one approached different user experience patterns. I then created a user flow in FigJam as a map of the views, actions and functions available to app users and how they are connected. This was the basis for my wireframes of each view and its components on mobile and tablet (portrait and landscape orientations).

Home View

The home view is the first view displayed when the user opens the app. It is the main discovery view for users, comprised of hero and highlight components along with a variety of stacked rails of content tiles. I’ll go through the main components below and then show a sample of the visual design of home view populated with content.

Tile Component

The tile component is the main component used for user discovery. Tiles can be collected in horizontal scrolling rails or vertical scrolling grids and lists. Tiles can have an image (keyart, programme or episodic), text (programme title, episode, broadcast date, category name), badge (channel, play icon, number), progress bar and delete icon.

Rail Component

Rails are horizontally scrolling components populated with a single type of tile.  They can be added to and stacked on the home view and some category views by editors.

Home Hero Component

The hero component on the home view has a static variant for highlighting a single programme/episode and a carousel variant for highlighting multiple programmes or episodes. The hero component can have a background image, logo image (or text title fallback), description text and red tag to add context which makes it flexible enough to highlight box sets, episodic catch-up and live streams.

Highlight Component

The highlight component allows the Player curation team to highlight a specific programme further down the home view – like a more compact version of the hero panel. I created a variant of the component where muted video of the trailer plays (which can be unmuted and watched by the user as they scroll). Users can then choose to either watch the programme or add it to their watchlist using buttons.

Home View Visual Design

Below are two examples of the visual design of the fully populated home view showing navigation, hero, highlight and rail components and their variants.

Programme View

When a user selects a tile in a rail or grid, they are brought to the programme view. The main purpose of the programme view is to bring the user to the video player to watch their chosen content. The video hero component is the main focus, but users can also browse the episode list by series and find related clips and recommendations. There are three variants for the view:

• Series: Finite episodic series, divided by season.
• Continuous: Ongoing series with 1,000s of episodes generally not divided by season.
• Movie: Documentaries or movies with no related episodes.

Video Hero Component

The video hero component contains all episodic information including episode image, title, description, certification, original broadcast date, duration, playback progress and available accessibility settings for the current content. A variant of this component is used in the live view, where a scrollable live schedule replaces episodic information.

Series Switcher Component

The series switcher component allows users to easily switch between seasons of a serial programme.

Programme View Visual Design

Below are two examples of the visual design of the programme view showing navigation, video hero, programme info and tabbed views for further discovery.

Live View

The live view allows users to watch one of RTÉ’s four linear TV stations (RTÉ One, RTÉ 2, RTÉ News and RTÉ Jr) in real-time. Additional popup channels are also used to stream certain content, usually sporting events.

The live view is comprised of a tab bar for switching channels with video hero, channel schedule and channel overview components.

Catalogue Views

Catalogue views act as a browsable archive of all available content on RTÉ Player and usually display tiles in grids, rather than side-scrolling rails. There are keyart, episodic, category or programme title tile options, depending on the view.

Updated Catalogue Views

Based on analytics, the catalogue views were re-ordered by usage and some removed. Some newer components were utilised e.g. hero carousel and portrait tile grids. As well as being more consistent with other streaming services, this also allowed for more content to be visible in each screenful. Stacking the navigation tabs (rather than scrolling) allows later tabs to be discovered more easily on mobile.

Kids View and Kids Mode

Kids content has its own dedicated view which displays a simple portrait keyart grid of children’s content, tabbed by age.

However, parents can also turn on ‘Kids Mode’ from the menu, which reloads the app showing only child-friendly content set against a light background (to make it obvious the mode is enabled).

Search

The search view displays a simple search text input and a grid of the most-searched content. Once a user has entered three characters, a list of automated suggestions is displayed along with a ‘See All Results’ button, which brings the user to tabbed grids of results by type (Programmes, Episodes, Clips & Extras).

Menu View

All settings and helpful information in the app can be reached through the hamburger menu. The menu functions are toggled by grouped switches and include an Irish/English language switcher, parental controls, global accessibility options, notifications and account settings. The help section displays relevant info and FAQs using accordions and text views.

Modals and Alerts

Various styles of modals and alerts are used throughout the app at different points in the user journey.

Video Player

The video player is the destination for RTÉ Player users. New native players have been built for the new mobile/tablet app including a custom UI for the various available actions including playback and volume controls, casting, fullscreen, picture-in-picture, subtitle and audio settings, bitrate and content suggestions. There are slight differences to the UI depending on whether the stream is live, on-demand or ad playback.

Prototypes

I wanted to create shareable, on-device, interactive prototypes that were as close to the end product as possible. This would allow the project team to see how the app would look and behave before being developed and make any pre-development tweaks required.

Live Data

The RTÉ Player app on all platforms is populated using JSON feeds created with a bespoke CMS. All images, text and other data required for populating the interface are included in this JSON file.

I used the ‘Data Sync’ plugin by Emin Sinani to link the relevant JSON keys with components in my design file. This allowed me to rapidly populate the prototype with current live data. The product owners could see exactly how the new interface looked displaying accurate, real-time data rather than chosen, curated imagery. It also allowed me to check how the interface handles longer titles and other elements that may change the design.

Animation and Transitions

For previous projects, our team used Principle App to create .gif/video animations of how certain parts of the interface would move based on user interaction. With Figma, I was able to include all of this motion as part of the Figma prototype using Smart Animate interactions.

Mobile and Tablet App Prototypes

You can try the full embedded Figma mobile, tablet (portrait) and tablet (landscape) prototypes for the RTÉ Player app below.

Connected TV Apps

RTÉ Player has a variety of different smart TV apps by manufacturer (Samsung, LG, Panasonic etc.) as well as dedicated apps for Apple TV, Roku, Chromecast and Sky Q/Glass. Building on the work of a previous designer, I updated the TV app design to be as consistent as possible with other platforms and introduced new components and variants created during work on the mobile/tablet app. I also created interactive prototypes which hadn’t been created for the TV apps before.

User input is more rigid on TV, being restricted to UP, DOWN, LEFT, RIGHT and OK on most TV remote controls, so the navigation path for the user is more linear. Only one item on the screen can be selected at any one time versus the more free choice available on app or web. I created a user path map and user flow to better understand the user experience.

Home View

Tiles, Rails and Grids

Tiles are the primary entry point to the Programme or Live views from another view in the app. There are nine tile types: Keyart (Portrait or Landscape), Live, Programme Title, Episodic, Episodic Progress, Watchlist, Category and Top10. Tiles have a red border when active.

Tiles can be arranged in horizontally scrolling rails or in grids. The user can navigate these one tile at a time with the remote. Selecting a tile brings the user to the Programme or Live Video Player for that content.

Navigation

The navigation bar on the TV app runs along the left edge. It remains in its closed state, showing only icons until a user navigates to the left from the left-most content on a rail to open it. Once an option is selected, the navigation bar returns to it’s closed state.

Hero Preview Component

The top half of the screen in the home view is occupied by the Hero Preview component. This panel displays slightly different information depending on the currently selected tile in the rails below e.g. episodic, box-set, live.

Home View Visual Design

Below is an example of the home view with hero carousel along with Portrait Keyart, Live, Watchlist, Continue Watching and Top 10 rails.

Programme View

The programme view uses buttons to allow the user to play their chosen programme/episode as well as browsing further episodes, adding to their watchlist or changing episodic settings.

Live View

RTÉ has four live linear TV stations: RTÉ One, RTÉ 2, RTÉ News and RTÉ Jr. The live view allows users to see what shows are currently live on these stations, with programme and progress information displayed in the hero preview panel. Selecting a tile launches the video player.

Catalogue Views

The catalogue views are tabbed grid or rail views of keyart, programme, episodic or category tiles. Users can use it to find box sets, the latest streamed programmes, programmes listed alphabetically and programmes with ISL (Irish Sign Language) and AD (Audio Description) versions.

Kids View

The Kids view displays tabbed grids of children’s programming keyart tiles split by age range.

Settings Views

The Settings views use the same tab system as catalogue views to display on/off switches and text explanations of the various app settings the user can turn on or off globally.

Search Views

The Search view allows the user to input programme titles using an alphanumeric keypad and displays results as a grid of programme tiles.

Prototypes

With connected TV, I created prototypes which can be navigated using the UP, DOWN, LEFT and RIGHT arrow keys and using the ENTER key as OK, so we could emulate the functionality of a TV remote control. Using an Apple TV and Airplay, I was able to present and interact with fullscreen prototypes on large screen TVs in team meetings, so it felt quite close to using the real TV app.

You can try embedded Figma connected TV prototypes for the RTÉ Player app below (Note: Click on a prototype to select it and then use UP, DOWN, LEFT and RIGHT arrows and ENTER to use it).

Connected TV Prototype

This prototype includes all discovery views (Search, Home, Programme, Live, Catalogue, Kids, Settings).

Video Player Menu UI

I updated the live and on-demand video player menus to be more consistent with the mobile/tablet app. This involved separating the playback controls from the timeline and allowing users to change the channel, view more episodes, open settings or play from the start using menu options below the timeline. I was able to reduce the number of frames required for the prototype by binding programme title, episode, description and image to variables and changing the value of the variables based on prototype triggers.

RTÉ Player on Web

The web product is the quickest for developers to update, so most new features are generally introduced and tested on web first. The foundations for the web platform were already established by another designer. There were various new components and visual elements introduced during my work on the mobile/tablet app so in the interest of consistency, these needed to be added to the web platform. I rebuilt the web designs across three breakpoints and synced all styles and components to the file from the design system library.

I also created a clickable prototype for the web platform which didn’t have one before – you can use the desktop prototype below.

Help

The existing FAQs page on the website was an uncategorised list of text accordions, resulting in users asking for answers to these and other questions via the contact form and social channels. I redesigned the FAQs section as an easily searchable system of categorised help articles bound to topics or events.

Design System

The previous web and connected TV design files were siloed and used local styles and components. I created a shared design system library which syncs colours, type, variables, logos and some shared components and assets to Mobile/Tablet App, Connected TV and Web design files. This improves the consistency of the visual language and allows for global changes to be made across platforms more easily.

Development and Launch

All my Figma designs, prototypes and development notes were sent directly to the development team, who work in weekly sprints with design updates being divided into Jira tickets. I audited and provided feedback on their test builds to ensure they matched the designs and the motion and functionality were as expected. I also worked with a UX Engineer who acted as a link between design and development.

The new mobile app is currently available to a percentage of Android users and the iOS app is due to launch in the coming months. There are ongoing iterative updates to both the web and connected TV products. The primary UX goal is to have a similar, consistent experience for users of the RTÉ Player product regardless of which device they use it on.

Hopefully this gives you an insight into my process designing RTÉ Player. For other case studies of my recent RTÉ product design projects, please read Designing RTÉ.ie, Designing RTÉ Elections or Designing RTÉ Radio.