Pronunci-Asian
“Pronunci-Asian is a social awareness pronunciation web app aimed to normalize Asian names visually and engagingly through name pronunciations and history lessons.”
Introduction
For this project, I worked with another UI/UX Designer and a Frontend Developer to conceptualize, design, and develop a web app that focused on social awareness – Asian Hate in particularly over the span of 12 weeks.
During the ideation process, I thought about how I grew up going by my middle name, “Melysa”, as opposed to my first name “Nhung” due to my parents worrying that I wouldn’t fit in. This inherently caused me to feel ashamed of it, not wanting to burden others with a ‘hard to pronounce’ name.
Thus, the idea of Pronunci-Asian came to mind when I felt that this focus of internalized hate towards Asian names due to the convenience of ‘fitting in’ or making it ‘easier’ for others should be shifted to promote more inclusivity and embracing our names.
Timeline
February - May 2022
Role
UI/UX Designer
Front-end Developer
Skills
User Research, Prototyping, Wireframing, User Flow, User Persona, Usability Testing, Web App Development
Tools
Figma, Next.js
Problem Statement
Growing up in a western country, we find that a lot of times people struggle to pronounce Asian names. In a way, this creates an erasure towards identity. Whether a name is considered hard to pronounce or not, we feel that it is important to acknowledge and for people to have access to resources that can help them learn and help promote an inclusive environment. How can we provide a solution and resource to end this perception that it’s hard to pronounce Asian names in a clear and intuitive way?
Site Map
Content Inventory
User Personas
Wireframe & Hi-fi Prototype
Usability Testing
Usability Testing Results
Solution
We created a web app that provides an engaging and inviting way for users to learn name pronunciations of Asian names and history lessons related to Asian name history and syntax. To start off, we researched information heavy or language learning based apps such as Duolingo. In addition to finding accurate audio files for the pronunciations, we also read articles about languages to determine what would be appropriate for our history lessons.
After determining out main features, we created a site map to determine our main features and how the web app would be organized. We also created user personas based on users who were likely surrounded by diversity (such as students or instructors), users that may be embarrassed by their Asian names, users who want to improve their mother tongue language, and users who are interested in learning about Asian languages. Using personas gave us a perspective on how they would benefit with Pronunci-Asian and also to make careful considerations that pertains to accessibility.
From there, we created a wireframe, lo-fi prototype, and then hi-fi prototype where we performed usability testing and improved on each iteration, taking in account of usability heuristics, design principles, and accessibility with Pronunci-Asian. We took inspiration from the white rabbit milk candy to create Coco, our mascot. Similar to some language learning apps, we wanted to use a mascot to help make onboarding users more efficient and to create a welcoming and friendly user experience.
Challenges and Takeaways
Being the first ‘big project’ during my first-year at the Digital Design & Development program, it was new territory that required an all hands-on approach. I tackled on ideation, user research and user personas, lo-fi and hi-fi prototyping, and finally developing the web app.
Though we were not able to fully implement the settings feature, it gave us insights as a designer on the importance of accessibility for our users. At the end of it, we presented to an audience of 80+ comprised of our cohorts and instructors who are industry experts.
