Video streaming CMS

Improving content management through a white-label CMS for on-demand video streaming platforms.

Problem

The company used a third-party CMS to launch its video streaming service, but this choice led to repeated delays and errors in updates, making it harder to work efficiently and keep up with growing demands.

Solution

The company identified the opportunity to develop an internal white-label CMS, not only to optimize content management for the streaming service but also to generate new revenue by offering the solution to other market players.

Our Goal

Enhance internal team efficiency and streamline content management with a CMS tailored for video streaming platforms.

Key Results

Reduction in content management time from 7 days to 1 day.

Cost reduction by replacing a third-party CMS with an in-house solution.

Monetization of the white-label CMS, generating new revenue by offering it to other market players.

The CMS manages over 5k media files, serving an average of 40k monthly subscribers.

My role

Product Designer

UX Researcher

Duration

Jan - Dec 2022

Key activities

Product discovery

User research

Workshop facilitation

Prototyping

Usability test

Visual design


Team

5 Back-end developers

2 Front-end developers

2 Product designers

1 PO

1 PM


Stakeholders

Product director

CTO

Streaming product team

Defining the initial scope

The project started with exploratory research, talking to potential users and developers experienced in video storage and distribution. These conversations helped us understand the project's scope and define the core features of the CMS.

Movie

registration

Series registration

Media upload

Thumbnail upload

Content search

Playlist creation

Content rental

Our user

Since the tool was intended for internal use, our users were primarily members of the video streaming product team, including Product Specialists and Product Owners.

At the beginning of the project, the users had no knowledge of CMS tools for managing on-demand content, as all content management for the product was previously handled by a third-party company.

Benchmarking

We benchmarked leading streaming platforms to define the data our CMS must support, focusing on thumbnail types, video formats, and the info displayed when selecting content.

The search can be conducted by genre, actor, director, characters, linear channels and keywords.

It's possible to navigate within the search results.

There is a search field within the playlist to facilitate content insertion.

Change the icon and name of the media screen

Add/edit playlist thumbnails photo. *Thumbnails would be optional in this context

There should be an option for the user to choose the type of thumbnail to be used.

Whether to use to movie thumbnail or to upload custom thumbnails.

Add/edit playlist title and description (metadata)

“We should generate a URL for the created playlist so the squad can place it in the publisher”

Have a counter that shows the user the number of contents in the playlist.

Add/edit playlist thumbnails photo. *Thumbnails would be optional in this context

Add, edit and remove collections.

User Interviews

We interviewed potential users to validate assumptions and needs identified during the benchmark phase, as well as to discover technical requirements.

Turning research insights into action

Based on the information gathered in the previous stages, the data and insights were converted into User Stories, which served as the basis for creating the initial wireframes and prototypes.

Example of user stories: As a user, I want to create a playlist to be streamed with movies and series directed by Steven Spielberg.

Visual Exploration

During the UI definition phase, we aimed to explore different design solutions for each feature of the project, analyzing the pros and cons of each approach to ensure that the proposed solutions met the User Stories and provided the best experience for the users.

Filters applied on the side

A common pattern in various platforms

Filters stay visible for quick adjustments

Filters applied on top

Limited space for horizontal filter expansion

Filters disappear while scrolling

Filters in the dropdown

Reduced visibility

Needs one extra click to access filters

Co-creation workshop

In one of the features, the proposed layout was not approved by the technical team, and the UI alternatives we explored were also unsuccessful. To move forward, we organized a co-creation workshop with the squad, allowing them to collaborate on developing a solution that met both technical requirements and user expectations.

Usability testing

To ensure the design was intuitive and easy to use, we conducted approximately 30 usability tests throughout the project, validating different features and functionalities. After the tests, we shared the results with the squad, highlighting the insights and informing them of the next steps in the project.

Handoff

After the initial deliveries showed several differences between the designed layout and the developed layout in Staging, we decided to add this level of detail in the Handoff. To avoid rework and post-development adjustments, the layouts and components were prepared with detailed specifications.

Design System

As the project progressed, there arose a need to create a Design System to reuse components and standards, optimizing development time. The Design System was created alongside the project's features, evolving collaboratively with developers to incorporate new components and Design Tokens.

Business impact

The CMS developed was officially implemented in early 2023 with the company's on-demand video streaming team, enabling all content management to be handled internally rather than by a third-party company, resulting in greater agility and independence in managing video content. Months after the tool's implementation, the company terminated the contract with the third-party responsible for managing the media, leading to a significant reduction in costs.

Besides being implemented internally, the CMS was developed as a white-label product, allowing the company behind it to expand its operations by offering the solution to other market players, thus monetizing the product.

Faster Content Management

The implementation of the CMS reduced the content management time from 7 days to just 1 day.

Cost Reduction

The adoption of an in-house solution eliminated the need for a third-party company, resulting in cost savings for the company.

Monetization

Being a white-label tool, the CMS generated new revenue by being offered to other market players.

Scalability

The CMS manages over 5k media files, serving an average of 40k monthly subscribers.

Multi-Platform

The CMS content is available for on-demand streaming on Web, Android, iOS, and Smart TV platforms.

Interested in this case study?

Feel free to reach out for a presentation.

Enhancing a SaaS platform with redesign and data visualization.