(2022-2023)

JeLLO — Admin panel & Analytics

About the project (problem & solution)

01

Jello is a video platform with social features. My task was to create a dashboard for content management in a mobile app since they had a problem with it, everything was done with the code which took just a colossal amount of time.

This approach wasted the company's money and time, and also created chaos. In order to solve this problem, it was decided to create a management system through which content will be filled. The first stumbling block was the fact that everyone understood what result we wanted to get, but did not understand how to achieve it, so the first step in my design process was to sort and organize the available information.

The dashboard empowers the content manager with various capabilities, such as adding and filtering videos, adjusting the visibility of videos, and facilitating other actions

Main screen for managing the content

Mobile application screen that we moderate

A unified understanding of the future dashboard has greatly increased the productivity of the team.

To structure all the data, I spent two weeks interviewing stakeholders, developers and other designers, gathering information about how all the processes currently work and how they should be improved.

I found the problem that all the team members called the same items differently, which led to misunderstandings. So I immediately created a vocabulary in Google Docs that everyone had to use to call all elements correctly. Then I built a map of the Admin Panel with a detailed description of all the elements on each screen.

This helped us a lot in moving the project forward, and after several meetings and discussions we approved this structure for the MVP version.

Dashboard map

Design process in this project

Target audience of the dashboard

Users (target audience)

02

This dashboard has 3 versions for 3 different groups: content managers & stakeholders, advertisers and content creators.

Managers and stakeholders have the full version, in which full application management and analytics on all actions are available. Advertisers have no control panel and have analytics only related to their ads and revenues from them. Content creators have a separate version of controlling videos that were created by them.

In this case study, we'll only look at the manager and stakeholder version, because it shows all functional.

Competitors research

03

When we clearly understood what we created, it was time to analyze the competitor’s products in this area. The main one was Youtube.

I collected screenshots of all the internal dashboards of popular video platforms and began to analyze what each of them has cool and innovative, in order to take into account all these nuances and make our product even better.

In addition, I checked the reviews of all the competitors on platforms like Google Play Market and App Store to see what users thought of their product. I conducted a few interviews with users to get their feedback.

Sketches and wireframes

04

Dashboard designs are nearly impossible to create without preliminary sketches or wireframes that show the overall look of the page without too much visual detail.

I've done many options of all screens in my notebook, but I'll show you only a few pictures of the final result that I got.

In this project, speed of design creation was important and I had constant access to stakeholders, so I focused more on low-fi sketches in notepad rather than detailed wireframes in Figma. This approach allowed me to create and approve ideas faster.

Video Topics table wireframe

Channel modal wireframe

Admin panel design screens

05

The design inherits the style of the mobile app, but had distinctive features to ensure that the dashboard was not garish and remained easy to use.

In total, more than 250 dashboard screens were designed and developed, taking into account all possible states of all existing elements.

Video topic quick modal

Full-screen modal

Channel quick modal

Add channel image

Channel content editing

Confirmation modal

Add channel image

The entire design is based on two main KPIs, which are speed and full accessibility.

So we can see many modal windows that allow you to edit and save content without opening new pages. This approach has helped speed up content management by about 25%.

Content managing screen

Changing the topic style

Social - interactions analytics

Features - profile analytics

Users & Onboarding - users analytics

Content - all videos table

Social - communication analytics

Analytics design screens

06

The analytics screens are made to monitor all the data that users perform in the application.

For this purpose, many components of various charts have been developed to display statistical information. The main task was to show a lot of complex information in a simple way, our goal was to move away from busy, too detailed interfaces towards simplification and separation of content into different groups and tabs.

Tests and results

07

After the release of the first version, the tests showed excellent results. The time to add new videos to the platform has decreased by more than 3 times.

Before I sent the design into development, I created clickable prototypes to test the usability of the interface. There were a total of 2 iterations of testing, during which I slightly improved the interface and looked at the results. The finished product showed us new places that will speed up and improve interaction. For example, during the analysis, I noticed that the ability to copy images from Google and paste them into channel avatar speeded up the work by almost 30%.

As a result, this dashboard accelerated the work on adding and analyzing app content and helped direct the developer's efforts to work on new features for the application.

Testing cycle

