The story about the redesign of the main gallery on the homepage for the streaming service
Central Promo Block
Reading time 5 min
Context & First Iteration across all platforms
IVI is the leading streaming service in Russia. Like Netflix, but smaller. The monthly audience of the service is more than 40 million people. The service works on a variety of devices: web, smartphones, Smart TV, Android TV, Apple TV, and game consoles.
The Central Promo Block (CPB) is the main gallery of the application's main page. It is placed in the first place in the application. The gallery is highly important for business, as it is one of the main tools for promoting new products in the service.
In this project, my colleague made the first iteration. I created initial concepts and minor updates for all platforms after launch. Also, I created the second iteration for mobile applications.
Initially, the CPB was a gallery of small static images with the same format on all platforms. Because of this, it looked best on smart TV and the desktop web, while the mobile web and mobile apps suffered. We decided to fix it.
Stages of work on a first iteration of the promo block for applications
On the web and on Smart TV, we left the image format almost the same as it was originally. However, the structure has been redesigned. We added a synopsis to the content and began to display the title logo systemically, not as part of the image. We have also prepared a place for placing additional information: content release dates, content badges, and other information.
Gallery and navigation update on Smart TV
On the web, we thought about redesigning the navigation in the product at the concept stage. However, in the end, the navigation was left the same, so it was decided to slightly change the promo block format and make it similar to Smart TV.
Working on the Central Promo Block for the IVI website
Second Iteration for Mobile Applications
After running the experiment, we found that the hypothesis of changing the block format in mobile applications worked perfectly. The CTR of the block has obviously grown, but not enough to compensate for the decrease in the reach of the lower blocks. Because of this, we did not see an increase in global metrics. Therefore, we decided to take on the second iteration for mobile applications. Having the results of the first approach, we formulated a simple task for ourselves.
It is necessary to increase the size of the Central Promo Block, but at the same time show the same number of galleries on the first screen as in the original version.
Thus, we planned to increase the CTR even more and at the same time not ruin the rest of the metrics.
Second iteration of CPB for App
Luckily, our previous version of the app had fairly generous padding between galleries, so I was able to make the layout of the elements more compact. I will show the overall process from the very beginning to the second iteration and how we see the future.
The full path of work on the central promo block from the original version to the second iteration
In addition, I corrected the way the block was displayed on wide screens in tablets in portrait mode. Because the redesign of the block was set only to the width of the screen, it was displayed poorly on wide screens. I corrected this defect by building the adaptive logic based on the screen proportions. To do this, we had to work out additional states of the block, but this radically improved the display of the block on large screens.
Work on the tablet version of the application
Also, in the future, we want to make a convenient transition from the CPB to the full-screen gallery, which will consist entirely of videos tailored for mobile format.
Guidelines and tester
The text has been added to the central promo block, and because the background under the text can be different, we have made two text color options. There were errors with the choice of color. Since preparing images is an editorial responsibility, I made a simple component-based tester for them in Figma, which allows them to try the image and choose the color of the text that needs to be specified in the admin panel when creating new material. It’s not rocket science, but with the help of this tool, we removed errors in the choice of color by the editor.
Tester in the Figma for editorial staff
Previously, we have repeatedly encountered the fact that design changes are made after development has begun. Due to the structure of the teams, the information did not always reach all participants in the process. To improve this a little, I started separate documentation in Figma and called it the Change Log.
In fact, it is a simulator of commit systems in GIT. Making the next changes to the design — I fixed these changes in this log. Thus, the developers always knew where and what changes had occurred since the last version. Of course, I continued to notify them through standard communication channels, but this log was also helpful as a history of decision-making. Now I try to practice this tool, including for fixing decisions in the process of working on a project.
According to the results of work on Smart TV, we received a 3.8% increase in watching after clicking on the block. On the desktop web, the CTR of the block increased by 11.4%, and the watching after clicking on the block by 13.6%. On the mobile web, CTR increased by 20.1% and viewing after clicking on the block by 29.4%. Well, the best results were waiting for us after the second iteration of the App — the CTR of the block showed an increase of 47% and 52% for Android and iOS, respectively. At the same time, the coverage of the lower blocks did not change and the conversion returned to its original values.
In addition, we slightly improved the process of working with development in the later stages of working on a feature. The changelog helped us a lot, which allowed us to keep all developers informed and keep a record of changes to the design.