Yandex: The rating of the best films in KinoPoisk app for Smart TV
What is KinoPoisk?
KinoPoisk is a Russian website about cinematography. The site provides information about films, TV shows, actors, directors, producers, screenwriters, composers, editors, etc. It also has some features of social networks. At the moment it is one of the most popular movie portals of the Runet, it occupied the 12th line in Alexa rating of Russian websites in July 2019. It was often compared to IMDb.
In 2013, KinoPoisk was purchased by Yandex, one of Russia’s largest IT companies. In 2015 KinoPoisk introduced an online cinema theater feature, providing watching some movies free of charge and while others are available for subscription. The online cinema supports all platforms: Web, Desktop, Mobile, Apple TV, Android TV and Smart TV.
My assignment
There is a rating of the best films on KinoPoisk for the web platform. It is collected automatically by a large number of parameters, so the movie can get into the rating or fly out of it unexpectedly. The first positions in this rating almost never change. It’s necessary to provide a design solution of this rating for the Smart TV application.
Solution
Step 1. Information gathering and problem formulation
I started my work with the analysis of the current version of the rating for the web platform. This is a page with a list of movies which can be sorted out by different parameters. At the end of this page there is a formula by which the rating is calculated. At first I decided to ask my friends how they choose movies to watch. I made a few basic questions:
- Describe the process of choosing a movie.
- What services do you use to choose a movie? Tell about the pros and cons of these services.
- What parameters of the movie most often influence your choice?
- Do you use any ratings or charts to select a movie?
- What features would you like to add to your favourite services?
Using this script, I interviewed 7 people. Two people did not use any ratings and chose a movie in another way. Several respondents considered the IMDb service as a useful tool, but there were not enough information or filters for the final choice. Summing up all the interviews I arrived at conclusion: for making a decision it was necessary to see more than a movie’s name or position in the rating. The cover movie, genre or year of release were also important to make a choice.
My next step was to become an acuitented with the Smart TV industry. As it turned out, all major companies such as Google, Samsung, Lg and Apple had detailed guidelines for developing applications for their devices. Of course, Google and Apple provided the most complete and clear guidelines. From them I learned about the focus model and basic navigation patterns. It was surprising to find out that the most convenient form of scrolling on the TV is horizontal.
While doing my research, I came across a very interesting resource — Netflix Research portal. Here I could read how professional researchers described their work experiences and shared insights about users of their service. One of the most memorable articles for me was the study about generative covers for movies, which were created depending on the preferences of users.
Let us consider trying to personalize the image we use to depict the movie Good Will Hunting. Here we might personalize this decision based on how much a member prefers different genres and themes. Someone who has watched many romantic movies may be interested in Good Will Hunting if we show the artwork containing Matt Damon and Minnie Driver, whereas, a member who has watched many comedies might be drawn to the movie if we use the artwork containing Robin Williams, a well-known comedian.
Summing up all the collected information, I was able to formulate several hypotheses about how the rating for Smart TV app can be implemented:
- The only one type of the rating for app would hardly suffice, users are guided by several types of rating (best movies, cash records and etc.);
- Ratings without filtering and sorting are useless;
- In the process of choosing a movie to watch all the information is important, not just a movie’s name or position in the rating.
Therefore, my solution would have several goals: to find the optimal entry point to the rating page, make it easy and understandable to navigate through this page, give the opportunity to sort out and show all available information about movies.
Step 2. Competitor analysis
Since I did not have a Smart TV at my home and it was quite difficult to find interesting examples of interaction design without physical access to the device. Using a Google in conjunction with Pinterest, I collected a moodboard of concepts and screenshots of online cinemas, game services and various charts. Of course, Netflix looked the most dignified and stylish, especially in comparison with services such as Ivi or Megogo. Having analyzed the collected materials, I realized that the future prototype should not be overloaded with graphics, but on the contrary, the interface has to be easy and simple to understand.
Step 3. Prototyping and solution description
After first attempts to design I discovered that it was extremely difficult to switch from the prototyping interfaces of the web and mobile platforms to TVs’. My first solutions looked more like a usual web pages than a Smart TV app. Trying several approaches, I decided that the best idea would take the principles of navigation from the guidelines as a basis. In my case it was Parade Template from tvOS and Browse Lane from Android TV.
The parade template shows rotating previews for a focused grouping of content, such as movies or albums in a particular genre. A list of groupings is shown on the right. Focus on one grouping to display noninteractive rotating previews of its elements on the left.
Parade Template is perfect for navigating through different ratings and filters. It clearly shows what movies are in each section.
The Browse Lane is a vertical list of all items in Browse Rows. Its items map directly to the Browse Row category names. The Browse Lane slides in from the left, pushing some content off-screen as it enters. Scrolling through the Browse Lane simultaneously scrolls its corresponding row into view. Browse Lane items are for scanning only: the Browse Lane itself is not actionable. The Browse Lane is recommended if you have more than five rows. To open the Browse Lane, navigate beyond the first item. To close the Browse Lane, select a row or navigate off the lane.
In my decision Browse Lane works as a sorting. It is convenient to scan a large number of items but at any moment users can make a few swipes to the left and open the sidebar to change the sorting.
There are 5 main parameters for sorting movies: rating, genre, country and date of production.
Users can be curious to monitor the movement of movies in the charts using the pointer of the previous position.
Conclusion
TV is a device for entertainment, and the principle is “don’t make me think” is doubly relevant here. Remote control and other input devices only complicate the task of interaction with the user. Despite this, I completely achieved my goals: I showed several types of ratings on Kinopoisk, made navigation habitual and comprehensible, came up with a simple way to sort out the rating and showed all the available and important information about movies.
