Quick guide
YUYAN is an interactive and efficient platform designed for both students and teachers to conduct online courses seamlessly.
In a rapidly changing world, the way we live is evolving at an unprecedented pace. The COVID-19 pandemic has significantly transformed how we learn, leading to an increased demand for online education. However, the shift to online learning has brought about numerous challenges and obstacles.
The goal of this project is to address the difficulties faced by students and teachers in online learning environments and improve the overall effectiveness of virtual education by fostering a more interactive learning experience.
This project was a design challenge during the pandemic. Initially, I conducted interviews with students and teachers in my network, and distributed online surveys to gather insights about the pain points of online teaching and learning. These insights helped me shape the project’s direction, supported by competitive analysis and user flow diagrams to establish the product structure and design plan. Throughout the process, I also incorporated usability testing to gather feedback and refine the user experience.
As a teacher myself during the pandemic, I continuously "observed" the challenges faced by students and colleagues in online courses. Every comment made by them potentially highlighted a pain point in online learning.
I conducted interviews with five students and three teachers, and distributed over 20 surveys to collect data on the biggest issues and challenges students encountered during online learning.
In my school, we rely on Google Classroom for managing assignments and exams. However, many students still find the submission process complicated and struggle to locate the upload feature.
Here’s a screenshot from one of my classes where students actively sent messages and stickers in the chatroom. This reflects their desire for interaction, but for less interactive teachers, this behavior might be seen as a sign of inattention.
After classes, neither students nor teachers were able to effectively track learning outcomes, as assignments and exams were not systematised in the online setting.
Based on the initial research, I organised the collected information into a journey map, dividing the process into three phases: decision-making, experience, and feedback. For each phase, I analysed potential pain points and identified opportunities for improvement. This approach not only deepened my understanding of user needs but also provided strong support for subsequent design decisions, ultimately enhancing the overall user experience.
I then created two personas based on the feedback from interviews—one for students and one for teachers. These personas outlined their goals and pain points, helping us better understand our target users and guiding our design strategy.
Once the user goals and pain points were defined, I transformed the problems into "How Might We" (HMW) questions to generate potential solutions:
I studied existing online education platforms to explore possible solutions and conducted a SWOT analysis to identify opportunities for improvement and the strengths of these platforms.
With the "How Might We" (HMW) questions, my team and I brainstormed possible solutions. Here are the optimization directions we want to focus on
I first defined the objectives that "students" and "teachers" aim to accomplish on the platform. By analysing these scenarios, I was able to create effective flowcharts, ensuring that the processes aligned with users' goals and needs.
Through mapping the user journey and analysing opportunities, I gathered useful insights, which helped me identify where to focus efforts and further improve the design. Based on the user flows and previous research, it was time to begin sketching wireframes for key pages. While creating the wireframes, I ensured that the page content and functionalities were user-centric, usable, and focused on achieving the users' goals.
I used "Maze" to conduct usability testing with eight users, focusing on whether they could smoothly complete flows such as "scheduling a teacher" and "starting a test." Feedback from these tests was then used to optimise the design.
After extensive exploration and research, I will now showcase the final design, focusing on introducing each feature. I hope that the final design concept can have a real impact, improving the issues users face during the online learning process.
Below is the summary of my UI design, including: colours, typography, component systems, and the concept behind the logo design. As an educational product, I also took accessibility into account to make the platform more user-friendly, ensuring that the colour contrast meets the needs of a wider range of users.
