ChinEasy —
a language learning app
UX/UI case study
![phone](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_iphone%402x.2bd8d20e.webp&w=3840&q=90)
![orange-hero](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_orange%402x.13084bcd.webp&w=3840&q=90)
![green-hero](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_green%402x.70097a3d.webp&w=3840&q=90)
![pink-hero](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_pink%402x.1eac2298.webp&w=3840&q=90)
![purple-hero](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_purple%402x.d0e9bf80.webp&w=3840&q=90)
This language learning app development case study answers the crucial question:
how to design a user-centric, visually appealing, and engaging mobile/web application.
M-learning
Industry
2 specialists
Team size
China
Location
1 month
Project duration
[ Business goals and context ]
The two-fold goal of this project was to craft:
A unique learning experience for young Chinese language learners
The mobile app should provide children with a highly engaging and effective learning method, making the daunting journey of learning Mandarin Chinese fun and enthralling, akin to an adventure.
01
An original and memorable brand identity that resonates with children and parents alike
The app’s visual identity, including logo design, color palette, typography, and iconography, should align with its playful and educational nature.
02
![abstactions](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_product_scope%402x.3fa06a3e.webp&w=3840&q=100)
[ Product scope ]
The Onix design team was tasked with:
Creating the M-learning app’s user experience (UX) and user interface (UI)
Developing the brand identity for a language learning service
Designing motion graphics for the app
![call_to_action_bg](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_call_to_action_block1%402x.ea93e834.webp&w=3840&q=100)
Are you interested in M-learning app development?
![Onix](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_chein_easy_mobile%402x.ae32c994.webp&w=3840&q=80)
![background](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_CardBlockBg.d8cf8ab2.webp&w=3840&q=100)
Project phases
Mobile and web app design solutions
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_1%402x.23091cd1.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_2%402x.2c3ebd16.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_3%402x.bb10af0f.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_1%402x.23091cd1.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_2%402x.2c3ebd16.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_3%402x.bb10af0f.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_4%402x.91d54c52.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_5%402x.d335d908.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_6%402x.7085e0a5.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_4%402x.91d54c52.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_5%402x.d335d908.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_6%402x.7085e0a5.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_7%402x.ff245a85.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_8%402x.e9fc8372.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_9%402x.30252044.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_7%402x.ff245a85.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_8%402x.e9fc8372.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_9%402x.30252044.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_10%402x.4d47f5d0.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_11%402x.847618b1.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_12%402x.636a0107.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_10%402x.4d47f5d0.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_11%402x.847618b1.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_12%402x.636a0107.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_13%402x.33d7b7ff.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_14%402x.81e7978e.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_15%402x.d78aa1ce.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_13%402x.33d7b7ff.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_14%402x.81e7978e.webp&w=3840&q=80)
![screen](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_15%402x.d78aa1ce.webp&w=3840&q=80)
01Intuitive onboarding and user flow
The team created a seamless onboarding process that guides users through setting up their profiles, selecting their learning goals, and customizing their learning experience.
Straightforward and intuitive navigation ensures a smooth user journey.
07Multimedia content integration
Videos and photos provide insights into China’s culture, history, and traditions. Virtual tours and interactive cultural activities should further immerse the learners in the Chinese context.
02Dynamic language exercises
The exercises were designed to adapt to users' proficiency levels and adjust to their performance. This helps ensure a challenging yet manageable learning experience.
Onix’s designers created interactive components, animations, and transitions that added a sense of interactivity and delight to the learning experience.
08Discussion boards and chats
A user-friendly interface helps interact with fellow learners, share their achievements, and participate in language challenges while fostering a sense of community and support among the app users.
03Visual vocabulary builder
The design team created images, illustrations, and contextual examples that reinforce word meanings and improve retention.
09Visual language-learning pathways
Onix’s experts designed interactive learning pathways visually representing a user’s progress through different language levels. This gives users a clear sense of achievement and motivates them to advance.
04Interactive pronunciation practice
Voice recognition technology enables the app to provide real-time feedback on users' pronunciation. Visual aids, such as mouth position diagrams, were designed to help users master accurate pronunciation.
10Personalized dashboard
Users can view their learning progress, achievements, and areas for improvement and set goals.
05Digital companions
The captivating and memorable colorful characters act as teachers and companions to the young learners within the app. They are always ready to offer assistance and guidance at every learning juncture and facilitate education and entertainment through games. This approach simplifies and enriches the process of learning Chinese and enhances user engagement and motivation while alleviating parents’ concerns about their children’s progress and development.
11Customization features
The app allows customizing preferences, such as font size, color schemes, and background themes, to create a more comfortable learning environment.
06Gamification
The app includes a gamified system of challenges, quizzes, and rewards that incentivize users to engage with the app and complete language learning milestones consistently.
Onix’s team designed and implemented gamification elements, such as badges, rewards, and progress tracking, to enhance user engagement and motivation.
M-learning app brand development solutions
«The Fantastic Four» should make the learning experience more engaging and enjoyable for kids
The brand style includes four animated characters, one for each of the four aspects of learning Chinese: pronunciation, grammar, vocabulary, and hieroglyphics.
Designed as in-app assistants and companions, each character has a name, possesses corresponding abilities, is featured in a number of episodes, and can change its size depending on emotions.
This solution makes the learning experience more engaging and enjoyable for kids.
![Onix](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_chin_easy_solution_mobile%402x.1ac3d8fa.webp&w=3840&q=100)
Emotional color coding
Vibrant colors convey a cheerful mood and attract the kids’ attention. They also reflect the characters' emotions:
These carefully selected colors, reflecting the app's playful yet educational nature, contribute to the joy of using the app and language learning.
![Onix](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_color_coding_orange%402x.9cd65316.webp&w=3840&q=100)
Orange
#FF7A00
signifies anger, but not as intense as red
![Onix](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_color_coding_green%402x.8b8adfe1.webp&w=3840&q=100)
Green
#68B506
happiness and joy
![Onix](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_color_coding_pink%402x.0432665a.webp&w=3840&q=100)
Pink
#FF3181
dreamy and enigmatic
![Onix](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_color_coding_purple%402x.ec417412.webp&w=3840&q=100)
Purple
#9347DD
friendly, shy, and modest
Modern user-friendly typography
A font with rounded letters that looks playful yet restrained
Logo
![ChinEasy logo](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_chin_easy_logo%402x.a29cb8ae.webp&w=3840&q=100)
The font was illustrated in the logo, integrating the «Crazy Four» characters’ eyes into the letters to give the logo a unique dynamic look.
Designers’ instruments
Figma,
Adobe Illustrator,
Adobe Photoshop
Results
During the product discovery stage, Onix’s design team played a crucial role in shaping the overall language-learning app’s vision and developing its functional and visual aspects.
Then, they designed a brand style guide, a user-centric app experience, and interfaces that balanced aesthetics and functionality.
The resulting ChinEasy app forms a comprehensive learning ecosystem, covering all language aspects from basics to advanced proficiency while unraveling the cultural nuances of China.
The app’s gamified style turns each step into an exciting quest.
The chosen approaches and solutions set ChinEasy apart from other language learning platforms.
![Onix](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_chin_easy_phones_mobile%402x.d78104ca.webp&w=3840&q=80)
![call_to_action_bg](/_next/image?url=https%3A%2F%2Fcdn.onix-systems.com%2F_next%2Fstatic%2Fmedia%2Fimg_call_to_action2%402x.590aa41a.webp&w=3840&q=100)