The Scon Class Management System had a UX Designer involved since May 2021, but as early as October-November 2020, I was responsible for a full-chain service design diagnostic project. I interviewed colleagues from various departments, including the Teaching and Research, Operations, Product, and Data. I also led several course experience reviews with designers and created multiple service blueprints, visualizing the entire service process and collaboration format. This laid a strong foundation for the subsequent involvement of design colleagues in B-end projects.

Throughout the entire period of working on 2B projects, I led the first and second rounds of research and proposed the strategy for the third round of research. In the design projects, I was responsible for three projects:
Communication/Group Messaging Component, Group Messaging Upgrade, and Class Monitoring.

Now, let's delve into the details of the Group Messaging Upgrade and Class Monitoring.

The Scon Class Management System is a mid-platform tool for tutoring teachers to manage their classes, spanning initial contact, teaching, assignments, and re-enrollment stages. Frontline teachers use the class management system to manage student records, track progress, send messages, and initiate communication. Approximately 5,000+ teachers use the class management system, serving over 1 million students, with 210,000+ records created. In 2020, teachers sent a total of 1.3 million messages using the class management system. One teacher typically supports around 160 students.

This project aims to serve frontline tutoring teachers by upgrading the group messaging function from sending plain text to sending rich text messages.

When using enterprise WeChat to send messages to parents, a teacher can only send one text message at a time. With the current class management system, teachers can send the same text message to multiple parents simultaneously. In an ideal state, the system should support teachers in sending rich text messages, including text, images, voice, video, files, contact cards, and links, to multiple parents simultaneously.

Upgrading group messaging will significantly enhance the efficiency of tutoring teachers, saving time for educational research and more personalized communication.

I conducted research on how tutoring teachers send messages, mainly through observation and interviews. Apart from the pain point of supporting only plain text messages, I identified three other major problems:
‍
❶ Incomplete message delivery process, leading to a fragmented user experience: The current group messaging system has message templates and records exceptions in message sending. After sending, the status of message delivery is unknown, often requiring feedback from users on their mobile devices. The extent of similar problems encountered by multiple users is also unknown.
‍
❷ Editing messages involves modal windows, which can be challenging for teachers with limited computer performance. Teachers become frustrated when they see modals or page redirects.
‍
❸ Poor consistency in message sending functionality: I reviewed existing message sending pages and found significant differences in style and structure. This creates a significant learning curve for new users (as tutoring teachers frequently join and have high mobility). Even for existing users, the experience is not optimal, and maintenance costs are high.

Then I came up with the design goals:

During the design phase, I addressed each of the problems mentioned above:

The upgraded group messaging feature is called the "Message Template Library." It includes two main scenarios: ❶ Managing message templates in the template library page and ❷ Sending messages in my to-do page. The sending messages scenario can be further divided into two sub-scenarios: using templates and creating new messages. The updated workflow for managing templates and sending messages is more comprehensive, covering more scenarios.

The image below illustrates the before-and-after workflow comparison of managing message templates and sending messages, with the newly added steps highlighted in blue. The enhanced functionality covers a wider range of scenarios, from creating templates to reusing them, and from mass messaging to viewing message records.

❶ Firstly, within the message template library, users can create new message templates. I designed this using a drawer-style layout, which is more stable compared to the previous pop-up windows. It also allows for more content, making it suitable for editing and previewing rich-text messages.

❷ When users send messages, they can choose from the existing message templates. I aligned this with the side panel style of the enterprise WeChat's message template library, making it easier for users to learn.

❸ Users can also choose to create new messages, and the experience is consistent with creating templates in the message template library. Additionally, users can select to save this message as a new message template.

❹ In the previous version of the class management system, there was no effective feedback after sending messages. The new version of the message sending feature includes feedback on message delivery status and provides an entry to check the progress. Since our messages are queued, we may not immediately know whether a message was sent successfully or not, but we can calculate the approximate completion time.

❺ In the feedback result query section - viewing message details, I designed it with two dimensions: messages and recipients. This is because messages can be categorized based on content into two types: strong sequential SOP standard phrases, such as greeting first, then filling in information and submitting documents, downloading the app, and introducing the course; weak sequential relationships like post-class reference videos, where the order doesn't matter.
For the former, it is more suitable to view details based on recipient dimensions. Teachers can decide whether to resend certain messages that failed to send. For the latter, due to the lack of sequence constraints, it's generally okay to resend failed messages without worrying about the order.

After supporting rich text message sending, the most significant challenge was that teachers had to add modules (i.e., one WeChat message) one by one, with each module going through the steps of "adding > editing > saving > previewing." Using conventional modal windows for this process would lead to many page redirects. Therefore, I adopted in-place editing, combining editing and previewing in the same interface. Teachers can click on a module to enter the editing mode and click outside to enter the preview mode, with previews matching the mobile device's appearance. This approach is efficient, visually pleasing, and elegant, saving screen space and being computer performance-friendly.

