top of page

Learner Computer Interaction 

My understanding of Learner and Computer Interaction and UX design is rooted in a robust foundation of design principles and Human-Computer Interaction (HCI) concepts. I view design as a holistic approach that prioritizes the user's needs and experiences throughout the entire design process, drawing from established frameworks like Norman's "Design of Everyday Things". At its core, design is about creating intuitive, efficient, and enjoyable interactions, emphasizing usability, accessibility, and desirability. This has become an integral part of my design process, influencing everything from instructional materials to web application design.

​​​

Luminos Canvas

​

Luminos Canvas aims to revolutionize learning by developing an intelligent and interactive web platform. The web application provides a learning playground brimming with engaging online experiences. I streamline the deployment process using Google Cloud Run, which allows me to effortlessly run the containerized application in a fully managed environment. Docker plays a crucial role in this by enabling packaging of the Luminos Canvas web application and all its dependencies into a portable and consistent image, ensuring reliable execution across different environments within Cloud Run.​

​​​​

Screenshot 2025-04-28 at 11.34.50 AM.png

Alt text: Snapshots of the website 

Echo Flow

 

Echo Flow is an interactive web application designed to support intermediate and advanced learners of Chinese through personalized storytelling, grounded in current theories of second language acquisition (SLA). Echoing research on input hypothesis (Krashen, 1985) and interactionist approaches, the platform empowers users to build language proficiency by actively co-constructing stories in Chinese. Learners input narrative elements—such as setting, characters, and plot direction—and the system, powered by Gemini AI, generates story segments matched to the user’s HSK level. This multimodal, choice-driven format supports reading comprehension, vocabulary development, and grammar acquisition within meaningful and authentic contexts.

​

Th application goes beyond traditional reading materials by offering access to culturally rich, customizable content often unavailable in standard textbooks. Whether users explore a weekend in futuristic Shanghai or navigate a historical tale in ancient Chang’an, each narrative is infused with regional vocabulary, idiomatic expressions, and sociocultural references. This aligns with SLA research emphasizing the importance of context and cultural competence in language mastery. By encouraging students to shape the story, Echo Flow fosters deeper engagement, supports narrative thinking, and offers repeated exposure to authentic, level-appropriate input.

 

Crucially, Echo Flow integrates metacognitive learning strategies by guiding users through a structured self- and peer-evaluation process. Learners review AI-generated stories for language accuracy, fluency, and coherence, refining their comprehension and production skills while reflecting critically on grammar and style. This promotes learner autonomy and turns AI into a collaborative writing partner. Through evaluating and revising content, sharing with peers, and reauthoring drafts, students internalize language structures and cultural knowledge in a dynamic, learner-centered environment. EchoFlow transforms reading and writing into a culturally immersive, interactive journey that deepens linguistic and intercultural competence.

 

​

Alt text: Image of Echo Flow application

Pandalingo- an AI Agent

 

Pandalingo offers an engaging approach to learning Chinese characters. Each character is brought to life through dynamic animations, illustrating its formation and stroke order. Users can practice writing characters directly on the platform and utilize the integrated chatbot to delve into the character's meaning, usage, and related information. 

 

Pandalingo's intelligence is amplified by the Chain of Thought (CoT) paradigm, a technique inspired by machine learning's pursuit of interpretable reasoning. When you ask about a Chinese character, Pandalingo doesn't provide an immediate answer. Instead, it internally constructs and then presents a step-by-step thought process. This might involve first identifying the core components of the character, then recalling its historical evolution and related meanings, subsequently illustrating its usage in specific contexts with example sentences, and finally summarizing key takeaways. By explicitly showing this 'chain' of reasoning, Pandalingo offers transparency into how it arrives at its explanations, enabling you to follow its logic and gain a deeper, more structured understanding of the character's intricacies, rather than just receiving a final definition.

 

This project aims to revolutionize second language acquisition by developing an intelligent, gamified web platform for learning Chinese, centered around a friendly AI panda agent. By integrating multimodal learning—chat-based interaction, animated demonstrations of Chinese character writing, and hands-on practice—this platform offers an immersive and engaging educational experience.

 

Guided by design thinking, I began the development process by empathizing with college students learning Chinese, identifying their key challenges: the difficulty of mastering character writing and understanding the cultural context behind the language. Based on these insights, I defined core problem statements and ideated features to address them. These included animation-guided character writing, interactive exercises, and a conversational AI agent capable of answering cultural and linguistic questions. Here is the storyboard for the application.

 

​

​

​​​​

panda_storyboard.png

Alt text: Storyboard of Pandalingo

panda_infographic.png.png

Alt text: Infographic of Pandalingo

