A bit of context
The project consist of three different phase as following:
Research Phase
It was a 10 weeks long collaboration done by my colleagues Zita and Harini. The goal of this phase was to identify the UX issue and users pain points through multiple research methods. I joined our two researcher in the last weeks to suggest design recommendations based on the research findings.
Design phase 1 | Cinematic Experience
At this point the actual design work started. I prepared a 3 months long roadmap and defined the scope and deliverables. Our main focus was on redefining the IA, redesigning the Home page, Search experience, Content recommendation patterns, Explore experience and providing a visually unique and appealing interface using the existing branding guidelines.
Design Phase 2 | Sport Experience
After completely redesigning the cinematic experience, client wanted to have a unique yet consistent design for the sport section. I was responsible for providing new design solutions that are visually unique and also intuitive and joyful to interact with for the users.
Football league landing page
When we started this stage of the project, I began analyzing the variety of sports offered by the Shahid platform. We discovered 4 types of sports, comprising Matches like football and volleyball, races such as Formula 1, combat sports like WWE and Boxing, and Individual events like equestrian competitions.
Based on our research findings, we chose to concentrate on the most popular categories, which were football and F1. My challenge at this point was to develop a design language that captures the thrill of these events and delivers a distinct experience. Because of my personal interest for football, I started my process by focusing on crafting the landing page for champions leagues.
I am also a huge fan of video games and specifically FIFA games. So that became a source of inspiration for me and after multiple round of iterations I came up with the idea of using a tile system for designing the entire menu.
This approach provided a very simple navigation system which is so important specially when designing for TV.
The other thing that I wanted to achieve here was a to create a dynamic interface and convey the sense of excitement. To achieve this beside adding some micro interactions in the background I also designed the tiles in a dynamic way. Each tile content changes through different intervals but in a moderated way to avoid making confusion for the users. You can see the interaction in the video above.
Formula1 landing page
Based on the same language that I created for the football page, I designed the F1 landing page as well. But each of these sections were unique in details. As an example below after the first tile which is a link to the live matches, the next tile is designed to cover the award winners after each tournament which we knew was an important thing for F1 fans.
When we put these new designs into tests, All the Shahid viewers loved the new designs visually and also found it very intuitive and joyful to interact with.
Match stats
Another crucial section for our audience involved the match statistics. It was essential to present the information in the most visually attractive manner. This aspect is particularly fascinating when it comes to football games.
In the example provided, you can observe pre-match statistics that are displayed when the match hasn't started, and the user selects to view it.
Again by following the same design language, I designed the same section specifically for the F1 matches.
Teams
Another section that had to be redesigned was the teams pages. Each team has a specific page which users can see specific data there.
One of the main challenges that I had in designing all these interfaces was the limitation of using arrow keys on the remote controller. In the example below the navigation works in this way:
Pressing down will change the section from players to fixtures and pressing right will change the player from Ben white to Gabriel Jesus.
I used the same approach everywhere to keep everything consistent and help the users to have a frictionless experience.
Home access point
The other thing that I had to consider was redesigning the access points that were available in the home page of the app. Below there is screen which shows the specific carousel that I designed which represent different sport content that is available on the platform.
I also used the specific tiles that I had designed for the matches to show the live matches carousel that could be part of the content that is available on the home page.
What I learned
When designing an app for tv, it is crucial to always keep in mind the context of the experience. The feelings and goals of users when interacting with remote controller. The experience has to be frictionless and super intuitive for the users. By overlooking the details of the experience the overall experience can be ruined.
It is crucial to find a good balance in putting time and effort into designing, prototyping and testing. At the start of the project I spent too much time thinking of simulating the interaction with TV Remote controller.
Designing for streaming service is not like designing a Saas product. The experience should be built around interacting with content rather than menus, links and navigations.
In every case and scenario when interacting with a TV app, the user needs and goals should be identified and considered carefully. A tiny section that does not work properly and does not offer a pleasant experience can affect the whole user experience
Senior Product Designer