INTERNSHIP

iOS MOBILE

BRANDING

Tencent Future Classroom

VIEW PROTOTYPE

SUMMARY

Overview

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.

Duration

Oct 2021-
Nov 2021

Tools

Figma
Adobe Illustrator
Microsoft office
Procreate

Team

Mentor-Jeff
(UIUX Designer)

My role

Competitive analysis
Illustration
Information architecture
User flow
Focus group interview

Problem

Lack of engagement

" The contents are not interesting to me, and the video are too informative."

Lack of fullfillment

" I usually play games at home, so what gets me interested are those awards and collections. "

Unorganized courses

" I find this course very hard to navigate, I don't understand how to get back. "

Solution

FEATURE #1

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.

FEATURE #2

Interactive Card Swiping

The new design employed card-swiping methods to make courses easier to comprehend. It also allows students to go on their own pace.

FEATURE #3

Mission Milestones

The new design has a more organized course layout.

It also includes a progress ring to help users remembers the course progress.

FEATURE #4

Test learning

The new design has a more organized course layout.

It also includes a progress ring to help users remember the course progress.

UX VISION

We want to create a more engaging learning experience for left-alone children in China.

RESEARCH

Initial research

About left-behind children

The intended users for the Future Classroom are middle school students aging from 12-16 years old, who lives in rural regions in China. According to previous researches, a majority of these students are left-behind children, who can get easily addicted to video, mobile games without proper outside control.  

What it looked like when I joined...

When I joined the team, they have already discovered the problem for the first launch of the future classroom in the online classroom. They first discovered the problems are the course videos have very low views, and from a company’s perspective, this is not a good sign. 

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.

Insights

After the synthesize, I have come down to three main problems:

Boredom and unengaging learning

While students express interests 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?

IDEATION

Jumping outside of the box

An observation!

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.

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.

DESIGN

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.

Quick usability testing on 4 users

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.

Testing key points

Personality and tone

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. Here is a brief of what I have changed and added:

DESIGN CHALLENGE

How can we modify the design such that the app seems less intense to users?

DESIGN SYSTEM

Colors and fonts

A more vibrant color

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.

Sketched illustration
Colored illustration

ITERATION

Usability testing

In this stage, I asked 3 users to test the usability and learn more about their frustrations in this round of testings. I have set up 15-min sessions with them, asking them to try the prototype and gave 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 before and after

Final design

REFLECTIONS

Key takeaways

Accept criticism

Sometimes customer's honest feedback hurts. However, learning to dig deep into their true thoughts is the responsibility of UX designers.

Think from user's perspective

Initially, our focus was solely on enhancing the video course page, assuming it was an effective teaching mode. However, feedback from the focus group interview revealed that users did not find it attractive. After carefully listening to user needs, particularly in the realm of gaming, we pivoted our strategy to better align with their preferences.

Next steps

Heuristic evaluation

Given the opportunity to complete the project solo, I aspire to gather insights and ideas from professionals to enrich and refine the project.

Develop and coding

Having taken the project from inception to completion, I would welcome the opportunity to hand it over to a Tencent developer for implementation and integration of the design.