At the heart of the platform is the AI panda agent, capable of reasoning, leveraging external tools, and adapting to learners’ needs. It supports a dynamic chat interface where users can explore cultural topics—from Chinese cuisine to pop music—transforming the chatbot into both a tutor and a cultural ambassador. The writing system combines visual, tactile, and interactive elements, supporting multimodal learning styles and reinforcing character recognition and memorization.

 

The final product blends animation, interactive exercises and AI-assisted guidance into a cohesive gamified experience. College students who tested the platform praised its intuitive design, the engaging nature of the panda agent, and the effectiveness of its multimodal learning approach in deepening their understanding of the Chinese language and culture.

​

​​​​

​Pearl Chat

 

PearlChat is a web application that invites language learners around the world to collect pearls of experience—one conversation at a time. Every new chat begins with the opening of a digital shell, symbolizing both a fresh start and the gentle unfolding of one’s language ability. As users engage in guided, interactive dialogue, they gather these "pearls"—moments of insight, fluency, and cultural connection. At its heart, PearlChat is not just about practicing a language—it's about becoming more open, expressive, and globally connected through conversation.

 

Rooted in design thinking and modern second language acquisition (SLA) theory, PearlChat combines intuitive customization with the power of large language models (LLMs) to simulate natural conversations with native speakers of many world languages. Learners can tailor their ideal chat partner by choosing interests, personality traits, cultural backgrounds, and language proficiency levels. Whether exploring Spanish, Japanese, Arabic, or any other target language, users receive meaningful input and are encouraged to produce personalized, context-rich output. Cultural tips, language feedback, and adaptable scaffolding help reinforce learning while keeping users engaged and supported.

 

What makes PearlChat especially powerful is its thoughtful design for introverts and reflective learners. The app’s calm interface, flexible pacing, and non-judgmental AI partners provide a safe space to "come out of your shell" at your own speed. The shell icon—gracefully framing the app’s logo—is more than a symbol; it's an invitation to self-expression, to explore unfamiliar cultures, and to grow in confidence through private yet profound conversations. In PearlChat, every sentence becomes a stepping stone toward fluency and every chat an opportunity to collect another pearl of language and understanding.

​

*Note: PearlChat currently supports Chinese only, but development is underway to expand into French, Spanish, Japanese, Korean, and more languages soon.

​​​​

Alt text: Image of PearlChat Logo

​ZoomEDU project

​

For the final project in Design of the Learner Experience (Summer 2021), Shelby and I created a product called ZoomEDU. I spearheaded key phases of a UX design project focused on enhancing technology-supported learning. "ZoomEDU," our proposed product for a fictitious Zoom client, aimed to address the evolving needs of K-12 and higher education users in distance learning environments. This initiative centered on improving teaching effectiveness, learning outcomes, and student engagement through a user-centered redesign of the Zoom platform. We leveraged UX design methodologies to create a product that focused on the user's journey, and aimed to improve the overall learning experience.

​

Alt text: UX Design course project of ZoomEDU

The ZoomEDU project showcased my ability to apply UX principles in a collaborative, iterative design process. Recognizing Zoom's post-pandemic prominence in education, I initiated a brainstorming session to explore opportunities for platform improvement, leading to the project's inception. Our naming of "ZoomEDU" set the stage for our user-centered approach.

 

We began with a thorough user research phase, conducting user analysis to understand the diverse needs of faculty/teachers and students across K-12 and higher education. This data was synthesized into an affinity diagram, facilitating a shared understanding of user pain points and needs. I actively listened and incorporated feedback from my colleagues(users), notably Shelby's suggestion to develop "Agenda" and "Dashboard" features, demonstrating a commitment to collaborative design and user-driven innovation. My leadership extended to information architecture, sketching, modeling, and wireframe creation, ensuring a clear and intuitive user flow. I applied principles from the UX design pyramid, focusing on ecological, interactional, and emotional design. For example, the "color therapy" feature addressed users' emotional needs by allowing personalized home screen customization, demonstrating a holistic approach to user experience.

 

The project's success underscores the effectiveness of our user-centered design process. This project reinforced the importance of empathy, collaboration, and iterative design in creating impactful learning experiences, and I will continue to apply these principles in my future endeavors.​

Reference:

Hasso Plattner Institute of Design at Stanford University. (n.d.). Design thinking bootleg. https://dschool.stanford.edu/resources/design-thinking-bootleg

Krashen, S. D. (1985). The Input Hypothesis: Issues and Implications. New York: Longman.

Norman, D. A. (2013). The design of everyday things: Revised and expanded edition. Basic books.

​​​​

bottom of page