Bilingo is an online education platform that includes a number of contents and functions such as live classes, communication community, mini-games and online videos.
User research, Information rchitecture design, User flow design, Wireframe design, Interaction prototyping, UI design, UX copywriting, collaboration with development team.
Since the product had a very rudimentary statistics setup before, only some simple analysis could be done. Mainly including PV and UV, visit frequency, single visit page depth, user registration number share, etc..
The difficulty of this part is that we have a very thorough revision, and there is no way to conduct accurate and in-depth research on users for a few specific functions in a short period of time. Therefore, we finally decided to conduct interviews, which were based on 4 subjective questions.
We recorded and extracted some of the more important user feedback:
| Feedback Highlights | Number of people |
|---|---|
| When I come into the site, I see too many buttons and navigation, and I don't know what all this site can do. It would be better to have a clearer guide | 6 interviewees |
| I can't understand what the teacher is saying, it would be nice to have key vocabulary, course outline, etc. | 5 interviewees |
| The interface looks too outdated | 5 interviewees |
| Teachers cannot interact more with students | 2 teachers |
| Classes are mostly attended by old students, new students are not retained | 2 teachers |
| Students who study English have little use for the Chinese learning modules on the site, and vice versa | 6 interviewees |
| Having a conversation with an experienced Native speaker was the main attraction for me | 7 interviewees |
| In the app I mainly just watch live, other functions never used | 6 interviewees |
On the one hand, we created a maintainable competition database to collect as many similar competing products on the market as possible. On the other hand, we conducted more in-depth research on the target users, highlights and user feedback pain points for the 3 main competing products.
After research and discussion, we basically had a more practical idea of the existing platform's problems, users' needs and solutions, so we decided to design a solution based on several main problems.
In the previous research, we learnt that users find the platform rather confusing, and the target users of Chinese and English learning are almost completely different. So we divided the Chinese learning and English learning into two platforms, and redesigned the information architecture of the platform, centering on the courses, adding a large number of course displays in the station, and putting other functions in the Footer section of the website as auxiliary content.
In the previous research, users also feedback that the App side is mainly used for taking classes. Therefore, in this redesign, we have streamlined 90% of the functions and only kept the main functions of course display and taking class, while expanding the instant messaging function for communication between teachers and students.
The previous website had an older visual style, with a scattered color palette and design format. Therefore, in the new version of the adjustment, we decided to redesign the visual style of the whole website and app to be more close to the current trend of minimalism.
The first page of the previous website was many buttons and course card, lacking important information. Therefore, we decided to use the first page as a landing page to place the main information, supplemented by large images and videos to increase the visual impact. In addition, we added a "Course System" page to describe the content of our courses. This will also increase the SEO weight of the website in the target area.
In terms of business, public courses were changed from free to paid, while VIP private courses were also adjusted compared to the previous ones. Therefore, it was necessary to improve the process of both types of courses, taking into account the original user habits.：
Public courses：We need to protect the previous users' habit of taking live classes for free, while taking into account the fees. Therefore：
| Ongoing Public Courses | Finished Public Courses |
|---|---|
| Users can follow the live classes for free after registration, but they need to pay for the whole course to watch the previous videos. | We provide 1 free lesson trial, and they need to pay for the whole course to watch the videos. |
VIP private courses：In the original user flow, users were unable to audition and schedule according to their own time. Therefore, we added a trial function to the new flow, and a time booking function after purchasing lessons.
In the previous website, there were only recorded videos of the teacher for each lesson, no review and homework. Therefore, in the revision, we added 5 key features for each lesson, such as key vocabulary, lesson outline, supplementary materials, error correction, homework, and class chat records, and opened up the lesson download.
In the previous website, students could not manage their own courses or check their schedules. In the new version, "Student Center" has been added for students to manage their class schedules, courses, assignments and orders; We also added English level test, which is convenient for students to track their English level.
The previous website did not provide instant messaging, students and teachers could only contact each other through live streaming or sending emails. In the new version, we added a simple IM system on the web side, so that users can communicate directly with teachers or customer service online. In the App, we have enhanced the IM function by adding a group chat for each teacher's course, and students can also chat directly with their teachers who are enrolled in the course.
In addition to IM instant messaging, teacher interaction has been added within the course's discussion, evaluation, and homework modules.
There were many design assets in this project, including information architecture, user flows, wireframes, interface visual design, design system, high-fidelity prototypes, etc.
The user flow is based on the logic of business, and there are a total of 27 user flows in the web app and mobile app, which mainly include important business logic process such as course creation and purchase, class and homework completion, and course evaluation etc.
The wirefram includes 12 functions such as public courses, VIP courses, account system, message and notification, course reservation and purchase, teacher application; schedule management, course management, homework management, order management, evaluation management and profile management.
For the visual design part of the interface, I first created a new color scheme and visual style, adhered to the principle of component-based design, carried out the visual design of each page according to the wireframe, and gradually built the Design System in the process.
Throughout the design process, especially in the Solution part, we referred to the design sprints process and simplified it, and it went relatively smoothly.
Some members wanted to keep the original various courses and functions, as well as the Chinese learning module. However, the research results and the actual experience told us that there was no point in doing so, and the product development should be specialized first and then expanded.
Finally, we decided to temporarily put the other functions in the Footer section as links, and then gradually optimize them later.