X-Sight Homepage
ViacomCBS, 2020
TLC Go
Exploration and Redesign
personal project, 2020
Project Overview:
As a frequent viewer of TLC's 90 Day Fiance franchise, I've become 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 TLC Go's design, I chose to focus on improving navigation and organization and exploring new features to drive a more personalized user experience.
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.
Tools: Adobe XD
PROCESS
-
Complete a thorough audit of the TLC application
-
Compare to competitor streaming applications from other media brands, outlining what each app did better or worse
-
Use an impact matrix to focus in on one specific design element that will have a large impact on the overall usability of the app, the navigation
-
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
-
Create basic wireframes
-
Consider possible next steps for refining the wireframes and UI
Goal
Effectively organize information within the TLC Go streaming application and add features to personalize the user experience.
The current navigation is inefficient and confusing. Personal favorite series, options to continue watching, watch later lists, and watch live are hidden in the menu panel on the left side.
Options to browse by category or series are 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.
Continue watching and live options are easy ways to entice users to engage with content quickly. Hiding them in a menu, among other irrelevant options isn't doing users or TLC any favors. These items in particular should be more 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.
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 inventory of content and filed them into these categories accordingly, to help organize and inform my approach to this redesign.
Solutions
Based on the results of my research, I decided on the following changes:
-
Removal of lefthand panel: All of the content fits among 3 sections: homepage, bottom navigation and profile page.
-
Personalized profile: The TLC app doesn't have a section dedicated to a user profile and preferences so I decided to implement one with the goal of creating a more personalized experience.
-
New, bottom navigation bar: Includes links to profile page, home button and the search function.
-
Search function relocation: I moved it 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 prioritized including 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, episodes recommended by TLC stars, section as an idea for engaging users with 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 quickly present the users with more options.
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. The intention is to make the user experience more personal.
Currently within the live application, these options are scattered among the links on the left side panel and it takes a too long to find them.
I also added a user icon feature, that I imagine would offer users 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.
It's more effective to put all the browsing and search options together on the same page, but as a next step, this would require working out some solutions for how the shows will populate when 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.