Subscription Video On Demand: Unified Streaming Apps

At A+E Global Media, I had the opportunity to lead the design of the company's first ever subscription video products. The first product was Lifetime Movie Club which was envisioned and designed as a unique product experience, providing access to the entire library of Lifetime movies. The second SVOD product we launched was HISTORY Vault. This app experience was also unique as it consisted of different content types, such as documentaries and series, and a completely different user base. Then came the third app, A&E Crime Central, which triggered a new design strategy and solution for scalability and efficiency across the SVOD product portfolio.

Above: Home screen experiences on CTV across three different SVOD products utilizing a design system, patterns, and a scalable approach to create efficiencies in product design and development.

Above: Home screen experiences on mobile and tablet devices.

Although each product had unique and original content types, along with brand identities, there were more similarities across the product experience than there were differences. By expanding upon and utilizing the first ever design system I conceptualized for the digital media division, we were able to design once and reuse components over and over. The key was to do the design work up front and to make sure components were unified across the board with applicable variants where necessary.

Above: Purchase and Sign In/Create Account flow utilizing QR codes for quick and easy access on a secondary device.

After the purchase flow, a world of content awaited no matter which product you entered. That said, we needed to make sure we had a scalable global and secondary navigation pattern in place. Users had access to all content within a category, such as series, and could choose to browse all content or narrow the discovery process by utilizing tabbed navigation to drill down into specific genres or category types.

Above: Global navigation featured on the Shows index screen for A&E Crime Central. Secondary tabbed navigation featured on HISTORY Vault allows users to narrow the discovery process and get directly to content they are looking for such as "Military leaders".

Above: Series detail screen on CTV devices. Primary calls to action are Play, Add to Watch List, and More Info. Season and episode navigation are displayed horizontally with metadata and synopsis in view.

Above: Mobile, tablet, and CTV content detail screens. Calls to action vary based on a user's consumption pattern. For example, "Resume" or "Replay" will display based on how much content was viewed. Downloading content was enabled on mobile and tablet devices to allow for offline viewing. Inline notifications appeared if content was nearing expiration. A carousel featuring content "You May Also Like" enhances the discovery experience.

Above: Search experience on CTV and mobile devices. The suggestive search feature offers real-time search query suggestions - saving time and improving the experience for users.

Full screen player experience featuring progress bar indicator and fast forward scrubbing.

Full screen player: pressing up on the remote highlights the "Info" button. Selecting "Info" reveals the content metadata and description.

Full screen player "Up Next" feature activates at the end of a show when the credits begin to roll. Users have the option to quickly go to the next piece of content or continue to watch the credits.

Settings experiences are not very exciting, but they are essential to a user's experience. From managing your profile and account type, to adjusting accessibility settings, the utilitarian features allow users an easy way to make adjustments, including unsubscribing from the app.

Establishing the Design System

Creating and utilizing a design system was the only way to drive the efficiency and consistency we were looking for. We needed a system to work across three different products, with three different brand identities, across multiple platforms - from a living room experience on the largest TV, to a small mobile phone, and every screen size in between. Below are a few examples of what the system and patterns we established looked like.

Brand colors, logos, gradients, and neutral colors were a logical starting point for the system.

We applied logos, colors, and a font across the global navigation and unified a scalable solution for CTV platforms.

Mobile navigation was unified as well, with icons and nomenclature shared across brands and products.

Unifying the card components, focus states, play icons, progress bars, and metadata placement allowed us to use the same component with different brand styles across all products.

CTV examples showed above with focus state and brand colors applied.

Card components were made to work across all device sizes. Above are examples of mobile and tablet episodic cards with brand color styles applied.

Unifying patterns and templates was essential for housing the components the team designed. All the parts were interchangeable, movable, and reusable - creating the consistency we desired and the efficiencies necessary across the design and development teams.

In the end we created a comprehensive design system capable of not only working across the subscription video products, but across the entire video app portfolio which consisted of additional TV streaming apps across A&E, HISTORY, Lifetime, and FYI.

If you scrolled this far, here is a fun bonus for you... One of the first promos ever made for Lifetime Movie Club

Watch the Promo

You may also like