In January 2021, Penguin Tutoring introduced 6-person small-group live classes for younger students. In this innovative 6-person small-group format, students could intuitively see the statuses of the six members in their group through video windows at the bottom. These video windows enhanced the interaction between teachers and students. However, capturing the attention of younger students, who tend to be naturally active, has always been a challenge for parents and teachers alike. How can we engage them in front of the camera? And if some students get distracted, will it affect others? In nearly 90 minutes of online classes, how can we prompt them to maintain a good sitting posture to protect their eyes?

Technically, we can introduce dynamic facial recognition technology to identify user states, but what should the notification look like? Based on product and user goals, we outlined the design goals for the interaction stages.

At this stage, the goals were limited to functionality, which might lead to relatively ordinary design solutions. So, we combined the tutoring experience principles of "Warmth, Fun, Natural" and redefined our problem as "How to remind users to maintain a good sitting posture in an interesting way? How can this reminder better integrate with the current scenario?"

We identified different scenarios where this feature should appear:
a. Function Activation: Notification - The first time entering the live classroom, reminding users of this feature.
b. Too Close: Notification - Encouraging users to adjust their posture without interrupting their current task (listening to the class).
c. Out of Frame: Notification - Encouraging users to return to the frame without interrupting their current task (listening to the class).
d. Option to Disable Daily Reminders: Confirmation - Users can choose to turn off reminders for the current class without interrupting their current task (listening to the class).

If we categorize the required attention-grabbing into weak, moderate, and strong, our notifications mostly fall into the moderate category. An important principle is that we want to capture the user's attention without disrupting their live class. Therefore, in terms of form exploration, options like video pause + video blur or pure voice reminders are not suitable, especially for younger children. Complex text-based prompts are also not suitable.

The new generation is accustomed to digital life and video interactions. So, why not try reminders based on video windows? Users are likely to pay more attention to their appearance in the video window, so we decided to place the reminders within the video window itself. When entering the live classroom, appropriate areas for reminders are indicated; if you disappear from the video, a little penguin, Jojo, will come to the window to find you; if you get too close, it will automatically put glasses on you (also indicating nearsightedness). The use of accessories is natural and fun, with plenty of room for expansion in the future. During the draft stage, we tried various accessory effects.

Subsequently, we sketched out storyboards for different scenarios. In these storyboards, we detailed the feedback that each step of the action should provide—such as identifying the problem and correcting it. From the perspective of child behavioral psychology, they seek feedback for everything they do, so detailed feedback is essential motivation.

References and low-fidelity prototypes given during the interaction stage.

The visual stage coincided with the upgrade of the 6-person small-group live classroom. In line with the classroom's style, our reminder solution also used the brand's blue and yellow colors. Bold and lively contrasting colors, along with exaggerated eyeglass stickers, were interesting and eye-catching. Such Easter egg design is more in line with the aesthetics of younger students.

In the animation stage, our little penguin came to life officially. We aimed for natural yet seamless visual effects.

During the actual implementation of this design, we encountered the issue of high energy consumption on mobile phones. Our user base is primarily in third and fourth-tier cities, with a focus on low-end Android devices. Here, we would like to thank our colleagues in the multimedia lab for their technical innovation, which greatly reduced energy consumption, making this feature run smoothly even on 200-dollar older Android devices.

Today, this feature has been online for over six months and has become a highlight of the 6-person small-group classes, receiving numerous positive reviews from users. Although the design process had its challenges, the results are delightful. We gave this AI reminder feature a warm name—Jojo Companion Learning. We hope to provide Jojo with more opportunities to accompany users in their learning journey and help them develop good study habits through warm, fun, and natural interactions.

Currently, Jojo Companion Learning is limited to posture reminders, but it can actually be integrated into the entire student learning experience. Learning companion features can enhance class enjoyment and user engagement. One aspect to consider is that unlike posture reminders, when Jojo participates in other aspects of the live class, teachers should be aware of Jojo's behavior and collaborate with Jojo.

My experience at Tencent has been truly exceptional, allowing me to accumulate a wealth of design experience in both the C-end (consumer) and B-end (business) sectors.

From 2019 to 2021, I collaborated with three visual designers and one motion graphics designer to build and iterate the in-class interactive quiz feature from scratch. During this time, the answer rate increased from 77% to 87%.
👉🏻 My Role: I served as the lead designer for in-class interactive quizzes, responsible for researching question types, designing the overall strategy, and handling interactive design for all client-side platforms (Student-side, Teacher-side, Teacher's Remote (iPad), and Homework Management System). Currently, there are a total of 18 question types available. The in-class interactive quizzes have significantly increased classroom participation rates and ignited students' interest in learning.
👉🏻 Design Highlights: Detailed scenario breakdown, diverse interactive formats, art education features, and warm and thoughtful feedback.

👉🏻 My Role: I was responsible for the interaction design of the student-side learning report, including content design and restructuring the information architecture. I also worked on the interaction and visual design for the teacher-side.
👉🏻 Design Highlights: Content strategy and information architecture.
👇🏻 Below: On the left is an example of the student-side interface, and on the right is an example of the teacher's editor interface.

👉🏻 My Role: I handled the interaction design for the shopping cart and proposed visual optimization strategies.
👉🏻 Design Highlights: Comprehensive consideration of branch scenarios and states.

👉🏻 My Role: I organized workshops and served as a facilitator to drive consensus and creativity. I enjoyed the sparks of inspiration that came from collaboration.
👉🏻 Design Highlights: Tailored workshop organization strategies for different scenarios, including within the design team (design + project background), across design teams (participants are all designers but with different project backgrounds), and across departments.