onomatope 

Japanese Katakana learning app

UI design   Wireframing   Figma animation   Mobile app



           
     



Overview


Onomatope is a unique app designed to help you learn Katakana through the use of Japanese onomatopoeia and various typography styles.
Japanese onomatopoeia is rich with expressions that convey emotional states and nuances that are often difficult to describe with words alone.
This unique aspect of Japanese culture uses symbolic sounds to facilitate instinctive communication, making it an engaging and effective tool for learning Katakana.



Objective


In today's globalised world, Katakana is not just a component of the Japanese language - it is widely used in advertisements, fashion, and design worldwide.
This app provides an opportunity to explore and understand these unique sounds and the cultural context behind them, enriching your appreciation and usage of Katakana in various creative fields.



Goal


The goal of Onomatope is to create a visually engaging educational app that leverages gamification and animated typography.  I believe that compelling visuals can evoke emotion and nuance, aiding in the retention of words and characters.
Additionally, this app helps users familiarise themselves with unique typography styles, beyond basic fonts, enhancing their overall reading experience.







User persona

I developed user personas based on the experiences of several friends with learning the Japanese alphabet.






Userflow


The app offers two types of learning quizzes, conveniently accessible through the bottom navigation. Placing these quizzes side by side allows users to easily switch between them, enhancing the learning experience and providing seamless navigation.





Wireframes

I began with low-fidelity wireframes to visualise the idea - the basic structure and layout of the app.
These simple sketches allowed me to focus on the overall user flow and functionality. Creating low-fidelity wireframes enabled me to rapidly iterate and make necessary changes.
Next, I developed mid-fidelity wireframes to add more detail to the design.
The mid-fidelity stage was crucial for refining the layout. And it allowed me to conduct usability test of the key functions.





Key features

I applied two distinct ways to learn Katakana, catering to different learning needs: one is katakana writing (stroke) for beginners, another is learning onomatopoeia.
Gamification elements keep users engaged and motivated.
By turning learning into a game-like experience, users can enjoy a sense of achievement. This approach not only makes learning more enjoyable but also enhances retention and mastery of Katakana and onomatopoeia.









Style guide


Given the diverse typographic styles used for learning Katakana, I selected a simple and readable font for the app to ensure clarity. The blue colour, symbolic in Japanese culture, also imparts a sleek and modern impression.




Dark mode


Dark mode provides a modern and sleek appearance.
Not just appearance, it helps reduce eye strain by using darker colours and lowering screen brightness, making it more comfortable for users to study in low-light environments.
This feature also improves battery efficiency as dark pixels consume less power, which is beneficial for users who spend extended periods on the app.





Kinetic typography


I created kinetic typography to visually express the meaning and nuance of onomatopoeia.
The animations reflect the inherent movement and sound of each word, while additional shapes enhance the conveyed feelings.
I believe that these visual elements help users better understand and remember the meanings and nuances of the onomatopoeic words.




Duration: 2 weeks
Role: UI designer
Tool: Figma


















Get in touch


©2024 ayakomatsuo Linkedin Behance Twitter Resume Email Imprint