top of page

Background

Children of immigrants living outside their home countries often lack accessible tools to learn their native/mother language. Some American-born Chinese (ABC) individuals approached me with a request to create a mobile app that could assist them in practicing Chinese characters. Many ABC individuals can only speak simple Chinese and do not possess reading and writing skills. As they grow older, they develop an increasing interest in their language and culture. In recent years, the number of foreign individuals aspiring to learn Chinese has also been steadily rising.

To address this need, I designed the "Motherland" mobile app, catering to Chinese speakers who wish to enhance their reading and writing proficiency in Chinese characters. The app serves as a valuable resource for individuals seeking to deepen their connection with their language and heritage.

Probblem & Scope

Remembering characters becomes challenging if individuals don't practice regularly during their study sessions. Moreover, without proper guidance on character stroke order, many people end up writing characters incorrectly. Additionally, with the demands of daily life, it's easy for individuals to forget to practice regularly.

To alleviate the pressure and foster a relaxed study environment, the "Motherland" app adopts a specific approach. During each study session, the app randomly selects four new characters for users to practice, followed by a test. To aid in character writing, a trace feature demonstrates the correct stroke order. Furthermore, the app includes push notifications to remind users to engage in their language learning activities regularly. This way, users can efficiently practice and retain their Chinese character knowledge with ease.

My Role

• Research
• UI/UX design

 

I worked with this project as a sole designer. Below are the process of research, wireframe, mockup and prototype directions.

 

*Upon undertaking this project, I initiated meetings with stakeholders to gain a comprehensive understanding of their desired features and functionalities, as well as their goals for each practice session. Additionally, I conducted interviews with several American-born Chinese (ABCs) to identify the current challenges they encountered while studying Chinese. Throughout the design process, I rigorously tested each step, from wireframes to the final deliverable, collaborating with individuals to enhance the app's workflow, functionalities, and overall desirability.

 

Market Research

The Chinese American community holds the distinction of being the largest overseas Chinese community outside Asia. Among the Chinese diaspora, it stands as the third largest, trailing behind the Chinese communities in Thailand and Malaysia. According to the 2016 Community Survey of the US Census, the estimated population of Chinese Americans of one or more races is 5,081,682. Additionally, Chinese Americans constitute the largest ethnic group within the Asian American population, accounting for 25.9% as of 2010.

Notably, there is a growing trend of foreigners expressing interest in learning to read and write Chinese.

Chinese_Population_USA.jpg

Personas

persona.png

Competitive Analysis

During my research, I explored and tested several other mobile apps with similar functionalities. However, I found that the majority of these apps were designed based on the Chinese education method, making them less suitable for individuals seeking to learn Chinese as a second language. Additionally, many of these apps were overloaded with features, leading to a cluttered user experience. Furthermore, their visual design appeared outdated, and the accessibility/navigation aspects required significant improvement.

competitive-chart.png

User Journey Map

Upon conversing with individuals aged 15 to 30, I discovered that they required a few minutes of writing practice to effectively remember characters. Thus, during the initial design stage, I developed an interface that enables users to write or trace new characters a total of 5 times each. This approach aims to enhance character retention and facilitate effective language learning.

user_journey.jpg

User Flows and Sitemap

After collecting information from the user journey to discern the appropriate grouping and flow that resonates with the user, I gained a comprehensive understanding of how to strategically arrange the user flows and sitemap. The process commenced by envisioning the necessary screens and organizing them in an organizational flowchart.

User Flows

user flows.png

Sitemap

sitemap.png

Sketches and Wireframes

After exploring some of the ideas through sketches, I transitioned to the wireframing process, where I crafted interface mockups. The wireframes were intentionally designed to maintain a simple appearance, ensuring that the core functionality and flow of the app remain the primary focus.

draft-1-2.jpg
wireframe-1.png
draft-3.jpg

Testing and Design Revisions

While testing the prototype with users, one individual highlighted that it might not be necessary to mandate writing characters five times each. As some characters are quite simple and do not require repeated practice, and others might need more time to remember, users should have the flexibility to decide how many times they wish to write. In response to this valuable feedback, I made adjustments to the previous wireframe. I added an eraser on the top right corner, allowing users to erase their writing and repeat their practice as many times as they desire, providing them with greater control over their learning experience.

wireframe-2.png
before_after.png

Before

After

UI DESIGN AND HI-FI PROTOTYPE

This app is specifically geared towards young people, so the UI design aligns with contemporary trends. Its main focus is on practicing a few new characters and reviewing some additional ones during each session. To ensure a simple and clear user experience, I aimed to address potential issues such as users not knowing the stroke order or forgetting how to write characters during tests. To tackle this, I implemented trace and hint features in both the practice and test sections, providing valuable assistance to users as they engage with the app.

 

UI design.png
sign in.png
practice_test_v2.png
preview_animation.gif
prototype_animation.gif

WHAT SHOULD DO NEXT?

Frequently, people come across characters they recognize but may not know their meaning or pronunciation. To address this, the next step involves incorporating search by pinyin and search by character features into the app. These additions will enhance the app's functionality and assist users in gaining a deeper understanding of the characters they encounter.

 

 

 

trace_example_animation_frames.gif

MOBILE APP -
MOTHERLAND
 

LEARN CHINESE CHARACTERS

UX/UI Design

bottom of page