The company
VIPKID is an education technology company valued at 4.5 billion USD and headquartered in Beijing, China. Along with its subsidiary SayABC, the company runs one of China's largest online English-language tutoring platforms which connects English teachers from around the world with students in China who want to learn English.
The VIPKID headquarters in the Hongenguan building, a well-preserved hutong near the Drum Tower (Gulou) in Beijing.
The product
During my time at VIPKID, I worked on SayABC, then an emerging platform with a desktop client for teachers to tutor up to four students in an interactive classroom. SayABC aims to make English-language learning accessible to more children in China, targetting mainly families living in Tier 2 & 3 cities who want to give their kids a quality English education, but who may not be able to afford it.
I worked across various teams to conduct research into the needs, goals and pain points faced by the teachers on our platform, and we came up with a range of targeted solutions to support them in their work. I was also involved in projects focused on delivering a delightful and engaging learning experience to students.
Teacher recruitment website
Redesigning and crafting content for SayABC's teacher recruitment website – to encourage teachers to take the first step in their journey with SayABC.
Teacher recruitment website
Research
Learning about teachers' needs and goals
We surveyed 30 SayABC teachers, who shared about their experience using the platform and motivations behind pursuing an online teaching career. We learned that:
Autonomy
Most teachers wanted to make money doing work that fits their lifestyle and priorities. They want to be able to decide when to work and how much they want to earn.
Impact
It's important to empower teachers to be educators by highlighting the impact they have on students in building their confidence to think and express themselves in another language.
Support
Since they are working remotely, teachers need a strong support network that provides them with guidance and feedback on their teaching.
Talking to stakeholders
We also spoke to members of the SayABC team to hear their thoughts about what value the platform should provide to its customers and partners. Some takeaways include:
Accessibility
Make English education accessible to more kids through group classes, without compromising on teaching quality.
Passion
Ensure that the teachers are passionate and invested in their students' progress.
Accomplishment
Help teachers feel accomplished at work by being transparent about their progress and compensation.
Teacher recruitment website
Ideation
As we sought to learn more about SayABC teachers, we were also thinking of ways to align our messaging on the website with the company's mission to build confidence in every child. From there, I came up with a few wireframes to illustrate potential design solutions:
Teacher recruitment website
Design
Once the information architecture and hierarchy were in place, I began exploring different visual treatments for the website, keeping SayABC's brand identity in mind.
While the project was put on hold shortly after I started creating high-fidelity mockups of the proposed design, it gave me valuable insight into the attitudes and experiences of teachers working with SayABC, which would go on to inform my approach for other projects.
Teacher's portal
When I joined, SayABC was still in the midst of developing its teacher's portal – a desktop client for teachers to conduct and review their lessons. I was heavily involved in the product team's agile development process for this project, where I helped to design and deliver high-priority features for teachers.
Teacher's portal
Research
In order to perform well on the job and provide students with a quality learning experience, teachers need to be able to prepare for their lessons effectively. Working with a product manager and UX designer in my team, we looked into existing user feedback and found that some of the concerns teachers had while preparing for a lesson include:
- Familiarising themselves with the teaching materials and syllabus
- Checking their network status and resolving any technical issues faced
- Understanding the skill levels of their students
Teacher's portal
Ideation
To help teachers prepare for their lessons, we decided to create a Lesson Preparation page that they would land on before each lesson. It was fast to build given the time constraints of the project, and provided a starting point for our team to consider the ways in which the teacher's portal could scale. I came up with some wireframes to explore how the different types of information we wanted to provide to teachers could be organised on the page.
After several iterations, we landed on a design that aimed to be as self-explanatory as possible. At a glance, we wanted to help teachers understand each student's status and past performance. We also simplified the network quality check as much as possible, providing suggestions to improve it only when needed.
While we wanted to help teachers quickly complete their feedback, we also needed to balance efficiency with feedback quality. We worked across teams to develop more specific and useful metrics for call quality that would help our engineering team remedy issues more effectively.
Teacher's portal
Design
Preparing for an upcoming lesson
Teachers have easy access to everything they need to do before their upcoming lesson – go through lesson materials, review their students' performance, ensure that they have ample time to prepare for class, and check their network connection.
Troubleshooting network issues
Issues with network quality are promptly highlighted, with actionable steps and a downloadable report to help teachers resolve them.
Evaluating student performance
After each lesson, teachers are able to give quick and timely feedback to students on their performance, and follow up later if needed.
Evaluating classroom experience
To make the post-lesson experience more meaningful for teachers, they can also provide their feedback on the call quality of the classroom. By learning more about what went well and what didn't, we would be able to improve the portal to serve them better in the long term.
Redesigned teacher's portal
Although we were actively rolling out new features to support teachers in their work, the existing teacher's portal was a lightweight MVP that we knew wouldn't scale as the scope of the project expanded. Working closely with my team, I gathered requirements, conducted research and created wireframes to illustrate potential design solutions for a larger-scale refresh of the teacher's portal.
Redesigned teacher's portal
Research
Understanding the teacher's journey
Together with another designer in my team, we conducted qualitative interviews with 7 SayABC teachers. We wanted to have a holistic understanding of their journey with SayABC – from applying to become a teacher, to interviewing for the job, to teaching their classes and interacting with the SayABC support team. We also wanted to better understand how they used the existing portal and what pain points they experienced.
Based on the interviews, we grouped the insights into the following themes:
Logistics
Teachers were unclear about their logistical matters like salary, career progression, and knowing how many hours had been taught so far.
Communication
Language and cultural barriers between teachers and the SayABC teacher management team.
Class preparation
Technical bugs in the portal and timing issues with the curriculum.
Feedback
Lack of feedback for teachers on their classes.
Classroom experience
Technical issues and bugs with the classroom.
Curriculum
Some students did not fit the curriculum level that was being taught.
Evaluating the current situation
Besides talking to teachers, we also did a cognitive walkthrough of the existing teacher portal to identify areas of improvement in the product, which were then validated through our interviews. Some ideas include easier class scheduling and communication with the teacher management team.
Scoping the area of focus
Making teachers feel like they are building a fruitful career with SayABC is a key part of empowering them to be educators. Since we had already rolled out new features to help teachers prepare for classes and troubleshoot technical issues with the classroom, we decided to focus on providing teachers with an overall account of the progress they have made as a teacher with SayABC, including the classes they have taught and income they have earned. The aim was to motivate them and help them feel more connected to their work.
Redesigned teacher's portal
Ideation
With the different types of information that teachers needed on the job, we decided to redesign the portal as a dashboard, where information could be organised in order of importance and urgency.
The dashboard would be the first thing that teachers see when they launch the portal. It gives them a bird's eye view of their upcoming classes, important tasks to do, salary and communications from teacher management. Teachers would also no longer need to log in to the SayABC website to do things like sign up for classes.
From our research, we found that there was also a sizeable group of teachers who were interested in turning online teaching into a profession. Thinking about how we could help to foster a sense of career progression on the portal, we came up with speculative wireframes of an Income page to give teachers an overview of how their income earned and hours taught have trended over time.
The My Classes page offered teachers a view of the classes they have completed, did not attend, or are upcoming. They can also give feedback to their students for each class and mark attendance. Since this page had already been built into the desktop client, we decided to retain the information architecture of the existing design to make the redesigned portal easier to learn to use.
Redesigned teacher's portal
Design
By the time we completed the initial wireframes of the redesigned portal, my internship had ended. Another UI designer in our team picked up where we left off, working through at least two more iterations before the redesign officially went live in 2018. Here are some screenshots of the launched design:
Reflections
During my 5 months at VIPKID, I jumped off the deep end and immersed myself in the experience of working in a fast-paced, high-growth technology startup. With the guidance of another designer in my team, we worked within prevailing constraints to advocate for the role of design in the ideation of new product features, and introduced new methods to help our team adopt a more user-centric approach towards product development.
While we had access to a wide range of data about our users which definitely helped me in my projects, if I had the time and resources, I would have loved to further refine my ideas by interviewing more users and conducting card sorts and usability tests on the wireframes and prototypes I created. Regardless, I was glad to have been able to speak with teachers to learn about their work and how they used our product, to come up with fresh ideas to improve their experience.