(2022-2023)

JeLLO —
Admin panel & Analytics

About the project (problem & solution)

01

Jello is a video platform with social features. My task was to create a dashboard for content management in a mobile app since they had a problem with it, everything was done with the code which took just a colossal amount of time.

This approach wasted the company's money and time, and also created chaos. In order to solve this problem, it was decided to create a management system through which content will be filled. The first stumbling block was the fact that everyone understood what result we wanted to get, but did not understand how to achieve it, so the first step in my design process was to sort and organize the available information.

To structure all the data, I spent two weeks interviewing stakeholders, developers and other designers, gathering information about how all the processes currently work and how they should be improved.

I found the problem that all the team members called the same items differently, which led to misunderstandings. So I immediately created a vocabulary in Google Docs that everyone had to use to call all elements correctly. Then I built a map of the Admin Panel with a detailed description of all the elements on each screen.

This helped us a lot in moving the project forward, and after several meetings and discussions we approved this structure for the MVP version.

Dashboard map

Design process in this project

The dashboard empowers the content manager with various capabilities, such as adding and filtering videos, adjusting the visibility of videos, and facilitating other actions

A unified understanding of the future dashboard has greatly increased the productivity of the team.

Mobile application screen that we moderate

Main screen for managing the content

Users (target audience)

02

This dashboard has 3 versions for 3 different groups: content managers & stakeholders, advertisers and content creators.

Managers and stakeholders have the full version, in which full application management and analytics on all actions are available. Advertisers have no control panel and have analytics only related to their ads and revenues from them. Content creators have a separate version of controlling videos that were created by them.

Target audience of the dashboard

In this case study, we'll only look at the manager and stakeholder version, because it shows all functional.

Competitors research

03

When we had a clear understanding of what we create, it was time to analyze the competitor’s products in this area. The main one was Youtube.

I collected screenshots of all the internal dashboards of popular video platforms and began to analyze what each of them has cool and innovative, in order to take into account all these nuances and make our product even better.

In addition, I checked the reviews of all the competitors on platforms like Google Play Market and App Store to see what users thought of their product. I conducted a few interviews with users to get their feedback.

Sketches and wireframes

04

Dashboard designs are nearly impossible to create without preliminary sketches or wireframes that show the overall look of the page without too much visual detail.

In this project, speed of design creation was important and I had constant access to stakeholders, so I focused more on low-fi sketches in notepad rather than detailed wireframes in Figma. This approach allowed me to create and approve ideas faster.

I've done many options of all screens in my notebook, but I'll show you only a few pictures of the final result that I got.

Channel modal wireframe

Video Topics table wireframe

Admin panel design screens

05

The design inherits the style of the mobile app, but had distinctive features to ensure that the dashboard was not garish and remained easy to use.

So we can see many modal windows that allow you to edit and save content without opening new pages. This approach has helped speed up content management by about 25%.

Content managing screen

Content managing screen

In total, more than 250 dashboard screens were designed and developed, taking into account all possible states of all existing elements.

The entire design is based on two main KPIs, which are speed and full accessibility.

Channel quick modal

Add channel image

Channel content editing

Confirmation modal

Full-screen modal

Video topic quick modal

Add channel image

Analytics design screens

06

The analytics screens are made to monitor all the data that users perform in the application.

For this purpose, many components of various charts have been developed to display statistical information. The main task was to show a lot of complex information in a simple way, our goal was to move away from busy, too detailed interfaces towards simplification and separation of content into different groups and tabs.

Social - interactions analytics

Users & Onboarding - users analytics

Features - profile analytics

Content - all videos table

Social - communication analytics

Tests and results

07

After the release of the first version, the tests showed excellent results. The time to add new videos to the platform has decreased by more than 3 times.

Before I sent the design into development, I created clickable prototypes to test the usability of the interface. There were a total of 2 iterations of testing, during which I slightly improved the interface and looked at the results. The finished product showed us new places that will speed up and improve interaction. For example, during the analysis I noticed that the ability to copy images from Google and paste into channel avatar speeded up the work by almost 30%.

As a result, this dashboard accelerated the work on adding and analyzing app content and helped direct the developer's efforts to work on new features for the application.

Testing cycle

