UX/UI, Research, Web Platform Design

Building Blocks

Support students in developing foreign language skills


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

My Role

Entire product design from research to conception, visualization and testing

Project Time

3 months
(Jul 2022 – Oct 2022)



  • Enhance Student Learning
    Enhance the English language learning experience for higher engagement and effective outcomes
  • Simplify Test Creation
    Streamline teacher test creation and adapt content to different curricula
  • Expand Adoption
    Extend platform adoption to more primary schools in Japan


  • Gamification Complexity
    Design an intuitive interface for diverse quiz types
  • Tight Timeframe
    Develop and refine the platform within a limited schedule
  • Engagement Enhancement
    Enhance gamification and engagement strategies for effective language learning

My Role

  • Main UI/UX Designer
  • Created wireframes and prototypes
  • Worked closely with the development team to ensure the usability and feasibility
  • Collaborated with engineers and product managers

User Interviews

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.

Findings from Students:

Finding # 1

Exploratory Behavior

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.

Finding # 2

Challenges in Achieving Learning Outcomes

Upon answering a question, participants showed a preference for swiftly moving to the next question without taking time to identify the correct response.

Finding # 3

Unclear Guidance

Participants struggled to understand the mechanics of certain test types.

Finding # 4

Frustration with Errors

Several children expressed frustration when encountering a large "X" symbol signifying an incorrect answer.

Finding # 5

Lack of Motivation

They conveyed a lack of interest in replaying the test and a noticeable absence of excitement during the testing session.

Findings from Teachers:

Finding # 1

Difficulty in Test Creation

Teachers faced difficulties in creating tests due to unclear guidelines and platform settings, particularly challenging for first-time users.

Finding # 2

Additional Workload

Teachers had to manually record phonics pronunciation tracks, resulting in an increased workload.

Finding # 3

Lack of Preview Mode and Guidance

Participants reported that the absence of a preview mode and unclear file upload information made it challenging to determine which files were uploaded.

Competitors Analysis Workshop


We conducted a competitive analysis workshop with the team to review other similar web experiences, prefaced with some questions.

  • What features or content do they provide to keep users interested?
  • How does our competitors engage users?
  • Is there anything unclear or confusing about the platform?
  • What are the unique features or aspects that set our competitors apart from others?

Key Takeaways

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.


Problem Statement

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.

Key Features & User Goals

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

Interactive Characters

Introduce a child-friendly character and theme that guides students through quizzes, providing encouragement and a sense of immersion

Interactive Prompt

Reveal answers through interactive prompts that include multimedia elements such as animations, videos, and sound to captivate students' attention

Encouraging Content

Provide a customizable feature that allows teachers to tailor messages based on students' scores,ensuring a personalized and motivating learning experience

Progress Tracking

Offer progress-tracking tools for both students and teachers, allowing them to monitor performance and identify areas for improvement

Automatic Pronunciation Playback

Offer a feature that automatically plays phonics and vocabulary pronunciations, simplifying test creation

Front End

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.

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.


Results and takeaways

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:

  • Successfully demonstrated the platform in a new primary school
  • Accomplished our goal of increasing adoption by other primary schools across Japan
  • Increased student engagement and satisfaction by 43%
  • Excited team members and stakeholders about the results

Thanks for reading!

Tools used:

  • Figma and InVision
  • Adobe CC Illustrator, Photoshop, and After Effects