Haier is the biggest manufacturer of home appliances and electronics, including smart devices for the home.
In 2021, the company was preparing to launch an Android TV app that combines an online movie theater aggregator, an intelligent home dashboard, and a Haier product catalog.
At the same time, Haier turned to us, 65pixels, to develop the interface for a new application. Such projects are rare, so we immediately took on a non-standard (but interesting!) Task.
Before working with Haier, we accumulated a lot of experience creating designs for mobile applications, but we were gaining expertise in Android TV interfaces. It was a challenge for our team – and we accepted it.
First of all, we decided to thoroughly study how users interact with Smart TV – got a set-top box, tested the remote control on online cinema applications for several days.
This dive into the field has given us several essential insights. They also became the main tasks in the design of our interface.
Insight 1. The remote control is inconvenient. But there is no way without him.
We immediately identified the main difference between a set-top box and a mobile application – control of the remote control. Using the sensor on your smartphone, you can easily select the desired item or switch between screens – you need to swipe up / down or right / left and pressed your finger on the net. But that’s not the case with TVs.
The remote takes more time and action. For example, to get to the bottom element, you have to go through all the previous ones – you cannot go from the top to the bottom one. In addition, it does not always clear where precisely the cursor is at the moment.
So we have highlighted the main task – to take control using the remote control as conveniently as possible for the user.
To do this, we have positioned the elements on the screen so that you can quickly and easily switch between them. So that the case user can easily recognize the cursor’s location, we have thought over the indication of the active element. This way, the selected part is enlarged and highlighted in blue.
It was also essential to provide that the TV is located at a great distance from the user, so the elements and text should be large enough. To make sure that all buttons are visually readable, after drawing the screen, we moved away from the monitor by about 3 meters and thus carried out a “test.”
It is inconvenient to enter the movie’s name through the keyboard on the TV screen – the process is similar to writing an SMS on a push-button telephone: first, select a letter, confirm, select the next one, confirm, and so on. For a quick search in catalogs of online cinemas, we have added voice search. It is easier and faster to pronounce the desired movie and TV series title than to enter it manually.
Insight 2. Aggregating content is also not easy
The second feature of our project is aggregated content. Haier does not have its catalog of films and TV series. Partner cinemas provide them.
Each catalog differs not only in content but also in visual design.
The fact is that cinemas provide horizontal and vertical posters – because of this, you cannot get a visually pleasing interface by simply placing pictures of different formats on one page.
We set the following task: collect a standard catalog in a single style and make the screen logical and convenient.
We found a solution to the problem quickly – we allocated a separate section for each partner cinema.
Cards of films and TV series practically do not differ from each other. All elements are arranged according to the same logic. This also did for convenience – so the user knows that the buttons are in their usual places and does not waste time searching.
The only difference is that we added a quick selection of the season and episode for the series cards so that the user can immediately jump to the desired spell.
Insight 3. Dark is the new black
At the start of the project, we suggested that the client abandon his corporate light theme in the design. The main reason is that dark colors on the TV screen strain the eyes more minor, which means interacting with the application is more comfortable. Plus, most TV box apps use the dark theme.
The client liked the new color scheme so much that he decided to change the corporate style of the mobile application. So we received a request to redesign the Haier EVO mobile app 🙂
Insight 4. Warframes
Planned Development was iterative. We prepared prototypes in MVP and a more functional version to further add new blocks and sections in the application that would be as painless as possible.
Result
Main screen. The entry points to the SMART HOME device management screens, the Haier product catalog, and Haier Magazine.
Further – the main sections with films / TV series and various selections: New items, Recommendations, Exclusive offers from partner cinemas and others.
Screens of films and TV series
When choosing an icon for a movie or series, the user goes to the detail page. It includes basic information, plot description, ratings, and other details.
Since the Haier app is an aggregator, several audio tracks from different cinemas for one movie or series are available. We have provided the ability to view all the voice acting options in one file.
Plans
As we said, we are now working on a big task – the redesign of the Haier EVO mobile app. And, of course, we develop design solutions for new features of the Android TV application.
