OTT Channel Planner

Problem Statement

Colleagues working on channel programming at Axel Springer have to go back and forth to 3 different sites. The video inventory database, Bild's or Welt's origin database, identify the video they want to put on the channel, write down the video ID of the video (in the past, these serial numbers can be easily confused), consolidate them in a weekly Excel spreadsheet, and finally give them to the engineers in the OTT channel department, who are asked to put the videos closer to the channel in order. They don't have a robust platform to do this. They don't have a strong platform that can help them streamline and complete the above tasks efficiently.

Turning Point

The team knew that the original workflow was an inconvenient way to work. However, building a channel planner platform from scratch was a huge project, so they worked together for about a year. Until the OTT department was overwhelmed by the error-prone nature of the workflow, they were determined to change the status quo.

Design Research & Workshops

To better understand the details of the requirements behind the scheduling process and the pain points of the users, I organized a kick-off workshop with users and stakeholders. In this workshop, we visualized the pain points of the unimproved version of the user flow, discussed them, and invited each participant to draw the perfect user flow from their point of view.

After executing this workshop, we identified the following key requirements for a programming platform from a user's point of view:

video database and scheduling functions to be integrated into one platform.
the platform must quickly find the desired movie through a few simple filter functions.
videos need to be able to be previewed

Limitation

From the stakeholder's point of view, it was mentioned above that they wanted to maximize the speed of the development process, so they chose Flutter as the development language. This also means that the designer needs to accomplish everything through the material design component. Under the framework of limited design components, the program arrangement can be achieved.

Design Process & Usability Test

After many comparisons with users' requirements, I finally divided the design into three main functions in columns, namely filter, result, and plan. I also tried to utilize different material design components to conduct usability tests to find out the most reasonable and efficient application results.

During one of the usability tests, I found that most of the programmers were using a 13-inch Macbook to do this work. Therefore, I improved the function of collapse & expanded columns with it.

Worth mentioning is that this group of engineers had no prior experience working with designers and no exposure to front-end development. Therefore, organizing the rules for using each component from each small element to each interface with the rules for using each component became one of my other important tasks before delivering the design.

In this project, I worked with a team of engineers to update the project daily. I also took the opportunity to learn how to communicate with the engineers and teach them to use Figma's dev mode to try to minimize the information gap from the design to the front end.

Finally, the design system for this product is well-organized and comprehensive, with a detailed guideline added. This ensures that even if I am not the designated MVP 2 designer for this particular product, I can still efficiently utilize the design system to create and design a variety of new features quickly and effectively.

prototype

Through user interviews, we found that the most important search features include: keyword search, video source filtering, and setting a video length range. These features are effective in helping users find the videos they are looking for. Search results can be added directly to the playlist, and added videos are clearly labeled. This design prevents users from having to add the same items over and over again in a tedious process.

In Linear Channel, users often face two scenarios: overlapping broadcast times or lack of programs in a certain time slot. This prototype illustrates the overlap situation and provides a time slot filter that allows the user to set the minimum and maximum time. In addition, it suggests programs that might be suitable to fill the gap.

Users can view the channels they are responsible for from this control centre page. They will be able to see the number of views and the amount of profit for the channel for a given month, as well as a graph of the number of views and the amount of profit on a day-by-day basis. (Note: The figures shown here are for example only and are not indicative)