Tubalytics A platform for a YouTube analytics service

team
3
screens
76
collaboration
2017—2018
platforms
Web

Challenge

A startup team approached us to help them launch the Tubalytics project.

Tubalytics is a digital service that facilitates launching ad campaigns on YouTube; it finds the best channels to collaborate with, helps to analyze their activity and popularity, get in touch with the channel owners through the CRM system, and then set up and monitor the launch of the campaign.

The service’s target audience is media managers, marketers, and media buyers.

Our task was to develop the interface prototype and a design concept. Our client wanted the interface to be intuitive, and the design—minimalistic, so as not to confuse users with a multitude of user interface (UI) elements.

Image №1 - Tubalytics

Four steps to solve the challenge

01
Our business analysts studied the client’s technical specifications, compiled the profiles of each target audience segment, and identified their pain points.
Image №2 - Tubalytics
Image №3 - Tubalytics Image №4 - Tubalytics
02
Our UX/UI team took on the interface logic: current user needs, necessary functions, their position on the screen, and operating logic. We developed the interface prototype to model and test user experience (UX) in the system.
03
The client approved a flat design concept. The result came out laconic and uncluttered, easy for users to navigate without getting bogged down with tons of UI elements.
Image №5 - Tubalytics
04
Our design team prepared designs for all pages and states, and assembled a UI kit, a library of the UI elements that they used.
Image №6 - Tubalytics

User path in the system

Onboarding dashboard

Having a specific task in their mind, a user logs into an unfamiliar system and tries to find the way how to complete this task.

To streamline this process, we added a dashboard that would introduce users to the service functionality. The dashboard tells the user what tasks the service can help with, and shows the location of necessary tools.

Image №7 - Tubalytics
Image №8 - Tubalytics

User help for beginners

We created hints for users who enter the dashboard section for the first time. These hints tell users where to find the service’s main functionalities, and how they work.

Two-level navigation

We split navigation into two autonomous panels that will guide users across the sections and subsections of the service.

While working on design, we decided to not add the drop-down menu, as it would distract users from working in the system.

The main panel always remains in sight.

Image №9 - Tubalytics

The sub panel appears when the user switches to one of the main sections of the system.

Four types of data visualization

The Tubalytics system stores information about 100,000 YouTube channels in an easy-to-navigate format. In order not to burden the marketer with the same type of elements, we offered several data visualization options and suggested an optimal format for each task.

Tables to structure massive data

We put the channel data in tables and made an option for adding them to «Favorites» to compare just in one click.

Image №10 - Tubalytics
Image №11 - Tubalytics Image №12 - Tubalytics

To declutter the table and make it more readable, we replaced bulky data with icons:

Star icons show the popularity of the channel.

Audience activity is indicated with marker letters.

The badges «Influencer», «Growing Star» or «Soon to Be» indicate the channel status.

Clickable covers show ongoing ad campaigns and play campaign videos in a pop-up window.

Tags mark the channel genre.

Image №13 - Tubalytics Image №14 - Tubalytics Image №15 - Tubalytics
Image №16 - Tubalytics

Users can get more detailed channel statistics right in the table. A hover over the «Chart» column opens a pop-up window that shows the channel dynamics over the past months.

Image №30 - Tubalytics

Infographics to help analyze data

We used infographics and accent colors to show the positive or negative channel dynamics.
Such visualization helps the marketer to assess the prospects of the channel in just a few seconds.

Image №18 - Tubalytics
Image №19 - Tubalytics

Tag cloud with popular trends

A clickable word cloud shows tags that are popular among viewers.

A marketer can pinpoint the trending videos, choose any category, and view ad creatives.

Charts with dynamic data visualization

These charts visualize tabular data and display the overall dynamics throughout different time periods.

A marketer can hover the cursor over the peak points of the chart to see the accurate figures.

Image №20 - Tubalytics

Adjusting to user tasks

We found out what criteria marketers used to select channels and created special filters for channel selection based on their preferences.

We divided the filters into two groups by the frequency of use. Popular filters are always in sight, and the lesser used ones are hidden to leave more space for viewing the data.

Image №21 - Tubalytics

Converting users to paying subscribers

Our clients wanted us to find a solution that would motivate the users to sign up for a paid subscription.

Depending on the subscription plan, the Tubalytics system offers three levels of access. For example, the Tubalytics filters, menu sections, table columns, and graphs are not available with the free access.

Image №22 - Tubalytics

We suggested displaying the unavailable items in the interface instead of just hiding them. This way, the user will see the blurred functions, but will not be able to use them without subscribing. This approach will prompt them to buy a plan to enjoy the unlimited access to all the functionalities of the system.

Admin panel with change control

We designed the admin panel in the same style as the user interface.

Image №23 - Tubalytics

Pop-up windows ask to confirm the changes in the system in order to avoid errors during monotonous work.

Image №24 - Tubalytics

Landing pages

We designed three landing pages to find the one that will result in the most conversions.

Image №25 - Tubalytics Image №26 - Tubalytics Image №27 - Tubalytics

Here, we tell marketers how Tubalytics can be useful in their work.

Image №28 - Tubalytics

This section shows the key functionalities of the service.

Image №29 - Tubalytics

And here, we offer to get a subscription or try a free version.

Image №31 - Tubalytics
In 3 months, we came up with the interface prototype and design. We handed the project over to the client’s in-house team and stayed in touch to provide further support in their development process.
team
3
screens
76
collaboration
2017—2018
result