top of page

X-Sight Homepage

ViacomCBS, 2020

Chrome-Browser-Mockup-Free.png

X-Sight Homepage

ViacomCBS, 2020

Project Overview: 

When the X-Sight product was launched, the Content Innovation Analytics team didn't anticipate its growth. As the product continued to grow in the 2 years since launch, some of the original designs were unable to keep up. This was especially apparent on the homepage which poses a big issue because it's the first page the users see when loading X-Sight.

Goal

Redesign the X-Sight homepage to scale exponentially along with the product.

PROCESS

  1. Complete a thorough audit of the old homepage
     

  2. Outline goals and priorities according to the audit results, present them to manager for approval before beginning the design process
     

  3. Upon approval, explore different directions of how to resolve the most pressing issue of scalability. This was remedied by organizing the applications by sections stacked horizontally instead of in vertical columns
     

  4. Continue to explore different methods of adding visual interest through updates to the header and background. At this stage I went through several iterations of visual design, considering how these options would scale too and worked through options for how to navigate among the page's categories instead of scrolling. I also coded a small user interaction in order to more clearly demonstrate my ideas to my team.
     

  5. Present the options to SVP and VP team for feedback and approval before entering development stage

old.png

  • Page is far too long both vertically and horizontally
     

  • Design isn't scalable to accommodate additional categories or apps and isn't responsive in a way that's visually effective
     

  • Lack of design hierarchy overwhelms the users
     

  • Due to page length, icons for each category extend below the fold, making navigation difficult
     

  • White on white column/app icon UI lacks contrast and visual interest.

The problems

Exploration

I explored different ways to display the headers and navigation. 

​

It was important for the navigation to accommodate more links as the platform grows and that it remains accessible at all points in the page. For those reasons, we ultimately decided to float it on the left instead of on the top as the amount of space on top of the page is limited.

nav-options.png

Here are a few of the rejected heading and section designs from my exploration process.

Each set of applications has a designated color. For example, the Brand Insights apps are pink. Previously there was nothing to distinguish the sections besides the icons themselves so I decided to use the colors to further define each section.

design-exploration.png
Homepage assets.png

Page ASSETS

New headers, application icons and background inspired by the X-Sight design system

landing-final.png

As part of my process shown above, I explored different ways to resolve the shortcomings of the older design. I ultimately arrived at the below design with the following changes:

​

  • Added navigation that allows a menu to be accessible from any part of the page and leaves room to grow with the product
     

  • Coded a interaction to add some motion to the page when users hover over navigation links
     

  • Reworked the page organization, app icons and headers so the page feels less crowded and it's easier for users to find what they need need among sections
     

  • Added a geometric background that plays off of the X-Sight logo and design system, to bring some color and visual interest to the page without creating distraction

The solutions

home-final-transparent.png
bottom of page