Creating Admin Interfaces for an Online Cinema

Cinescope combines two business models. On one hand, it is a classic online cinema where users register, watch their favorite movies, rate them, create playlists, etc. On the other hand, Cinescope is also a distributor, meaning other cinemas and online services can buy the rights to broadcast movies and series from them.

A special team manages all the movies on the platform. They create cards, fill them out, add descriptions, shots, actors, trailers, ratings from external services, the shooting crew, and more than 50 different fields. This allows users to use a complex search, for example, by the year of release and specific actors.

Moreover, every movie has a license term. Sometimes rights transfer from one holder to another, so Cinescope's administrators need to constantly ensure everything is correctly documented. This is especially important considering that any content could be purchased by their partners. Penalties for violations of these rules are huge.

We helped the Cinescope team create admin panel dashboard & template design that simplified managing movies, catalogs, playlists, and issuing licenses to partners.

The Task - Conveniently Manage the Catalog and Playback Rights

Initially, the service was managed using a quickly assembled Bootstrap content management system interface, but as it grew, the team faced difficulties:

• External partners also work with the internal part, at least taking links from it and checking license terms. This part of the client service, so such a platform must make a good impression.
• There were so many settings and additional fields for each movie that the developers no longer had enough knowledge of interface design to make everything convenient.
• Some required interface elements and blocks were not found in either the CMS or any third-party solution. They had to be designed from scratch.

We already had experience developing a CMS control panel & user interface and an admin  panel UI design for a website, we knew the specifics of working with licensed content, so Cinescope turned to Evrone's design team to design the administrator panel.

The Solution - Admin Panel Design & Development

We decided to work on the UI for the admin panel as if it were a new product UI — gather business requirements and pains, understand nuances and structure, and make prototypes. To save developers' time, we designed the interface with already styled and functioning components in mind. These ready-made components satisfied everyone, and we only had to reassemble new ones from existing ones.

Collecting Functional Requirements

Before creating the UI for the control panel in the project, it was necessary to gather requirements from all future users. This is the longest stage: we met with the content team and product manager many times to collect all the functions they wanted to see in the admin panel and all the sources and types of data associated with these functions.

Then we created a map that describes the functional capabilities of the new management system. In it, we highlighted features that needed to be implemented first and those whose release could be planned for the future.

This not only helped us collect a list of requirements from future users but also come up with several design solutions at this stage. For example, the resulting structure suggested to us what the navigation menu should be like to cover the most frequent scenarios of the content department guys.

At this stage, we also talked to developers and learned about technical requirements that the editors' team didn't know about, such as displaying the internal ID of a movie.

Creating a List of Movies

We did everything so that content editors could quickly find the necessary content, filter it, and learn the most important things without having to delve into the card of a particular movie or series.

A complex filter system helps to find the right films from thousands available. Each filter is multi-select, so you can choose several options at once. For example, all movies shot in the USA and Japan.

The search itself happens automatically, a second after the user stops entering anything in the search bar.

In the resulting list, it is visible whether this movie is published for viewers or not, whether all the necessary information is filled out for it. Hovering over each parameter brings up a tooltip to make it easier for new or external employees to navigate the search results.

We also provided a system of color notifications about purchased rights so that this information could be read at a glance. The list indicates the range of dates when the movie can be shown and it can be colored in one of 3 colors:

• White - more than 6 months left until the license expires.
• Yellow - 2-6 months left until the license expires.
• Red - less than 2 months left until the license expires.

Creating a Movie Card

Creating a card starts with a simple dialog box. To speed up the process, editors can enter movie IDs from Kinopoisk or IMDB, and then the available information will automatically be pulled into the card. But they can also be entered later, to update or overwrite data.

Autocomplete also helps the editor - after entering the first letters, the system itself will suggest an already saved actor, country, or other data. If new data are entered, the system will save them for the future, and in the case of an actor or crew member - offer to create a new person, attach a photo to them, etc.

There are also functions that we had to invent from scratch, as there is no standard in the industry for this - features are rare and only needed by online cinemas.

For example, you can upload a watermark and "embed" it in the film to protect it from copying. Or there, in the card, a "heavy" version of the movie in the highest quality can be automatically decoded for 1080p, 720p, and other resolutions.

One of the most important functions in the cards is license management. Ideally, licenses should follow one another seamlessly. But this is not always the case, and sometimes a movie cannot be watched for 2 weeks. We show a list of all active licenses, as well as highlight the gap between licenses, to additionally draw editors' attention to this.

Here you can also issue licenses to partners, manage the terms of rights transfer, and monitor the status.

After filling out and attempting to save the card, a notification system will alert the editor of unfilled fields. If critical information is missing, the card will not save, and you will have to return to editing. In other cases, the save will be successful, but empty fields will be highlighted in color, so they do not have to be searched for during the next editing.

The Result

After completion, we handed over all designs to the Cinescope team and consulted with developers. In addition to the list of movies and the movie card, we made similar functionality for managing series and TV programs, user authorization, playlist page, etc.

The resulting design is already saving time for the content team. According to their feedback, work has become easier, and thanks to the notification system, there are fewer errors. If you are also looking for a team to develop a custom CMS software, create a custom control panel section or UX/UI interface of the administrator panel, fill out the form below and we will contact you to learn more about the project.