Client

Cross Domain

Duration

8 months(Jan - Aug 2020)

Keywords

Data Visualization;  Dashboard;  EdTech

Overview

Pangolin is a facilitative learning platform for k12 programming education. Leveraging educational technology and learning science, we managed to create this tool that helps middle school students personalize their learning experience with ample assistance, while teachers can track students' activities, analyze their performance, and provide timely interventions. 

My Role

In this 8-month project, I worked as a designer, collaborated with a project manager, a product manager, a researcher and a developer to create this platform. I was fully engaged in the research, ideation, prototyping and iteration process. As the design lead, I mainly took charge of the UI&UX design work as well as graphic design.

Background

K12 programming education is an emerging topic in China. Transforming from higher education, the programming education for young kids still has large room to improve.

The current system is ...

Not beginner-friendly

Students may easily get stuck on their coding tasks. However, teachers are not able to provide timely help for everyone due to large class size.

Not inclusive enough

Students have different levels of motivation, and capabilities, requiring more differential support, but the current curriculum is only majority-focused

Under this situation... 

The programming teachers may fail to know students’ actual progress, and provide expected support.

Problem Space

How might we assist teachers to provide inclusive and targeted support for students in a programming class?

Final Solution

Pangolin, a facilitative education platform that covers the whole flow of programming classes.

Leveraging educational technology and learning analytics, we designed Pangolin to help teachers learn about students' progress from multiple dimensions, and offer multi-layer guidance to students in case teachers are away.

Check out product details at >>

Design Highlights

​Concept Video

Cannot access?

How did we get there?

We started our journey from an open space. During the research phase, we kept narrowing down our focused scope based on our client’s vision and user research finding, and decided to build a facilitative education system at the end. During the ideation phase, we selected 2 of our 7 ideas according to the speed dating sessions and feedback from clients and professors. In the prototyping process, we conducted four rounds of usability testing and kept iterating on our design.

Research

What's a typical programming class?

In user interviews, we asked them to introduce their programming class (duration, class size, contents, schedule, activities, etc). Then we summarized a common class mode: a class that is typically 40min ~ 60min, including 30~50 students, and two main parts: lecture & practice.

Who are our users?

Upon our interviews, we created persona for teachers and students. They helped us further identify pain points from both sides.

Teacher

Students

Upon our interviews, we found that students are pretty diverse in their background, capability, motivation, interests, etc. We decided to segment students into two groups: advanced students who have relatively active and capable in programming learning, and lagging-behind students who are relatively passive and less capable.

What are the challenges?

Teacher's side...

01. Hard to optimize class time

"I know it's impossible to answer every student's questions."

"I often need to spend a lot of time solving repeated questions."

Opportunities...

Record and summarize students' problems

  • Record student questions

  • Summarize common questions

02. Students' progress are invisible

"I don't know whether things are going well if a student doesn't tell.."

"I pay more attention to the advanced students and lagging-behind students. For medium-paced students, it's less obvious to see what to help."

Track students' progress and status

  • Display real-time performance

  • Generate actionable suggestions

03. Students have diverse characteristics and learning styles

"Shy students don’t raise hands for help."

"Top students accomplish their tasks quickly. They have nothing to do if I don't assign extra learning tasks to them."

Systematic support that accommodates different learners.

  • Online help request

  • Extended tasks

Student's side...
Opportunities...

04. Get stuck in programming is frustrating 

"I'm interested in programming, but I just think I cannot be good at it."

"I may merely stare at my screen for minutes without doing anything since there're bugs."

In-time targeted support

  • Scaffold to smooth learning experience

  • Nudge independent thinking

  • Work examples for adaptivity​

Refined Design Goal

From enhancing k12 programming education experience  →

How might we assist teachers to provide inclusive and targeted support for students in a programming class?

Ideation

In this phase, we brainstormed a plenty of ideas and drew storyboards. Through 4 rounds of speed dating, we collected feedback from teachers and students and iterated on our ideas. Then we pitched the final 7 ideas to our client and professors, and conducted a survey to evaluate their feasibility, creativity and impact. 

After that, we met to rank the features based on their importance, and decided our design direction:

A facilitative platform which includes chunked tasks for in-class practices, an analytical dashboard to track student progress, and a class report for further review.

Design Iterations

In the design phase, we ran four rounds of iterations. Initially, I crafted from sketches and created our low-fi of prototype. Due to the complexity of learning analytics dashboard, I used this prototype to validate my assumptions about data type and information that teachers needed. Afterwards, with the feedback we collected from interviews & testings, we refined the information architecture, information types and visual presentations.

Click "<" and ">" to view prototypes ↓

Sketches & low-fi prototype

Group 906.png

Sketches & low-fi

01/ Iteration on information architecture

Integrated dashboard →  scenario-based modules

Initially we designed a dashboard that integrates all functional blocks. Users are assumed to enter a certain block and check students' progress.

  • Testing finding 1: Teachers only want to see information related to the ongoing session in class. Otherwise, switching between the instruction page and this dashboard page could be upsetting.

  • Decision: We revised the information architecture of the product to make it more scenario-based, which can reduce their cognitive load and provide a neater interface.

i1.png

02/ Iteration on practice modes

Single step mode → Dual modes

Initially we designed a step mode to scaffold students working on their tasks step by step, aiming to reduce teacher's burden and provide smooth practice experience to students. Through step-by-step success, we hope to improve students' sense of achievement and persistence. 

  • Testing finding 2: Although teachers like the step mode, they hope to retain the traditional mode so that advanced students can try to develop their own ideas to solve the problem.

  • Decision: We add a Classic mode which doesn't show step-by-step instructions.

i2.png

03/ Iteration on visual presentation

Chart → dots → bars: pursuing concise and informational display

We pursued to design intuitive and concise visual presentation for students' progress during in-class practice. At the beginning, the progress was displayed by a graphic chart (overview) and a step-based student list (detailed info) .

  • Testing finding 3: The chart is somewhat confusing and unintuitive. Comparing seeing an overview, teachers prefer to check students' detailed progress and status.

  • Decision:

    • Use color coding to show status and progress bar to represent the progress.

    • Hide the overview in the summary tag.

Final Design

​Concept Video

Design System

Reflection

It's my first to collaborate with teammates to accomplish a long-term project from an open space to a specific solution. I really enjoyed this memorable experience. Here're some takeaways:

>> Learn from different perspectives

This time I collaborated with people who have backgrounds such as social science, business and art. I was surprised by how they interpret a finding and solve a problem. I often asked why behind the decision they made and got cool ideas I never thought about before. That might be uncomfortable when you find others often disagree with you, but embracing the difference will let us learn more from people.

>> Be mindful of ambiguity in the communication

People with different backgrounds tend to think differently, and even use different language systems. Don't take it for granted that everyone can understand what exactly you mean, or you can 100 percent get your teammate's idea. That means when others talk to you, make sure that you understand their words by repeating and rephrasing; when you talk to others, be patient to explain more if they cannot get your idea.

>> Proactively seek for help from our surroundings

Although we tried our best to apply what we learned into this project, things were not always smooth along the way. We kept reaching out to seek support and advise on the tricky problems. Sometimes our questions were silly. Looking back,  I want to thank our team that we were not ashamed to speak out the problems. Without this, we cannot go so far.

© 2020 Designed by Xiaoyu Shi with love ❤