Visual Dictionary of Chinese Cultural Icons App Design
iDict
Background
Introduction
The project is to design a searching tool for young mandarin learners, including a mobile app and a tablet app. Specifically, it is a learning dictionary to introduce Chinese cultural icons to help second-generation Chinese immigrants get equal access to bite-size Chinese reading material of each cultural icon. Therefore, they can dive into Chinese culture and traditions, as well as build up cultural understanding identifying with their roots. At the same time, establish their appreciation and respect for diverse cultures.
Since I targeted the younger age group, I studied the essentials of designing for children in terms of accessibility and usability while pursuing an Intuition design solution that follows fundamental psychological principles. I would like to deliver a usable, aesthetically pleasing, delightful user experience, which is also my definition of a good UX.
-
Singularity Lab, CITIC Press Group
-
Roadmap
Research
Ideation
Design
Test
The Product
Get to know Chinese cultural icons with a multi-media dictionary filled with authentic Chinese reading materials.
This dictionary focuses on introducing Chinese cultural icons because these names or proper nouns are often not included in dictionaries and are not easy to find. Unlike ordinary Chinese and English dictionaries, it will bring a multi-media experience to aid memory and serve as a supplemental tool for all Chinese learning courses.
Overview
Industry
E-learning, Language learning, Book Reading, Search Tool
Tools
Adobe XD, Figma, Procreate, Photoshop, Illustrator
Challenge
Create a roadmap to figure out the clear direction of the product;
Reshape digital dictionaries' searching and reading experience for young learners.
Drive curiosity and stimulate learning motivation on the one hand, and ensure appropriate screen time to protect vision health on the other hand.
Duration
September 2021 - December 2021, 120hours ( 80 hours on basic contents and illustration)
Goals
Build a visual dictionary of Chinese cultural icons to support the Chinese language and culture learning for young learners who would like to step further.
Team/Role
Product Designer
Planned and facilitated user surveys and interviews. Identified areas of opportunities that can provide the most user-centric values.
Serve as only designer responsible for UI / UX design, including research, Visual Design, Illustrations, Interaction Design, Usability Testing, and an impactful user interface.
Objective
Design a dedicated mobile app and tablet app.
Basic contents and illustration
Formular
Motion graphic
animation
High fidelity
Goal Statement:
The product will help young learners to search for Chinese historical and cultural figures through multimedia presentations to aid learners’ understanding and memory. This will improve their appreciation and inculcate respect for diverse cultures.
Problem Statement:
For people learning Chinese as a second language, names of Chinese historical and cultural figures are hurdles while reading. Due to the difficulty of learners with Pinyin, or how to spell out Chinese pronunciation in the Roman alphabet, these Chinese names are difficult to be searched, and even if they are found, learners are easily lost in the overloaded information.
Design Outcome
Research
Learners need an excellent tool, not a new product, to digest more effectively the material they already have.
Goals
What do I want to learn?
Explore learners’ experiences with existing digital tools for studying mandarin. The goal was to determine what opportunities may exist to create new language-learning products.
Methodologies
The survey, Individual interview + observation
User Group
Primary:
Second-generation immigrants growing up in dual language environment from 8 -18 years old. Their Mandarin Chinese reading level should be on intermediate to advanced level.
Secondary:
Young Mandarin Chinese learner studying Chinese as a second language with a basic understanding of elementary Chinese.
Key findings:
Digital product is a supplement to the school curriculum, and parents lead their children to use cell phones and iPads only when they are using fragments of time to study.
Parents mainly rely on school or online Chinese courses for their children's Chinese education, and about 60% of parents are satisfied with the current learning program.
Survey
Key question:
[Digital Products currently use]
What products are you using to learn Chinese?
Are you satisfied with them?
[Study frequency]
How often and how long are they used?
I used Google Survey to create a questionnaire to send to the WeChat community of Chinese parents in my neighborhood to collect user profiles and responses and received a total of 37 responses.
Most common ways to learn Mandarin as second language for second-generation Chinese immigrants.
Secondary Research
Competitor Analysis
Key Findings:
Major products in the market may place too much emphasis on grammar, words, and pronunciation. I identify opportunities to build a product with a focus on reading and podcasts(background listening).
Quotes from Educators
“My children were born in the UK, and I couldn’t find a way to inspire them to learn about their own culture and legacy.”
“I wanted a real reading, something a Chinese kid might read in school or online.”
Conclusion
Providing Chinese reading materials in storytelling and audio materials that use human voices, both fill a gap in the market and meet the needs of learners who would like to take a step further in their learning journey.
Empathy Research
For non-native speakers, searching for Chinese words, especially people’s names, is a troublesome task to do.
I interviewed 3 participants to conduct foundational studies on how users read stories. They all already know basic Chinese and can read anything under HSK 5. One high school student, and 2 primary school students are guided by their parents.
-
Empathize with users；
Understand their needs；
Find out the pain points of users；
Inspire new design directions.
-
[User Needs]
What tools do you need when reading stories in Chinese?
What are users’ current pain points?
[User Behaviors]
How long do you take to read materials in Chinese?
How do you interact with existing digital products?
[What are digital tools good and bad for]
How do you feel about the existing products?
Do users really need another language learning product?
Key Findings:
1. Each learning session should be shorter than 15 min;
2. The most valuable tools are sentence-by-sentence translation and dictionaries when reading Chinese texts.
Pain Points:
1. Articles often contain historical and cultural figures that cannot be looked up in a dictionary or won't provide sufficient information. Besides, these names are hard to search for those who study mandarin as a second language.
2. It is hard to find bite-size, well-graded, authentic Chinese reading material.
3. There is no way to accomplish the task of finding a Chinese mandarin phrase when people know nothing about it. Because searching for an English explanation of Chinese requires knowing its meaning or pronunciation.
Conclusion:
After research, what surprises me is that people don't need a new product for learning Chinese. Instead, they need an excellent aid tool to better digest the material they already have. In addition, comprehensive research has found that users need a good search tool to combine with suitable reading materials.
Second, I didn't expect to find that for non-native speakers, searching for Chinese words, especially people's names, is such a difficult thing to do. Many people who speak Chinese as a second language can listen and speak but are unfamiliar with Chinese characters. So typing Chinese characters into an electronic device is the first step that prevents them from searching.
How do I narrow down the scope of the project during research?
Persona
Willian is a 16 years old mandarin learner who needs a tool to search the names of Chinese historical and cultural figures because This information cannot be easily found even with search tools like dictionaries, Wikipedia, etc.
Ideation
Goal Statement
Search
POV: Difficulty in searching for Chinese names
HMW: How might we ensure users find their target of cultural figures efficiently?
POV: Problem on inputting searching target
HMW: How might we design a search tool to help people who cannot input the characters they would like to search?
Read
POV: Hinders of the reading materials
HMW: How might we ensure users that the selection of reading materials is right for them and worth their time to read?
POV: Reading barriers
HMW: How might we help users better digest what they are reading?
Challenge & Solution
How might we ensure users find the names of their target cultural figures efficiently?
How might we design a search tool to help people who cannot input the characters they would like to search?
How might we ensure users that the selection of reading materials is right for them and worth their time to read?
-
The contents are based on globally recognized Mandarin Chinese learning materials. They are classified into two levels as below:
Intermediate: understand elementary Chinese and communicate on a fundamental level
Advanced: Communicate almost anything you’d like in Chinese.
There is nothing for beginners because for any story, article, or essay to take shape, it usually has to have some higher-level grammar or vocabulary mixed in.
Reading Content:
All the reading materials are aligned with the HSK exam syllabus.
Intermediate: HSK 3-6
Advanced: HSK 6+
How might we help users better digest what they are reading?
Choice of Fonts
there is a psychological trick behind Serif Fonts: the letters stand out clearly, making it easier for the brain to remember the words.
Site Map
User Flow
Mid-Fidelity Wireframes
Usability Test
Prepare for the Usability Testing
Selected participants were too young to understand abstract black and white prototypes, so I increased the fidelity of screens to conduct my usability test.
Conduct Usability Test
Task 1: Complete the operation of logging in to the account
Conclusion: Creating an account and logging in to an account is difficult for younger users, such as primary school students. But it would not be a problem for teenager users.
Task 2: Complete the operation of searching and reading.
Conclusion: The more buttons, the more confusing.
Design
Design System & UI Kit
Dual Mode: the light and dark modes share the same visual language.
I referred to the Human Interface Guidelines of Apple in the design process because I am designing an app for the iOS system.
Design Elements
Illustrations: make it possible for learners to digest knowledge with enjoyment.
The illustrations follow one style so that the user can memorize them, get used to the design, and recognize them quickly. They play in favor of usability, recognizability, and enjoyment.
Split-screen Design: allows for information to be simultaneously obtained without switching between multiple screens
For two or more types of information that the user needs to obtain simultaneously, splitting a screen is a perfect solution. The same can be said about the content, which demands the user to choose between different options. Instead of switching between multiple screens and keeping the information in mind, you can see all the info, compare it, make your choice, and move forward.
Iteration
Children require a more intuition design solution to improve the accessibility and usability: easy login with Face ID or Fingerprint and show one “object” at a time.
Final Design
Dual Mode
I apply adaptive UI of dual tones that allows dark and light switching. The daytime mode focuses on the reading experience, while the nighttime mode focuses more on listening.
White text on a dark background stands out and is better remembered.
Dark mode
White text on a dark background stands out and is better remembered, the design looks trendy, and the use is more convenient. A light mode can be uncomfortable for the eyes during prolonged use. It is especially acute in the evening and after waking up — when most people use phones, as we know.
Key Pages
Impact
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
Next Steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Think about scalability: All the contents in the dictionary are in the format of flashcards, which are align with most other language learning apps. Also, this format enhances the memorized process through pictures, actions, sound, context, and story.
Talk with the engineering team to see the technical feasibility.
Add more educational resources.
Takeaway
In this project, I included many nice-to-have features in the design, but I understand that there are any technical constraints or business KPIs you had to keep in mind.
I found the biggest challenge throughout the process was how to tap into user needs. From this project, I learned how to ask the right questions and eventually be brave enough to overturn previous assumptions and find the real user pain points to continue the design.