Tencent future classroom
Crafting interactive learning experience
As part of an internship at Tencent, my goal is to make the online course a more engaging experience for left-behind children in China. After the internship, I decided to redesign the course learning mode and wireframe individually, creating a workable prototype in my spare time.
Time
October 2021 -
November 2021
Team
Mentor-Jeff
(UIUX Designer)
Tools
Figma
Adobe Illustrator
Microsoft office
Procreate
My role
Competitive analysis
Illustration
Information architecture
User flow
Focus group interview
ConTExt
This is Tencent future classroom ⤵
For the project, I am working on Tencent's charity app that teaches children STEM courses ----Future Classroom. In the Future Classrooms app, children can learn STEM knowledge on laser cutting, coding, and VR through a series of videos.
Yet there is a problem
Low View, low user retention rate, low DAU
When I joined the team, they had already discovered the problem for the first launch of the future classroom. There are three lows: low views, low user retention rate, and low daily active users (DAU). This is not a good sign.
My goal in the project
create a more engaging learning experience for children
My goal is to not only investigate the cause of such low views. but also create a mock-up that ensures pro-longing the user retentions and DAU.
The solution
➀ Learn like Interactive card game
Instead of learning through videos, the new design employed card-swiping methods to make courses easier to comprehend. It also allows students to go at their own pace.
➁ organized Course Selection Page
The new design has a more organized course layout. It also includes a progress ring to help users remember the course progress.
➂ Encouragement through accomplishment
The new design has a more organized course layout. It also includes a progress ring to help users remembers the course progress.
➂ Solidify learning experience
At the end of each course, students will be able to strengthen their learning by taking tests. This ensures students are actively learning and helps solidify their memories
Take a glimpse at my process ⤵
Initial research
About our users: left-behind children
The intended users for the Future Classroom are middle school students aged 12-16 years old, living in rural regions of China. According to previous research, a majority of these students are left-behind children, who can easily become addicted to video games and mobile games without proper outside control.
Finding problems through Focus group interview
To understand what exactly causes the problem with low views, we have conducted a focus group interview on our target users. Based on their feedback, their expectation and intentions can be categorized into 3 categories: engaging, accomplishment, and learning. I introduced the rainbow sheet analysis method to the team and this helped my team better understand users’ needs.
Key insights
Research insights
Boredom and unengaging learning
While students express interest in the content, the teaching methods are traditional and boring to watch.
No fulfillment and accomplishments
Deep down, they love games because accomplishments in games give them satisfaction and fulfillment in life.
No clear organization behind the courses
No particular patterning was observed; They do not understand the relationship and logic between individual lessons.
Design opportunity
What if, we change the app into a game itself?
Many of the students highlight "fun" and "game". Hence, I suggested changing the app page into a gaming educational platform. Specifically, a card learning education platform.
Designing
Competitive analysis: flashcards game
One of the best way to study efficiently while having fun is through flashcards. Hence, I have analyzed the existing flashcard products to learn their pros and improve their cons.
Information architecture
Based on the evaluation of the previous website, I need to improve the course-finding section. In addition, a card learning section is also added as a new feature. Here is the information architecture that I created for the section:
User flow
To further define users’ actions, we created user flows for different features to gain a better understanding of how users will use it.
Wireframing
Visualize ideas
As soon as I have determined the features, I have quickly drafted a wireframes with call outs. In such a way, I was able to show my users what the design looks like in hands.
A more friendly and fun app
To ensure quick iteration, I have tested wireframe 1.0 on two users. As a designer, this is a good opportunity for me to share my design with the community and talk to them in person. From the testing results, the users were all craving for a more friendly interface.
Design opportunity
How can we modify the design such that the app seems less intense to users?
Design system
a more vibrant Colors and fonts
I have decided to adjust the colors and fonts to make the design less intimidating for our users. I have applied the basic main colors from the original app, but I have increased the saturation to make colors more vibrant.
Illustration
In addition to the adjusted colors, I have also created illustrations to embedded in-between the text to inject a personality voice.
Testing
Usability testing
In this stage, I asked three users to test the usability and learn more about their frustrations in this round of testing. I set up 15-minute sessions with them, asking them to try the prototype and give me constructive feedback. Here are some features I have adjusted according to their feedback:
Home page before and after
Learning page before and after
Milestone page before and after
Final experience
Final design
Retrostective
My key learnings
#1 Accept criticism
Sometimes customer's honest feedback hurts. However, learning to dig deep into their true thoughts is the responsibility of UX designers.
#2 Think from user's perspective
Feedback from the focus group interview revealed that users did not find it attractive. After carefully listening to user needs, we pivoted our strategy to better align with their preferences.