THIS IS AN EXERCISE ONLY – I HAVE NO RELATIONSHIP WITH TABLO
ABOUT THE PROJECT
Since 2017 I am a “cord cutter”, meaning someone who does not pay for cable TV anymore, pretty much using only online services like Netflix, Hulu and Sling. However, as I love to watch my favorite shows live, or recording them to watch later in the same night, I became a fan of Tablo’s DVR device. Tablo has apps for several devices, including Android, iOS, Roku, Amazon Fire TV, Apple TV, just to name a few.
In this exercise, I decided to re-design Tablo’s iOS app, as I believe the current one (see below) could improve the user experience, offering some services not currently available, also, reducing the steps to some of its features.
As mentioned above, navigation in the app is based on web experience, with a menu drawer (aka hamburger menu) in the top left. Having a navigation like that increases the number of clicks to access a different screen. For example, being on the Recordings part will require to click the menu icon, then click the Live TV icon to watch live shows. So, the first opportunity to address is navigation, which I did with the use of a bottom bar with 5 icons categorizing the top used functions for the users:
The second challenge was to address the massive amount of options in the Settings screen. In the actual app, you have to scroll vertically several times to work on many different options. In my proposal, the new screen has topics classified based on their proximity. Instead of browsing for topics in just a long page, the horizontal menu (which will be seen across the entire app), simply select the category you want to work. In the example below, the user is setting her device, in the “My Tablo” section:
The last goal was to bring new features to improve the user experience. Below, some of them:
After working on ideas in a whiteboard, I decided to work with a simple color palette, mostly with dark grays (after all the content is the “main actor” in the application) for backgrounds, plus Tablo’s icon colors light blue for main buttons, and orange for highlights.
I decided to spend some time on the Recordings screen because I believe this is one of the most used areas in the app. Now, users are able to learn more about each show, visually remember when they stopped it (see the circular blue line in the play button and the blue line in the dividers? They represent the percentage of how much the show has been watched), and even delete, protect or mark it watched without having to enter in another screen.
Also, the same experience is presented when the user wants to learn more about a show, from the Recordings, Schedule or Guide options. The redesigned “About the Show” screen has a better visual (similar to the nice Hulu app) appeal, showing information about the program, the cast, quick access to record the show, plus lists the upcoming episodes.
Lastly, I have tried something different in the player screen, offering vertical volume control in the right side of the screen, which seems much easier to access with the right thumb, than the common controls in the top of the screen. I also offered a “Record” button in the top right area.
Although I can’t offer any results, feel free to play with the LIVE prototype below and let me know your thoughts!