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.

Some of Tablo’s screens

PROBLEM/OPPORTUNITY

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:

Top 5 features at the fingertips.

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:

Settings separated by topics.

The last goal was to bring new features to improve the user experience. Below, some of them:

The new Guide screen offers a (1) quick way to search/find shows, (2) a big banner that Tablo could use for advertisement/new source of revenue, and (3) a clean way to select shows using the horizontal menu.

The Scheduled screen shows the upcoming shows to be recorded.

Knowing the user favorite shows, Tablo’s could also suggest a “You may also like” list of similar attractions.

DESIGN DECISIONS

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.

Whiteboard sketches and idea generation.

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.

Total control of recordings in just one place.

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.

A single stop to learn more about the show is available across the entire app.

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.

Innovative controls on the Play screen.

RESULTS

Although I can’t offer any results, feel free to play with the LIVE prototype below and let me know your thoughts!