FISHFLICKS is an Australian streaming service for all things fishing, hunting, spearfishing and four wheel driving. It is a unique concept that combines the work and efforts of Australian fishing celebrities bringing them together with the object of supporting growth in the Australian Fishing Industry. FISHFLICKS aims to provide their audiences with outdoor adventures 24/7 on any device.
FISHFLICKS approached Empirical Works as they wanted to add a smart TV app to their existing product. The team from FISHFLICKS have a background in the fishing industry and not much technical capabilities so they needed to combine their knowledge with us to help improve their product.
At the time FISHFLICKS had a barebones website and an app that allowed users to sign in and stream shows. They had been testing this product for the past year and believed they had enough traction to rethink and update their product starting with a smart TV app.
As I was employed with Empirical Works so I was the only product designer on the project. I reported directly to the client FISHFLICKS and our project manager. This meant I was involved in the whole project from the strategies sessions at the start, then managing the entire UI/UX process, communicating my designs to the developers and a bit of user testing.
This project was my first time exploring the TV screen type so I had to do a lot of research into the best practises and guidelines for smart TV interaction. The client wanted me to rethink their product and gave me complete freedom to push their brand into new a new area.
This was my first smart TV project so I needed to understand the basics. My research started with the user guidelines from android TV, apple TV and Samsung TV as well as looking into some of the top TV steaming apps. This helped me understand the fundamentals and how users interacted with a TV rather than desktop or mobile. Below shows a couple of the questions I had.
“ With the screen being such a larger size then a mobile phone or desktop screen will that effect the amount of content that can fit on the screen? “
“ How do I design a product that the users interact with it using a remote? “
“ With lots of various screen sizes will that effect the final design? “
“ Are there standard ways that users expect a TV app to run? For example, should the navigation be on the bottom of the screen? “
As part of my research I looked at some of the top streaming services on smart TVs in the Australian market. I wanted to look at the structure of each app and see how they are differ from each other and how users navigate through them. Below are some of the apps I looked at.
Think about viewing distance of device screens, a mobile phone is right infront of you, a desktop or laptiop is a little bit furter away then your phone and a TV is alot further. Now put that in perspective with content. A user can handle a lot more conent on a desktop as their viewing distance is relativly small compared to the screen. A mobile phone can handle less content then a desktop as the viewing distance is a little bit shorter yet the screen is smaller too. A TV screen has a bigger screen but the viewing distance can be very large.
This means content on a TV screen needs to be limited to key content that serves a purpose. Also need to reduce large blogs of text and reading as this will be difficult for users with such a large viewing distance.
As the user can only handle a small amount of content at a time it makes sense that the design should not be confusing the user with complex nested layouts.
I will keep things simple with using horizontal and vertical axes to serve a specific function. This will help the user navigate the layout with a remote.
Even though I had complete freedom with the design of the site I wanted to keep the structure similar to the current FISHFLICKS website. Instead of changing it too much I added to the structure to make the experience better for the end user. One of the first changes to the structure was adding “series and episodes” to a show as they currently just had all the videos in a list in a show. Before I touched the computer I used pen and paper to quickly map out the new structure.
For the main navigation I decided to use the left side menu, there are 4 main sections to the app as well as the settings page that the user can scroll through from the menu. The user can see a little bit of the content within each section before entering it. As the user enters a section the side menu will close with leaving a small percentage of the menu on the left hand side to show the user that they can tap left on the remote to open the menu back up.
FISHFLICKS provided a basic style guide but they knew it was outdated and not complete. They gave me the opportunity to update the brand for the next progression of FISHFLICKS. The first thing I noticed was the brand colours were slightly dull for the digital landscape and needed some more brightness to draw the users eyes to points of the screen.
For each show there is a card image as well as a background image. The card image is the main identifier for the show and the background image re-enforces the card image. The Background image will be blured out but as the user enters the show it will become crisp when the card image is not being displayed anymore. These images should give the user a basic underdtanding of what the latest season has to offer.
As it was FISHFLICKS responsibility to create all the images on the app I created a simple guideline to help their graphic design team. The guideline alines the images to work with the TV app design and create a stronger aesthetic for the end user.
View PDF
.png)
.png)
.png)
.png)
