In this article, I’m going to talk about my learnings about designing a complex dashboard.

I was one of the initial product designers to join Unacademy and help the company grow to a massive scale in a span of 1.5 years while I was there.

I’ve worked on a lot of projects and a wide variety of projects. A few small ones, a few big ones, and a few massive ones. In this case study, I am going to talk about one of my massive projects which also happens to be one of my favorite ones. I was the sole designer who owned this project and worked on it from start to finish.

About the company

Unacademy is an online learning platform where students in India can study for various competitive exams such as UPSE, IIT JEE, NEET, Banking, CA, and more.

The company hires educators who teach the classes LIVE and students can watch them at their own convenience. Students have to pay a subscription fee to access all the content the platform offers. Similar to Skillshare and Netflix.

The Internal Educator Dashboard

As the company grew, the number of educators and students on the platform grew as well. Each educator had a time table to follow, courses to create and manage. Now, the company did have an internal portal to manage this. But it was completely outdated and not great in terms of functionality. I mean, you know how internal tools are right 😛

Hence, we decided to revamp the entire portal from the ground up. We had also introduced a new design language for the entire platform called Whiteboard. It made sense to give the portal a visual upgrade as well.

I’d love to show you my Figma file but I am not allowed to do that 🙈

So let’s get started 🚀

Page Structure

So the product manager provided me with the requirements of the various pages that the portal should have and any new additions. Here is how the page structure looked.

Statistics Dashboard

The first thing on the list was to create a new statistics dashboard that would give insights about the performance of the educator’s courses for the educator. This dashboard did not exist earlier.

Right at the beginning, I knew how I wanted the dashboard to look. Big blocks of content, large texts, and an appropriate amount of color. The design was quite simple and did not need a lot of iterations. Identifying what content to show was the tricky part.

So let’s break this down one by one.

• On the left, we have 6 tabs that take us to the various pages of the portal.
• Each educator is given a target of teaching minutes that they have to meet. This can be either on YouTube or Live classes (Free and paid for students) on the platform. For an educator, this is the most important information as the revenue and incentive they earn, depends on achieving these targets. Educators would want to know the progress of their teaching minutes.

• Next, we have a general overview section that has the top 5 metrics that an educator often is keeping track of. And these have been ordered based on the metric’s importance rank.
• Included a filter since the information can be viewed for a week, month, or lifetime.

Let’s look at one of these cards a little deeper.

I wanted the card to be as valuable and informative as possible. It should help the educator make any decision he needs to just by looking at this card.

• Every card has a different icon for quick recall of the metric. He does not have to read the text to identify what the metric is.
• The metric shows a breakup of various sources contributing to the overall number.
• Information such as percentage increase/decrease lets the educator know if there is an improvement or not.

Next, we have a few general statistics and metrics. These were very direct and to the point. Nothing much to talk about them.

But one thing to note is that this page has 2 filters. The reason is that for this set of metrics there was only monthly and lifetime data. And not weekly data like the core metrics.

So two filters for a single page? That’s weird!

It does sound weird but does not feel weird on a functionality level.

How so?

Because all the iterations I tried to fix this problem make the UX feel even weirder. Haha.

Here are a few of the concepts I came up with to solve this problem.

Solution 1

Since the second set of metrics did not have weekly data, I de-emphasized it and added an informative text do tell the user that only monthly and lifetime data was available.

But this felt quite robotic and complicated. It involved a lot of clicks.

Solution 2

The next solution was to combine the two sets of metrics when the filter was changed to Monthly or Lifetime. But would split when changed to weekly.

This meant the UI would jump around and the user would not know why the UI was jumping. It would confuse the user.

Solution 3

Another solution was to automatically change both the filters to be the same if the user selected Monthly or Lifetime.

This would mean that the user has no control over the UI and that’s never a good UX.

The Final Solution

So the optimal solution which is usually the simplest one was to make the core metrics change based on its own filter. And the other metrics would change based on its own filter. That way,

• The user would have complete control over the UI.
• Nothing would be jumping around.
• And no unnecessary clicks.

Dashboard Banners

The dashboard was already informative. But I went a step further. Dashboards are also used for proving the most relevant and timely information.

So I created Dynamic Banners.

The plug and play banners were perfect for educators. Informing the user of key improvements, alerts, or anything that needed to grab their attention could be done using these banners.

Quick shoutout to Deepti Pareek who worked on the Illustrations.

Anyway, now let’s move on to the next page.

My Schedule

This is the educator’s timetable. It shows all the classes the educator has to take the present day, week, and the upcoming month. Quite simple.

The structure is very simple and straight forward. It has a calendar on the right and the list of lessons scheduled on the left.

Each of these cards is individual lessons of a course. But there are also individual single classes that are not a part of any course. They are called Free Live Classes. These are available for free to watch even if you don’t have a subscription. Since the most important information to the educator was the time he has to take the lesson, I put that out right in front ensuring good information architecture.

I had to design a lot of states for each card. Here they are.

Courses/Test Series Page

The next page on the list was the list of courses and test series that the educator taught. A course is a group of lessons. A test series is a group of tests.

I am going to be showing the design only for the courses page as the design for the test series remains the same.

This page basically contains all the courses of the educator. And again, there are multiple states here.

There is a big CTA right on top for the user to quickly jump into a course creation flow if needed.

With regard to the order of showing these course cards,

• I decided to show the draft courses first to encourage the user to go and complete the course creation.
• Next is a course that has a lesson that the educator has to teach live.
• Then a course that has started but a lesson from that course is scheduled later in the week.
• Then a course that is upcoming. Which means that the first lesson of that course is yet to start.
• And finally, in the end, I show completed courses.

And here are all the course cards in their wonderful glory.

Course/Test Series Details Page

The next page was the details page of the course or test series. This page contains all the lessons/tests and a few statistics to show the performance of the course/test series.

Let’s take a look.

So we start off with a few basic details of the course. Nothing too fancy. Just regular things.

Then we have a few stats such as hours taught in that course, watch minutes of the students, and the course rating. Simple right?

If we scroll down we get to see all the lessons of that course. As you can see, there are completed and upcoming lessons.

Each completed lesson has a few stats that share the performance of that lesson. The 5th one is an online test. Hence we decided to show the number of students who took up the test online. Simple things here as well.

There is another card state, where we show the educator a card of his next class that is going to start in the next 15 mins right upfront. That way he can directly jump in and start teaching.

So that’s pretty much the main pages. Here are a few more extra ones.

A few extra things

Lesson details

Every completed lesson has a small details page, that mentions a few statistics and contains a few actions that the educator can perform.

Lesson rescheduling

The educator has the option to reschedule the future lesson that has not been started yet. Here is how it looks along with a simple error state.

And… That’s a wrap!

I hope you guys found this case study useful and informative. Feel free to hit me up on any social media platform if you have any questions. I would be more than happy to have a chat with you.