Interaction flow:

Preview states and editing states of various message types:

For B-end products, consistency greatly reduces learning, usage, and maintenance costs. I reviewed all pages related to group messaging and compiled design assets related to components, templates, and more.

Subsequently, I created basic templates for modal drawers for creating messages and modal drawers for feedback.

The feature is currently in development, but after the design drafts were released, stakeholders provided very positive feedback.

Expected results: Each rich text message sent will save approximately 15 minutes.
每次群发富文本动作节约15min；老师基本每节课群发文件/图片/视频的次数1-2次；每节课为老师节约15-30分钟，按一周五天计算，每天节约3-6分钟。

The Scon Class Management System is a mid-platform tool for tutoring teachers to manage their classes, covering various time points such as initial contact, teaching, assignments, and re-enrollment. The Scon Class Management System is gradually transforming from a middle-tier tool for tutoring teachers into a multifunctional tool that serves frontline tutoring, lecturing, management personnel, combining tutoring, courses & assignement, educational research, and management.

This project serves managers.

The Class Management System previously only served internal management within the tutoring center, such as grade group leaders and base directors. However, starting in September, due to the adoption of the Wuhan Municipal Government's tutoring course pilot, the Class Management System's class monitoring needs to support education bureau leaders, principals, grade directors, and others. They need to view real-time attendance rates and real-time attendance details of schools, grades, and classes under their purview.

Additionally, to make the functionality more versatile, the product design needs to balance the platform's business scenarios and the project's requirements, leveraging configuration capabilities to achieve flexible functionality combinations.

For managers, their primary requirement is to quickly understand the current course situation by viewing the class monitoring dashboard. They aim to detect anomalies and provide immediate assistance and supervision to relevant teachers. This behavior exhibits three characteristics: strong periodicity, timeliness, and purposefulness.

❶ Strong Periodicity: At the beginning of the semester, they look at the initial contact, during the semester, they focus on homework and re-enrollment communication.
❷ Strong Timeliness: They hope to have real-time attendance rates and identify teachers with lower attendance (below average) for timely supervision.
❸ Strong Purposefulness: They expect to discover abnormal tasks, teams, or team members through data comparison promptly.

Therefore, the design should revolve around these pain points: How to help them grasp the overall situation? How to measure team performance? How to detect anomalies?

I conducted research on the requirements of managers and the current state of class monitoring. I identified three major problems:

❶ Lack of Consistency: Class monitoring has several tabs like Initial Contact, Courses & Homework, Refund and Re-enrollment. Each tab's content is similar but has different structures. Teachers frequently navigated between pages and were bothered by the learning and usability costs.
❷ Unclear Presentation of Key Data: The presentation of important data violates the usability principle of "Recognition rather than recall."
❸ Weak Data List Readability.

Based on these findings, the design objectives were established:

For B-end products, consistency significantly reduces learning, usage, and maintenance costs. Here, I provided a basic architectural template for class monitoring. The user flow for managers, from top to bottom, consists of "filtering > viewing important data indicators > comparing charts > viewing data details."

Class monitoring originally had four tabs (Initial Contact, Courses & Homework, Refunds, and Re-enrollment). However, this project only involved the transformation of the Courses tab. But I divided the Courses into two tabs: "Live Classes" and "Non-Live Classes" (still named Courses). This division was made because the scenarios and key indicators for live classes and non-live classes are significantly different.

Highlighting Important Data Indicators: Here, I brought out important data indicators and placed them at the top. Users can switch between data by switching secondary tabs.

Heat Mapping: Following the principle of helping managers quickly identify problems, I designed a heat mapping feature. When activated, absolute value data would have a heat-colored background, while trend data would have deviation graphs. These data are relative and do not have absolute good or bad values. For example, the heat map has 10 color levels, and the deviation graph's maximum value is based on the maximum value in that column. This design allows managers to quickly locate issues, making it intuitive and efficient.

The functionality has been developed and deployed, and feedback is being collected.

Designing B-end products requires a deep and meticulous understanding of the business to meet users' needs effectively.
Designing B-end products requires a deep and meticulous understanding of the business to meet users' needs effectively.
Early-stage full-service projects require significant investment, with limited short-term returns. However, they greatly enhance understanding of the business and become valuable tools for onboarding new team members.
When designers start working on B-end business, starting with service blueprints can be an effective approach.

Then, focus on addressing specific pain points within the service's particular scenarios. In-depth research, including field investigations, is essential for understanding users' work environments and tasks from their perspective.

In layout design, consideration should be given to versatility. I am currently leading the development of the B-end design system, which is still being refined. (Note: Some nodes in the images have been blurred for privacy reasons.)