X-Sight Homepage

ViacomCBS, 2020

5ed94d39fdbe2159390db397.jpg

TLC Go

Exploration and Redesign

personal project, 2020

Project Overview: 

As a frequent viewer of TLC's 90 Day Fiance franchise, I've been a frustrated user of their TLC Go application. The application feels cluttered, and difficult to navigate. Although there are many things I would like to change about this application's design, I chose to focus on the issue of navigation and organization and explored some alternatives to the current design that have the potential to improve usability.

This project is more focused on reorganization of content and therefore limited to exploration and wireframing. There's a lot of potential for it to be developed further, especially in terms of visual design and interface. 

Goal

Explore options of more effectively organizing information within the TLC Go streaming application.

PROCESS

  1. Complete a thorough audit of the TLC application 
     

  2. Compare to competitor streaming applications from other media brands, outlining what each app did better or worse.
     

  3. Use an impact matrix to select one specific design element that will have a large impact on the overall usability of the app, the navigation.
     

  4. Outline how navigation elements and links are organized within TLC Go and compare to competitors, selecting effective design trends that can be applied to TLC's UI.
     

  5. Lay out wireframes
     

  6. Consider possible next steps for refining the wireframes and UI

The current navigation is inefficient and confusing. Personal favorite series, options to continue watching, watch later lists, and watch live are all hidden in the menu panel on the left side.

Options to browse by category or series are also scattered among the application. The sections on the homepage aren't organized in a way that's visually appealing or logical, the general search function is floating in the header and the browse and "by show" options are in the collapsible menu on the left.

The continue watching and watch live options specifically are easy ways to entice users to engage with content quickly, but hiding them in a menu, sandwiched among other somewhat irrelevant options isn't doing users or TLC any favors. These items in particular should be quickly accessible to users.

The problems

Exploration

I explored different ways to organize the shows and their categories among the homepage and collapsible menu on the left. 



The solution I decided on was to add a personal profile page and a static navigation bar at the bottom of the screen. I also eventually chose to remove the panel on the left because all of the content fit among the homepage, bottom navigation and profile page.

CONTENT BREAKDOWN

In this part of the process, I broke down the types of categories of content and links that needed to be accounted for:
 

  • Personal, user profile specific

  • Promotional categories

  • Settings

  • Search functions


I then took my list of items and filed them into these categories.accordingly. Based on that, I decided on the following changes.

The TLC app doesn't have a section dedicated to a user profile and preferences so I decided to implement one. I added it to a new, bottom navigation bar that also includes a home button and the search function. I relocated the search function from the top right part of the page to the bottom right so that it remains somewhat intuitive to the users who are used to finding it on the right.

 



 

Homepage

On the homepage, I made it a priority to include the watch live option on top (it is only available on the left panel currently), followed by new episodes. I used a couple of the sections currently available in the app as placeholders but added a TLC Star Recommendation section as an idea for engaging new content. At the bottom, I organized the affiliated channel logos differently. Currently in the app, about 20 icons are listed horizontally and accessible by scrolling, but that's a long way to scroll so I made it into 2 rows to cut down on scrolling and present the users with more options quicker.

USER PROFILE PAGE

I added a User Profile page, accessible from the new bottom navigation bar, as a place for all the personal recommendations and settings to live.

Currently within the live application, they're scattered among the links on the left side panel and it takes a little too long to find them.

I also added a user icon feature, that I imagine would offer you the option to change it on a click.

SEARCH PAGE

On the live app, the options for browsing are available on the left side panel navigation and there is a separate search function at the top of the screen.

I thought it would be more effective to put all the browsing and search options together on the same page, but as next step, this would require working out some solutions for how the shows will populate if a user uses the search bar on top. The A-Z tab would be formatted a little bit differently from the page layout here to accommodate the alphabet vertically down the side of the frame.

  • Dribbble
  • Github
  • freeCodeCamp

© 2020 by Carly Susman

Contact me!