top of page
Arindow
iPad plug-in design, Capstone Project
Art tools for a better E-learning experience
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
A plug-in for online art courses that offers several functions such as object, composition, color, and mine to improve the teaching and learning experience.
This project is a plug-in for art e-learning courses for 8+ children that enhances online teaching and learning experience and offers convenient and easy-to-use art learning tools. It includes four main functions: object, composition, color, and mine. The object section allows teachers to select objects and adjust composition, lighting, and materials, while the composition section provides auxiliary lines to improve drawing accuracy. The color function offers color composition and mixing exercises, and the mine function allows students to submit assignments, view teacher evaluations, and receive timely Q&A support through AI services.
OVERVIEW
Final
Final Design
Object Adjustments
-
Provides a variety of functions including geometry, lighting and materials.
-
Teachers can adjust the course difficulty according to the level of students' ability.
-
A button that can adjust the lighting, adding or removing highlight and shadow.
Color
-
This function includes two parts: color and mix game.
-
Learn about color knowledge, the mixing skill and harmony of colors.
-
Students are provided with matching color exercises of different difficulty. They could also check games played by others and practise more.
Composition Line
-
Drag the auxiliary lines to help improve the accuracy of drawings.
-
AR mode enables users to shoot their pictures and import them onto the artboard
-
Various auxiliary lines
Feedback, Q&A
-
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 basic Q&A for students.
PROTOTYPE DEMO
This plug-in product "Arindow" provides a tutorial demo that addresses challenges faced by students during online art learning.
Interested to see the whole product? Please refer to our concept video!
Process Overview
Background
Research
Ideation
Prototype
& Iteration
Final Design
Background
Currently, the education industry is transitioning to online courses, including the rapid development of online art courses, as parents place increasing emphasis on their children's artistic and design development. However, the challenges of providing effective art instruction online, such as limited interaction, remote spatial constraints, and untimely feedback, must be addressed to improve the quality of online education.
In-person Critiq & Demo
Only online Critiq
Difficult to demo
Research
Competitive Analysis
Understanding the market and competitive products
-
There are very few online art classes on the market.
-
Some art classes are completely recorded video, there is no real-time teaching.
-
Participating in art classes with real-time teaching is difficult to impart in-depth knowledge online.
-
Students also lack opportunities for practice and interactive reflection.
After evaluating the different teaching platforms available in the market, several observations were made. Notably, there are fewer platforms that provide painting instruction compared to other teaching categories. Many art courses are pre-recorded and do not offer live interactive instruction. Although some websites offer one-on-one tutoring, limited distance can hinder students' comprehension of more advanced concepts. Furthermore, many children fail to complete assigned homework without parental supervision, indicating a lack of practice autonomy.
Discover
Research Methods
While conducting a competitive analysis that involved comparing existing online teaching courses on the market, I also sought direct feedback from my target audience and current users. This was to ensure that the final product would meet their needs and provide a satisfying experience. As such, I conducted a total of 24 surveys, 6 interviews, and reviewed secondary research to obtain additional insights and findings.
24 surveys
%201.png)
8 interviews
Secondary Research
Who are our main users for the E-learning platforms?
To gain a comprehensive understanding of user feedback from both teachers and students, I researched numerous online courses in the United States and China to learn about the existing e-learning platforms. This allowed me to investigate and analyze the competition in the market.
Personas
Who is our user?
Through collecting feedback from students, teachers, and parents, we crafted personas that embody their respective needs and concerns. The students face difficulty grasping new concepts, teachers strive to streamline their teaching techniques, and parents worry about their children's drive to finish homework. Every individual has their distinct focus and specific worries.
User Journey Map
Realizing the whole journey
To gain a thorough understanding of every aspect of the E-learning system, I analyzed how online learning courses have been utilized by users in the past.
Summary
Summary
Realizing the whole journey
I compiled and condensed the queries that students faced during their online coursework. The questions are categorized separately, enabling me to devise individual solutions that correspond to each one.
Structure Flow
Pain Points
5 main design parts
After conducting my analysis, I have gained a deeper insight into my user personas and identified four key pain points.
01
Light, Shape and Material
The students find it challenging to comprehend the light, mass, and form of objects. They struggle with the relationship between light and shadow, resulting in uncertainty and ambiguity. Additionally, they lack knowledge of the appropriate techniques for rendering objects made of different materials.
02
Composition
The students face challenges in drawing various shapes, as there are no guidelines or teacher's aid available. As a result, their drawings are often inaccurate and lack precision, and the organization of shapes appears disorderly.
03
Color
The students' knowledge of color usage is insufficient, as they lack a structured understanding of color composition, harmony, and arrangement.
04
Questions
The current e-learning platform's limited features result in several issues for students, hindering their ability to comprehend the course material fully. As a result, they lack the motivation to participate in class and struggle to complete and submit their homework on time.
05
Feedback
Students do not have a designated platform to receive feedback and comments, leaving them unaware of their performance on each homework and areas for improvement.
How Might We...
Design an online platform to help kids better to learn and understand art concepts?
Testing design concepts
Setbacks and Direction for Design Platform
At first, I spent 1 week tring to took online art courses and played around with three directions:
Web Design
Mobile App Design
Ipad plug-in Design
In the initial stages of the design process, I experimented with three different design interfaces, including the website, mobile app, and iPad app. Given the powerful tablet drawing capabilities and additional features like camera functionality, I opted for an iPad plug-in design. I started with basic sketches and continued to test and explore various design processes. Over the following two weeks, I developed the entire structural flow and continued to iterate on the design, which will be discussed in detail in the latter part of the presentation.
Ideation
Testing Design Concepts
I created initial sketches for the plug-in and underwent several rounds of iterations to arrive at a more sensible and coherent design.
Brainstorming the plug-in design
Structure Flow
Covering 4 main functions:
-
Compostion Arrangement
-
Material Adding
-
Color Mix Exercise
-
Feedback & Grading Section
Iterations
Iterations
I kept iterating on the design and have three versions.
Version 1
Version 2
Version 3
Version 1
1/3
User Testing
Collect Feedback
In order to comprehend the current process of students taking e-learning courses, we visited several art institutions. During our visits, we identified the art tools that students required in class and consulted with online art teachers regarding the tools that were lacking in their virtual classes. We also interviewed numerous children and invited them to test our products. Based on their feedback, we evaluated the suitability and efficacy of the entire design.
4 Major Improvements
Testing+Improvements
Following the testing with children at various art institutions, I identified certain design functions that were missing and subsequently added them. These additions included both improvements upon the existing design and completely new features.
First improvement
Adding Button that can level up the difficulty by adjusting the light.
-
According to feedback from art teachers at various institutions, teaching students about cast shadow and core shadow proves to be a difficult task.
-
Incorporating a button that allows for adjusting lighting and freely adding or removing highlights and shadows enhances the explanation of lighting theory.
Second improvement
Incorporating buttons that enable users to adjust the difficulty level.
-
The color mix function was initially designed as an add-on feature to enhance the in-class experience for both teachers and students.
-
The platform offers three levels of difficulty: Easy, Medium, and Hard.
-
The color theory is taught through a step-by-step learning approach.
Third improvement
Social gaming page helps to intrigue study interest.
-
The color mix function was initially designed as an add-on feature to enhance the in-class experience for both teachers and students.
-
The platform offers three levels of difficulty: Easy, Medium, and Hard.
-
The color theory is taught through a step-by-step learning approach.
Medium Fidelity Prototype
Medium Fidelity Prototype
Design System & Style Guide
Collect Feedback
In order to comprehend the current process of students taking e-learning courses, we visited several art institutions. During our visits, we identified the art tools that students required in class and consulted with online art teachers regarding the tools that were lacking in their virtual classes. We also interviewed numerous children and invited them to test our products. Based on their feedback, we evaluated the suitability and efficacy of the entire design.
Colors
Icons
Logo
Onboarding Illustrations
Illustrations for a tutorial video
Insights
If I had more time...
-
See different ways to better arrange the Interface layout.
-
Further explore functions that teachers and students need.
-
Improve the design to make it more attractive.
Takeaways and What I’d Do Differently with
-
Working fully through this project taught me the importance to think intentionally about every elements of the project and how it can contribute to the end result.
bottom of page