andy-falconer-qADcG-2qMd4-unsplash.jpg

E-learning Design

Objective: How might we design an online platform to help kids learn art?

Solution : Design a plug-in that focuses on providing  users with a more convenient and easy-to-use art learning tools for a better e-learning experience

Duration : 5 weeks

Type : Individual Project, App and web plug-in design for 8+ people regarding art learning

Skills : User Journey Map, System Map, Persona, Ideation, Ipad Design, Prototype

Tools : XD, Sketch, Indesign, Photoshop, After Effects

OVERVIEW

截屏2020-12-02 下午1.29.44.png

This project is a plug-in design of art e-learning courses for 8+ people, which aims to offer teachers and students have a better online teaching/studying experience, and a more convenient and easy-to-use art learning tools. The plug-in design includes several functions: object, composition, color and mine. In the object section, teachers can choose different objects, adjust the composition, lighting and materials to make up the pictures in class. In the composition section, students and teachers can use auxiliary lines to improve the accuracy of drawings. Color function provides color composition and color mixing exercises. Mine enables students to submit assignments, view teacher's evaluation, and gets timely Q & A by using AI service.

 

ABOUT TYPICAL ONLINE CLASSES

A brief video introduction of Sue-a 12 year old student who taking online art courses but having trouble to understand the class. She is trying to complain about the limitations of online courses to her mother.

PROTOTYPE DEMO

Solutions regarding students' problems with online art learning. A tutorial demo of our plug-in product "Arindow".

 

BACKGROUND

At present, many education industries are gradually changing to online courses. There are various kinds of online courses, among which the development of art online courses is also very rapid. Parents pay more attention to the development of children's art and design ability. However, the difficulty of art instruction, the limitation of remote space, the weak interaction and the untimely feedback are all the problems that need to be solved in online education.

截屏2020-11-23 下午3.47.35.png

RESEARCH

In order to learn the current existing online e-learning platform, we investigated many online courses in the United States and China. Knowing the existing competitors can give us a more comprehensive analysis of users' feedback, including both teachers and students.

截屏2020-11-23 下午5.09.02.png
截屏2020-11-23 下午5.11.07.png
截屏2020-11-25 下午12.25.52.png
截屏2020-11-25 下午12.25.52.png
截屏2020-11-25 下午12.25.52.png

PERSONAS

We investigated students, teachers and parents, collected their insights and built the personas. The student has difficulty in understanding knowledge, the teacher hopes to demonstrate  knowledge in a more simply way, whereas the parent has concerns regarding his/her children's motivation of doing homework. Each person's concern varies on one's different focus.

USER JOURNEY MAP

The process of users using online learning courses in the past is being studied to help us have a holistic understanding of how each part of the E-learning system works.

截屏2020-11-25 下午12.25.59.png
 

SUMMARY

We gathered and summarized the questions that students encountered while taking online courses. Questions are listed separately for classification, from which we can think of one-to-one corresponding solutions.

Structure Flow

structure flow.jpeg

01

Light, Shape and Material

Students have difficulty in understanding the light, mass and form of objects. 
Their understanding of light and shadow relationship between objects is full of vague and uncertainty. They also do not know the right way of rendering objects with different material.

4.jpg
5.jpg

02

Composition

Students have difficulty in drawing multiple shapes. There is no guideline reference or teacher's assistance. Students often draw off line and lose the accurateness. The arrangement of them is also disordered.

03

Color

Students don't know how to use color. They lack systematic understanding of color structure, harmony and composition.

8.jpg
web6.jpg

04

Questions

Students can not fully understand the courses. They have many problems due to the limited functions of current e-learning platform. Thus they lack the enthusiasm for class and can not finish and upload the homework in time.

05

Feedback

There is not a specified place for students to receive comments and feedback. They do not know how they did on each homework and what could be improved more.

9.jpg

SYSTEM MAP

屏幕快照 2020-11-26 下午4.15.16.png

IDEATION

We sketched out our first drafts of the plug-in and did several iterations to find a more reasonable and logical design.

IMG_2558.HEIC
IMG_2567.HEIC
IMG_2570.HEIC
IMG_2580.HEIC
IMG_0566.HEIC
IMG_2594.HEIC
 

Medium Fidelity Prototype

 fidelity.jpg
12.9-inch iPad Pro – 16.png

Object

Provides a variety of functions including geometry, lighting and materials. Teachers can adjust the course difficulty according to the level of students' ability. AI service also provides adaptive difficulty level adjustment.

01

IPAD PLUG-IN DESIGN

02

12.9-inch iPad Pro – 33.png

This function includes two parts: color and mix game. Students learn about color knowledge, the mixing skill and harmony of colors. Students are provided with matching color exercises of different difficulty. They could check games played by others and practise more.

Color

02

Students and teachers could drag the auxiliary lines to help improve the accuracy of drawings. AR mode enables them to shoot pictures and import on to the artboard for adding auxiliary lines. 

12.9-inch iPad Pro – 2.png

Composition

03

04

Students upload their homework and view teacher's comments here.  Students can view their past homework records, unlock achievements and upgrade by uploading assignments on time. AI service provides real-time Q&A for students.

12.9-inch iPad Pro – 39.png

Mine

04

USER TESTING

To understand the current process of students taking e-learning courses, we went to some art institutions. We found out the art tools that students needed in class, and also discussed with art teachers who teaches online courses about the tools lacked to assist in class. We interviewed many children and asked them to test our products. Through their feedback, we analyzed the applicability of the whole design.

IMG_2671.PNG
IMG_2670.PNG
IMG_2659.JPG
IMG_2672.PNG

Insights

  • See different ways to better arrange the Interface layout

  • Further explore functions that teachers and students needed

  • Code it out to get a better testing result

  • Working fully through this project taught me the importance to think intentionally about every element of the project and how it can contribute to the end result.