Project Name
Fios TV Core
Category
UX/UI Design
Media / Entertainment
Overview
Due to the update of the Verizon streaming service Fios TV there were many different parts of the UI that had to be updated across the core products (Fire TV & TV-OS). Because of this I took on the project of making sure that the UI of the search functionality, which was a part of the product that was updated, is in alignment with the Fios TV streaming platforms update.
Old version of the Fios TV Search experience on Fire TV
Old version of the Fios TV Search experience on Apple TV
The Why
The ‘why’ of this project was to ensure that the Fios TV platform is aligned for users whether they are accessing the platform on Fire TV, Apple TV or the Fios TV streaming platform.
Design goals
The design goals for this project was to make sure that the UI and the functionality of the search function on Fios TV is reflected on the Fire TV platform and the Apple TV platform. Our goal was to also utilise the native UI of the respective platform a user would be on and make sure it is used in harmony with the Verizon TV UI.
Below is the current Fios TV search experience I had to align the Fire TV and Apple TV experiences to. The first screen shows the default home page, the next screen shows when a user nave right to the search button. The third shows messaging telling the user they can use voice search. The 4th shows the search now being powered by Google. I did not have to include the Google search function on FTV and ATV.
User starts on Home button
User navigates right to the Search button which expands
Search button shows messaging telling user they can also use voice search
Search functionality powered by Google when a user selects the Search button
Research
The research that I conducted for this project was based around Verizon’s FCL product. This product is apart of the Fios TV collection and was the foundation of my designs and my research. We utilised search features from FCL and incorporated them into Apple TV and Fire TV native patterns
Old FCL Search functionality
New FCL Search functionality
Solutions
For this project the aim was to align with FCL in as many ways possible, but still keep the native patterns for Fire TV and Apple TV.
For the Fire TV search functionality I:
Used the same messaging in FCL when a user lands on the Search button ‘Search movies, TV Shows and more’
Incorporated the list view on search that is used with the Google powered search on FCL
Visually displayed the user that the search bar was beneath the top level menu which they will see when they land on the Search button, prompting the user to navigate down to the search bar
Why I went with this approach was so that a user doesn't land in a search expereince just because they landed on the search button but instead makes it a 2 step process
The screens below show the user landing on the Search button, navigating down to the keyboard and then entering in ‘The’ and suggestions appearing. The user then navigates down to the first of the listed options and selects it. They are then taken to the Program Information about the content they selected.
For the Apple TV search functionality I:
Kept the keyboard design much closer to the native pattern of TV-OS for Apple TV - this was a request from Apple
Organised the rows below the search bar and keyboard into rails in a way that would be relevant to a user who wants to search for content
Introduced to TV-OS the same list view functionality as on Fire TV and the Google powered search on FCL
The screens below show the user landing on the Search button, navigating down to the keyboard and then entering in ‘Ar’ and suggestions appearing. The user then navigates down to the first of the listed options and selects it. They are then taken to the Program Information about the content they selected.
Takeaway
I learned from this project how I can fuse different UI library’s and patterns together to achieve a design that all parties involved are happy with and able to build. I was able to utilise my communication skills to appeal to all the stakeholders involved and use my design skills to solve problems that may occur visually or functionally.
I also took away knowledge that consistency doesn't mean perfectly accurate but that a product has to behave, looks similar to and functions familiarly across different platforms. Coming to a design solution for both Fire TV and Apple TV which aligned with the FCL search functionality was a great learning experience for me.
This will hide itself!