Building Blocks is a web platform aimed at helping Japanese primary school students enhance their English language skills. It offers a web platform for classroom learning while focusing on clarifying the most effective methods for students to learn a foreign language at school. This approach aims to enhance their academic performance.
The University of Hong Kong
Education Web Platform
Entire product design from research to conception, visualization and testing
3 months
(Jul 2022 – Oct 2022)
To gain deeper insights into how both students and teachers were navigating and experiencing our platform, we conducted video interviews with five parents, inviting their children, as well as three teachers, to participate as users. During these sessions, we had them engage with our existing prototypes, which included English language tests and test creation features, while we observed their interactions.
We posed questions to the participants to better understand their experiences and learning outcomes, focusing on their impressions of the platform and its effectiveness in teaching English vocabulary and pronunciation.
The child demonstrated a strong tendency to interact with all the choices and buttons displayed on the screen, with a particular focus on buttons with sound.
Upon answering a question, participants showed a preference for swiftly moving to the next question without taking time to identify the correct response.
Participants struggled to understand the mechanics of certain test types.
Several children expressed frustration when encountering a large "X" symbol signifying an incorrect answer.
They conveyed a lack of interest in replaying the test and a noticeable absence of excitement during the testing session.
Teachers faced difficulties in creating tests due to unclear guidelines and platform settings, particularly challenging for first-time users.
Teachers had to manually record phonics pronunciation tracks, resulting in an increased workload.
Participants reported that the absence of a preview mode and unclear file upload information made it challenging to determine which files were uploaded.
We conducted a competitive analysis workshop with the team to review other similar web experiences, prefaced with some questions.
Learning platforms like Duolingo Kids and Prodigy engage their users through interactive quizzes, providing rewards, customizable avatars, and a diverse collection of subjects that motivate consistent learning. They feature a strong theme and unique characters, creating a sense of immersion. Additionally, they offer an intuitive and child-friendly interface.
We learned that our project should consider creating a captivating theme to encourage user interaction. This can be achieved using animated characters and transitions. Moreover, we should prioritize offering a user-friendly interface with minimal text to ensure accessibility, even for the youngest learners.
The current solutions face issues related to user engagement, learning outcomes, and usability for both students and teachers.
The web platform should offer engaging content that captivates the attention of young learners, making learning a fun and motivating experience. The user interfaces should be intuitive, with clear navigation, ensuring that children and teachers can use the platform independently.
Based on our research and findings, we have identified the key features of the new platform design. With the audience segments in mind, our goal was to create impact and value for the students and teachers who engage with the platform according to their specific needs.
Provide various types of quizzes to motivate students and make the learning process fun and enjoyable
Introduce a child-friendly character and theme that guides students through quizzes, providing encouragement and a sense of immersion
Reveal answers through interactive prompts that include multimedia elements such as animations, videos, and sound to captivate students' attention
Provide a customizable feature that allows teachers to tailor messages based on students' scores,ensuring a personalized and motivating learning experience
Offer progress-tracking tools for both students and teachers, allowing them to monitor performance and identify areas for improvement
Offer a feature that automatically plays phonics and vocabulary pronunciations, simplifying test creation
With our goals, user needs, and features defined, we were ready to create wireframes. We designed a new solution that gives a clearer understanding of quiz types and enhances the overall usability of the platform, providing users with a more intuitive experience.
In the wireframing stage, I explored various concepts for indicating the progression of attempts in the quiz, ensuring that students were informed about their status. Given the five stages for attempts, I brainstormed different visual approaches.
The initial idea involved using icons to symbolize the five attempts, with each icon disappearing upon an incorrect answer.
The second concept utilized color changes, employing gradients to illustrate the five stages.
The third concept featured a heart symbol, which started as full and gradually fading with each incorrect answer.
Finally, I decided to go with the fourth version, which involved designing character animations that expressed the attempts and stages through movements and emotional expressions.
On the quiz creation page, for the Drag and Drop quiz type, teachers can input words and select the missing letter(s) within those words to form questions
In the previous version, there was some confusion due to unfamiliar terms like"add note" and "add dummy note."
Version 1 addressed this issue by renaming buttons and revising the layout to enhance intuitiveness. This allowed teachers to input the question words effortlessly and specify which letters to hide within the question.
Version 2 further improved the user experience. After entering the question words, a scroll bar would appear with selectable letters to indicate missing ones. This scrollable range made the process more straightforward, allowing teachers to preview their selections in real time while scrolling.
In another quiz type called "Drag and Drop Bucket," teachers can create matching phonics word questions. Teachers have the flexibility to input multiple question words, define the buckets, and specify the choices of answers.
In the previous version, there was some confusion regarding the placement of question words, answer choices, and the process of selecting sound files for each word.
Versions 1 and 2 addressed this issue by providing a clearer layout, including separate sections for the question words and answer choices within each bucket. Additionally, teachers could add more than one choice for each bucket, and an improved button made uploading sound files more straightforward.
Version 3 further simplified and enhanced flexibility by allowing the selection of the number of buckets and introducing icons to streamline the layout.
The visual language of building blocks utilizers colorful, cheerful and child-friendly art. With the platform rebrand, we wanted to reflect that identity and bring the theme to life. I create global web styles for colors, typography, UI, and reusable components.
The updated colors and UI gave the learning platform a fresh new and vibrant feel, designed to attract children's attention.
Allow me to introduce our new character, Bibu-Kun, the dancing robot. We enjoyed developing this character and integrating him into the platform, offering a better experience for our users. It was important to captivate children’s interest, motivating them to participate patiently and broaden their understanding.
I collaborated closely with our engineers to support development and incorporate animations to make the site come alive.
Dashboard
Quiz Info
Quiz Type
Result
Question Review
Questios Review
Question Review
Participant Status
Quiz Overview for teachers
Participant Performance
We successfully launched the redesigned learning platform to enhance the English language learning experience for Japanese primary school students and streamline teacher test creation.
Here are some key highlights:
Tools used:
