top of page

ALIVE Online Learning Platform Dashboard


This article is to show the process of how did I design the instructor's dashboard. Dashboard in an assemble for all of the functions for instructors, which helps alive users manage their accounts and make long-term and instant strategies for their teaching and business. 


I designed the dashboard from the scratch. Working with my pm and programmer co-workers revised and iterated different versions. 

Artboard 1.png

Adaptive Learning in Interactive Visual Environment

ALIVE (Adaptive Learning in Interactive Visual Environment) is a web-app that allows anyone to teach anything to anyone anywhere in the world in any language. ALIVE is aiming to truly democratize the online education industry by providing course authoring tool that is simple to learn, use, and access, and enables collaborative course development for faster production at no or very low-cost removing the entry barriers for educators – especially those from developing countries. The universal app store of ALIVE will enable everyone to easily access the quality interactive learning that is customized to incorporate mastery learning techniques and provide personalized learning experience to accommodate various types of learners.

Artboard 2.png

Instructor should be instructor's space which include every functions and informations that instructors need. Three main functions are included in the instructor's dashboard.

Problem Statement
Artboard 3.png
Less human interaction : Simple UI and clear navigation

The more content need to be shown the simpler we should have. UI and navigation is like the map and transportation. To make our user not get lost in our big land, we need to carefully design the map and the transportation system.

Insight 1
The dashboard is a brief introduction of Crucial Information
Balance Advanced information and general information

Based on the discussion with project manager and programmers during the product design period, I have a clear view of what information should be included and what kind of data can be collected from the technic side. The informations need to be shown is very large. So I must identify what is the data that the most users need to know, and what is the data only some advanced user need to know. So we could make a decision about what can be shown in the most important position to fulfill most people's intention.

Artboard 5.png
Artboard 4.png
Clear instructions: No-hands on education or marketing experience needed

The users of Alive come from different countries, languages, cultures and education backgrounds. There are many instructors are not from the education or internet industry. If we directly show them the data, they might not be able to understand the meaning behind the numbers or charts, so they can not make use of the analytics function. We must make clear instruction and specific description to every section in the website.

Use the right chart to show the data

Good UI and navigation will help users find the the data they want to see. But data visualization is the last but not the least part for users to get the information. In this case, number is not the only field of the chart.There's also time period, types, duration, operation, events and so many different kind of fields. For each point of data, we need to select a angle and a right chart to show the data. 

Insight 2
Don't let user think: help our users identify their goals
Artboard 6.png
Screen Shot 2019-06-10 at 2.13.18 PM.png
GOOGLE ANALYSTICS & Youtube studio (beta)
Artboard 7.png

During the research process, I experienced and studied different websites'  analytics dashboards.  Google analytics is very professional for website traffic analytics. It almost covers every metric that might matter to the user. However google analytics is designed for users equals to or above middle technic level.


Adaptive Learning in Interactive Visual Environment

Based with the discussion with the marketing department and project mamager. Our target users will be 3 different types. 

User Spectrum
Artboard 11.png
Artboard 11 copy 2.png
Artboard 11 copy.png

Make it easy to use for everyone (including no tech background user). Simplify user interaction. Users could find what the core functions within 3 clicks

Based on the interviews of 5 College educators (Professional Educator) , 3 traditional industry workers (never teach online before but have will to teach online ) and 2 online education instructors (who have already have experience of online teaching). I have the priority of the features that matters to our potential users.

Strategy & Execution

Design Goal: 

Priority of Features


Instructor Dashboard

Artboard 12 copy 2.png

Data Analytics

Artboard 12 copy.png
Main Feature and Structure

Information Architecture

Copy of sitemap_Alive_dashboard.png
Information Architecture

Wireframes (Part)

Artboard 8.png
Courses – 1.jpg

Screenshot of Hi-fi design (Part)

Traffci report – 3.jpg
Inbox – 5.jpg
Inbox – 4.jpg
Profile – 1.jpg




The floating notification box will inform Users with important website news, account updates, and marketing information.

This section is helping build a helpful community environment. And filter important news, so users won't miss any important information.


Chart Transition

The transition from the same chart style has a transit animation. This animation helps build a consistent visual environment for users.


Time Range Selection

All of the charts could be customized with different time ranges.  By selecting the start date and end date on the calendar, the user could get the data of a particular time range.


Also, below the calendar, there's a drop-down menu. Users could conveniently select a time range like last 7 days or last 30 days.

Data Source

In the analytics dashboard, we hope to cover different kinds of data. Some data are time sensitive, so are not. Student performance data is not time sensitive, but it relies on different courses. So we use a quick drop-down box for the user to select the data source.


Find the Data

The hierarchy of the data is very clear. All of the menus and options are at a very obvious position. The interaction of data visualization is based on the user's habits.

To show different features of different data, we used different charts. So users could get the information from the chart easier.

Compare Metric

This is an advanced function for users with special needs. Besides the normal chart, the user could add new metrics to the chart to build a new chart and get new features from the data.

Almost all of the data in the menu could have a combination. These charts are not shown on the website by default but could be created by the user.


Student Performance

Student performance is related to the courses. When the user selects different courses, they could see the performance of the student and the different answers that the student has.


Also, they could select different students to see their performance. 

bottom of page