(2022-2023)

JeLLO —
Admin panel & Analytics

About the project (problem & solution)

01

Jello is a video platform with social features. My task was to create a dashboard for content management in a mobile app since they had a problem with it, everything was done with the code which took just a colossal amount of time.

This approach wasted the company's money and time, and also created chaos. In order to solve this problem, it was decided to create a management system through which content will be filled. The first stumbling block was the fact that everyone understood what result we wanted to get, but did not understand how to achieve it, so the first step in my design process was to sort and organize the available information.

The dashboard empowers the content manager with various capabilities, such as adding and filtering videos, adjusting the visibility of videos, and facilitating other actions

A table for managing the content

Mobile application screen that we moderate

To structure all the data, I spent two weeks interviewing stakeholders, developers and other designers, gathering information about how all the processes currently work and how they should be improved.

A unified understanding of the future dashboard has greatly increased the productivity of the team.

I found the problem that all the team members called the same items differently, which led to misunderstandings. So I immediately created a vocabulary in Google Docs that everyone had to use to call all elements correctly. Then I built a map of the Admin Panel with a detailed description of all the elements on each screen.

This helped us a lot in moving the project forward, and after several meetings and discussions we approved this structure for the MVP version.

Dashboard map

Design process in this project

Users (target audience)

02

This dashboard has 3 versions for 3 different groups: content managers & stakeholders, advertisers and content creators.

Managers and stakeholders have the full version, in which full application management and analytics on all actions are available. Advertisers have no control panel and have analytics only related to their ads and revenues from them. Content creators have a separate version of controlling videos that were created by them.

In this case study, we'll only look at the manager and stakeholder version, because it shows all functional.

Target audience of the dashboard

Competitors research

03

When we had a clear understanding of what we create, it was time to analyze the competitor’s products in this area. The main one was Youtube.

I collected screenshots of all the internal dashboards of popular video platforms and began to analyze what each of them has cool and innovative, in order to take into account all these nuances and make our product even better.

In addition, I checked the reviews of all the competitors on platforms like Google Play Market and App Store to see what users thought of their product. I conducted a few interviews with users to get their feedback.

Sketches and wireframes

04

Dashboard designs are nearly impossible to create without preliminary sketches or wireframes that show the overall look of the page without too much visual detail.

In this project, speed of design creation was important and I had constant access to stakeholders, so I focused more on low-fi sketches in notepad rather than detailed wireframes in Figma. This approach allowed me to create and approve ideas faster.

I've done many options of all screens in my notebook, but I'll show you only a few pictures of the final result that I got.

Video Topics table wireframe

Channel modal wireframe

Admin panel design screens

05

The design inherits the style of the mobile app, but had distinctive features to ensure that the dashboard was not garish and remained easy to use.

So we can see many modal windows that allow you to edit and save content without opening new pages. This approach has helped speed up content management by about 25%.

In total, more than 250 dashboard screens were designed and developed, taking into account all possible states of all existing elements.

The entire design is based on two main KPIs, which are speed and full accessibility.

Content managing screen

Changing the topic style

Video topic quick modal

Changing the topic style

Channel quick modal

Channel content editing

Full-screen modal

Add channel image

Add channel image

Confirmation modal

Analytics design screens

06

The analytics screens are made to monitor all the data that users perform in the application.

For this purpose, many components of various charts have been developed to display statistical information. The main task was to show a lot of complex information in a simple way, our goal was to move away from busy, too detailed interfaces towards simplification and separation of content into different groups and tabs.

Social - interactions analytics

Social - communication analytics

Users & Onboarding - users analytics

Content - all videos table

Features - profile analytics

Tests and results

07

After the release of the first version, the tests showed excellent results. The time to add new videos to the platform has decreased by more than 3 times.

Before I sent the design into development, I created clickable prototypes to test the usability of the interface. There were a total of 2 iterations of testing, during which I slightly improved the interface and looked at the results. The finished product showed us new places that will speed up and improve interaction. For example, during the analysis I noticed that the ability to copy images from Google and paste into channel avatar speeded up the work by almost 30%.

As a result, this dashboard accelerated the work on adding and analyzing app content and helped direct the developer's efforts to work on new features for the application.

Testing cycle

