Central Promo Block
2021—2022, Product Design
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 Promotional 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.
Ch. I
Context and first iteration
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, and not as part of the image. We have also prepared a place for posting additional information: content release dates, content shields, and other information.
Gallery and navigation update on Smart TV
Final
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 Central Promo Block for the IVI website
Final
Ch. II
Second iteration for mobile apps
Problem
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.
Second iteration 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
Final
In addition, I corrected the way the block was displayed on wide screens in tablets in portrait mode. Due to the fact that the rebuilding of the block was set only to the width of the screen - it was displayed poorly there, 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
Final
Also, in the future, we want to make a convenient transition from the CPU to the full-screen view of the gallery, which will consist entirely of videos tailored for the mobile format.
Future option of gallery transformation
Ch. III
Process details
Guidlines and tester
The text has been added to the central promo block, and due to the fact that 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 tester for them in Figma component-based, which allows you to try the image and choose the color of the text that needs to be specified in the admin panel when starting 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
Change log
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.
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 fixing decisions in the process of working on a project.
Ch. IV
Results
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.
Metrics
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.
More selected projects
Drop me a line
skorobogatkonn@gmail.com