X-Sight Homepage

ViacomCBS, 2020

bsfit-header-3.png

Brand Show Fit

ViacomCBS, 2020

Project Overview: 

The Brand Show Fit application was designed to allow users to compare metrics between shows and brands to see how well each TV show fits into the viewer's impression of the brand as a whole.

The application includes 3 sections, each with a different method of visualizing the data- Graphs and Charts, Score Ranking and Heatmap, which are outlined below.

Goal

Design 3 data visualization options within the Brand Show Fit application that display the data effectively and allow the users to navigate among them easily.

USER FLOW

The user flow in the Brand Currencies application is fairly straightforward as users first arrive at the page with the radar charts for an overview and then can freely click among the visualization options listed in the navigation at the top of the page.

The application initially loads with default filters selected. To ensure that the default filters are no mystery, selected filters are highlighted in a blue box above the visualization. The blue box is automated to update as the users adjust the filters.

Users are already familiar with the menu on the lefthand side so it was a simple solution for containing all of the settings, keeping them accessible but away from cluttering the visualizations on the main section of the page. The different visualization pages within the application require their own respective filter options so as users navigate among the pages, the filters available in the lefthand menu adjust as necessary.

Because not every visualization within the application allows the user to select from the same set of filters, the available filters vary per page. While the enabled filters are applied globally and carry over from one page to another, the filters that aren't immediately relevant to the loaded visualization disappear from the panel on the left. That way, the only options that are presented are ones that are immediately relevant to the user.

Filters

This visualization option is single page that breaks down each metric within the selected brand and show. It also includes a comprehensive factor score to quantify how well the show and brand fit together overall.

Graphs and charts

Each metric has its own card containing an appropriate icon, number reflecting how well the brand and show overlap, and a visual. We decided to use blue and purple to represent the brand and show because the colors are neutral, unlike red, green, orange, yellow which usually indicate positive or negative feelings.

The Score Ranking pages give the option to rank the best fit shows within a brand or vice versa. The page that ranks shows within a brand allows the user to toggle the option of limiting the list exclusively to shows within the brand in case they want a wider perspective.

Score

ranking

The page that ranks the compatibility of shows to a single brand allows the user to toggle the option of limiting the list exclusively to shows within the specific brand or including shows from all brands in case they want a wider perspective.

 

This option is not located with the rest of the filters because it's exclusive to this page.

This visualization option displays a heatmap of the metrics on the Y axis compared to either shows or brands of the user's choosing on the X axis in a similar manner to the score ranking visual.

 

The feature allows the users to see the details of which metrics fit best across several variables (shows or brands). Using traditional heatmap colors in red, yellow and orange denote a positive or negative feeling, so I designed this heatmap in shades of blue to reflect how high or low the number was without implying positive or negative feelings either way.

Heatmap

The heatmap additionally offers the option to dive a little deeper and view the breakdown of all the need states within each of the comprehensive metrics.

Here is the breakdown of the "Warm and Cozy" category.

challenges

One of the biggest difficulties with this product was with the navigation and its language. This application is essentially 3 visualizations but 2 of the 3 visualizations have 2 parts within them. It was most logical to nest the 2 options within one overhead category as a dropdown menu.

I wanted the users to know exactly what they would get when clicking a link in the navigation, but when we had one data visualization and 2 ways to display it, the language got a little complicated. My product team was small, just me and 2 developers, so we often had to be scrappy. Because we didn't have a UX writer, my team worked together with the data scientists to find a solution.

We settled on the following:

Heatmap- Only Shows, Only Brands

Score Ranking- By Show, By Brand

And titling the Score Ranking Page "Show-to-Brands Ranker" and "Brand to Shows" ranker.

While we ultimately found a solution, I'm not sure that it was the best one. A better language choice could make the navigation design more effective.

  • Dribbble
  • Github
  • freeCodeCamp

© 2020 by Carly Susman

Contact me!