(2022-2023)

JeLLO —
Admin panel & Analytics

About the project (problem & solution)

01

Jello is a video platform with social features. My task was to create a dashboard for content management in a mobile app since they had a problem with it, everything was done with the code which took just a colossal amount of time.

A unified understanding of the future dashboard has greatly increased the productivity of the team.

To structure all the data, I spent two weeks interviewing stakeholders, developers and other designers, gathering information about how all the processes currently work and how they should be improved.

I found the problem that all the team members called the same items differently, which led to misunderstandings. So I immediately created a vocabulary in Google Docs that everyone had to use to call all elements correctly. Then I built a map of the Admin Panel with a detailed description of all the elements on each screen.

This helped us a lot in moving the project forward, and after several meetings and discussions we approved this structure for the MVP version.

The dashboard empowers the content manager with various capabilities, such as adding and filtering videos, adjusting the visibility of videos, and facilitating other actions

This approach wasted the company's money and time, and also created chaos. In order to solve this problem, it was decided to create a management system through which content will be filled. The first stumbling block was the fact that everyone understood what result we wanted to get, but did not understand how to achieve it, so the first step in my design process was to sort and organize the available information.

A table for managing the content

Mobile application screen that we moderate

Dashboard map

Design process in this project

Users (target audience)

02

This dashboard has 3 versions for 3 different groups: content managers & stakeholders, advertisers and content creators.

In this case study, we'll only look at the manager and stakeholder version, because it shows all functional.

Managers and stakeholders have the full version, in which full application management and analytics on all actions are available. Advertisers have no control panel and have analytics only related to their ads and revenues from them. Content creators have a separate version of controlling videos that were created by them.

Target audience of the dashboard

Competitors research

03

When we had a clear understanding of what we create, it was time to analyze the competitor’s products in this area. The main one was Youtube.

I collected screenshots of all the internal dashboards of popular video platforms and began to analyze what each of them has cool and innovative, in order to take into account all these nuances and make our product even better.

In addition, I checked the reviews of all the competitors on platforms like Google Play Market and App Store to see what users thought of their product. I conducted a few interviews with users to get their feedback.

Sketches and wireframes

04

Dashboard designs are nearly impossible to create without preliminary sketches or wireframes that show the overall look of the page without too much visual detail.

I've done many options of all screens in my notebook, but I'll show you only a few pictures of the final result that I got.

In this project, speed of design creation was important and I had constant access to stakeholders, so I focused more on low-fi sketches in notepad rather than detailed wireframes in Figma. This approach allowed me to create and approve ideas faster.

Video Topics table wireframe

Channel modal wireframe

Admin panel design screens

05

The design inherits the style of the mobile app, but had distinctive features to ensure that the dashboard was not garish and remained easy to use.

The entire design is based on two main KPIs, which are speed and full accessibility.

In total, more than 250 dashboard screens were designed and developed, taking into account all possible states of all existing elements.

So we can see many modal windows that allow you to edit and save content without opening new pages. This approach has helped speed up content management by about 25%.

Content managing screen

Video topic quick modal

Channel quick modal

Full-screen modal

Changing the topic style

Changing the topic style

Add channel image

Confirmation modal

Channel content editing

Analytics design screens

06

The analytics screens are made to monitor all the data that users perform in the application.

For this purpose, many components of various charts have been developed to display statistical information. The main task was to show a lot of complex information in a simple way, our goal was to move away from busy, too detailed interfaces towards simplification and separation of content into different groups and tabs.

Social - interactions analytics

Social - communication analytics

Users & Onboarding - users analytics

Content - all videos table

Features - profile analytics

Tests and results

07

After the release of the first version, the tests showed excellent results. The time to add new videos to the platform has decreased by more than 3 times.

Before I sent the design into development, I created clickable prototypes to test the usability of the interface. There were a total of 2 iterations of testing, during which I slightly improved the interface and looked at the results. The finished product showed us new places that will speed up and improve interaction. For example, during the analysis I noticed that the ability to copy images from Google and paste into channel avatar speeded up the work by almost 30%.

As a result, this dashboard accelerated the work on adding and analyzing app content and helped direct the developer's efforts to work on new features for the application.

Testing cycle