Po Yen Tseng
Asset 3haha.png

End-to-end Design

 
 

JUNYI ACADEMY

CLOUD-BASED LEARNING MANAGEMENT SYSTEM

Junyi Academy is a Taiwan based non-profit eduTech organization with the goal of creating a set of online tools that help educate students. The organization produces short lessons in the form of videos. Its website also includes supplementary practice exercises and materials for educators. Also, LMS to track learning performance.

This “Report Upgrade” project demonstrates very well of my capability to wear different hats through the whole product cycle. From user research, iterating designs solutions, to full-stack programming and testing.

 
 
Landing page onboard

Landing page onboard

Gamification and self learning scheduling

Gamification and self learning scheduling

Assign supplementary exercises and lecture videos

Assign supplementary exercises and lecture videos

Dashboard reports

Dashboard reports

 
 

PRIMARY USERS

K-12 EDUCATORS AND STUDENTS

Jane is a third grade teacher who has to handle 34 students that varies in learning performance and age. Usually she do not have time to provide personalized help because understanding each student is extremely time consuming. There were 20,000+ teachers and 600,000 students and currently more than a million users in total.

FACILITATE EFFECTIVE LEARNING FEEDBACK LOOP

Jane uses Junyi in her daily teaching to better understand each student. For instance, she assigns lecture videos and exercises to her students when she teaches the concept of multiplication. She could navigate to the dashboard report page to track learning progress and give personalized assistance to each student according to tracked data.

 
 
p2-normal-loop.png
 
 
 

MAIN PROBLEM

TEACHERS DO NOT PROVIDE FURTHER HELP TO STUDENTS AFTER READING THE DASHBOARD REPORT.

Students in rural area where schools are understaffed or students from lower socioeconomic status families are usually those who need help in education. A common phenomena in Taiwan is - these students do no receive enough assistance over the course of formal education, losing competitiveness and social mobility, which make this demographic segment highly correlated with social issues.

Junyi aims to utilize technology to help strengthen the educator-student feedback loop so all students could thrive at school and gain social mobility.

 
 
 
 
 

GOAL

FIX THE BROKEN LOOP

Improve the existing dashboard report with the goal of motivating educators to provide assistance to students who need help. Increase the success metric to at least 10%. 

SUCCESS METRIC

MY ROLE

END-TO-END UX DESIGNER

I deliberately requested to run end-to-end design for this project alone. I am responsible for the user research, ideation, information architecture, sketching, wireframing, prototyping, usability testing, full-stack programming, and ab-testing

CROSS-FUNCTIONAL TEAM COLLABORATION

1 Project manager
3 Software engineers
2 Data scientists
Content team
Marketing team

 
 

USER RESEARCH

SPEAK WITH DATA

Quantitative research

Discover behavior pattern and verify ubiquitousness of reported facts by writing GQL and Python code. 

Qualitative research

Conduct interviews with educators and observe how teacher-student interactions in classrooms to collect qualitative data. 


OLD REPORT VIEW

Interface is translated to English and redesigned to address the cultural difference in writing. In traditional Chinese, right-to-left and horizontal writing  is extremely common, which makes the design layout and visual hierarchy significantly different from English interface. 

Teachers log in to view the dashboard report from the backend, it is not visible for student. Each main row is a student and each main column is a lecture video or a single exercise question.

 
 
The report gave me statistics not actionable insights
— Fuxing Elementary School Teacher, Ms. Lin
 
 
 

UX DESIGN

ITERATING WITH USERS

DATA-DRIVEN

We verified whether a feedback is a general issue across the platform by Python code.

PARTICIPATORY DESIGN

Invite teachers to join design iterations  offline and sent out feature-wishlist to collect feedbacks.

 

HEURISTIC EVALUATION

Examine UI with teaching experts and target users to meet usability goals.

INTERACTIVE PROTOTYPE

Test interactions with Sketch and by writing front-end code in Javascript, HTML, and CSS.

 
 
 

DESIGN SOLUTIONS

COLOR CODING

In a simple glance, teacher could locate students who need help. Eye soothing colors were chosen for easier reading and improve accessibility. Label was grouped and updated with clearer explanations to allow first-time user adopt faster. Notably, table width is significantly reduced for conveying the same amount of information.

 
p07-color-coding.png
 
 

RECOMMENDATION DROP-DOWN

A drop-down list of suggested lecture videos and exercises related to the chapter is added. With simple clicks, teachers could give effective and personalized materials to students in need. This improvement encourage actions by alleviating the cognitive effort of coming up with meaningful help. Teachers could give out the recommended materials or get inspirations from the materials.

 
 
p08-recommendation.png
 
 
 
 
 

ANSWER HISTORY

The more thorough a student’s thinking process is perceived, the higher level of personalized assistance teachers could give. Therefore, I added a new feature - the answer history. Detail history such as time spent on the exercise, how the hints were used, and all past answers are ready to view upon a single click on the report.

 
p09-answer-history.png
 

NEW REPORT VIEW

After testing out several alternative solutions with our users and examined with education experts on usefulness, and discussed feasibility with engineers, I finalized our improvement items to address the problem of not having actionable insight of the old dashboard. With this new dashboard report, teachers are able to find students in need with just a glance, give personalize help efficiently, and grasp detail thinking process with a single click.

 
 
13_high_res.png
 
  1. Color coding to show which student need help

  2. recommendations to encourage teachers action

  3. Provide answer history to unveil thinking process

COLOR CODING

 
 
 
 

RECOMMENDATION DROP-DOWN

 
 

ANSWER HISTORY

 
 
 

RESULT

SIGNIFICANT SUCCESS METRIC LEAP

The system was a/b tested for four weeks in total to collect quant data for verification and ensure no serious bug effecting user experience. Users behaviors were recorded and analyzed with BigQuery and Google Analytic, which we found an increasing trend of teachers assigning customized learning materials to students, alongside with a rise on time spent on the report. We successfully surpass the goal set at the beginning and increased the success metric to 19.7%, which is almost five times of the original percentage. Finally, the new report system was deployed to live server serving more than 600K users at that time.

 
 

QUALITY FEEDBACK

“The recommended exercises are on point, feels like it is designed by experienced teachers. I trust the content and would add on other supplementary material depends on individual needs. The new report save me so much time!”

p12-head2.png

“After the update, I read the report all the time. I could locate which students in my class need help right away. The colors and labels are clear and comfortable to read.”

p13-head3.png

“Thanks to the answer history, because you know, when a student don’t understand a problem, it is difficult to express what kind of help they need. Now I could view the history to start the conversation more effectively.”

 

 

TAKEAWAY

COMMUNICATION! COMMUNICATION! COMMUNICATION!

If I could go back in time and give myself an advice. I’d told myself and the team, remember to communicate clearly with users about the change. The report is a major feature on the website, although we deployed the new dashboard gradually from 10% of users to all users. We did not explain what and why did we make this change beforehand, and therefore, some of our users reached out to us for clarification. We should have had emails sent and site-alert to inform and to build trust with our users.

 
Presentation slide
 
present dark.png

Before you go…

check out some visuals and UI?