Chattr Language Learning
UX RESEARCH + DESIGN
Overview
Background
Chattr is a mobile application that invites learners to a colorful 3D world to practice speaking a new language in real-time. Learners can create their own virtual language partner and start speaking within minutes.
Role
Product Designer
Timeline
Branding: 10 weeks
Product: 4 weeks
Tools
Figma
Photoshop
Cinema 4D
After Effects
Research
User Personas
![]()
Spanish - Beginner
Goals & Motivations
Johnny wants to learn some Spanish phrases before his trip to Mexico City next month. He wants to focus specifically on learning phrases that have to do with visiting a new city such as ordering coffee or asking where the restroom is.
Frustrations
- He doesn’t have enough time before his trip to start off with learning written language
- He is self concious of making mistakes
- He’s currently learning phrases from different resources and they are inconsistent
![]()
Mandarin - Intermediate
Goals & Motivations
Lena’s interested in going to Taiwan one day but for now, she focuses on casually practicing Mandarin when she can. Her main goal is one day being able to have thoughtful conversations with Mandarin-speakers.
Frustrations
- She only has 10-15 minutes of practice time in between work meetings
- She can’t be fully consistent with her practice
- She doesn’t have anyone to practice with
![]()
English - Beginner/Intermediate
Goals & Motivations
Ken has been taking ESOL classes at the local community center and practicing after his 9-5 job. He wants to practice speaking more so he can have more conversations with his children.
Frustrations
- He isn’t technology savvy
- He is indecisive on what to practice
- He doesn’t have people around him outside of ESOL class who are in his language level
Johnny, 24
Spanish - Beginner
Goals & Motivations
Johnny wants to learn some Spanish phrases before his trip to Mexico City next month. He wants to focus specifically on learning phrases that have to do with visiting a new city such as ordering coffee or asking where the restroom is.
Frustrations
- He doesn’t have enough time before his trip to start off with learning written language
- He is self concious of making mistakes
- He’s currently learning phrases from different resources and they are inconsistent
Spanish - Beginner
Goals & Motivations
Johnny wants to learn some Spanish phrases before his trip to Mexico City next month. He wants to focus specifically on learning phrases that have to do with visiting a new city such as ordering coffee or asking where the restroom is.
Frustrations
- He doesn’t have enough time before his trip to start off with learning written language
- He is self concious of making mistakes
- He’s currently learning phrases from different resources and they are inconsistent
Lena, 32
Mandarin - Intermediate
Goals & Motivations
Lena’s interested in going to Taiwan one day but for now, she focuses on casually practicing Mandarin when she can. Her main goal is one day being able to have thoughtful conversations with Mandarin-speakers.
Frustrations
- She only has 10-15 minutes of practice time in between work meetings
- She can’t be fully consistent with her practice
- She doesn’t have anyone to practice with
Mandarin - Intermediate
Goals & Motivations
Lena’s interested in going to Taiwan one day but for now, she focuses on casually practicing Mandarin when she can. Her main goal is one day being able to have thoughtful conversations with Mandarin-speakers.
Frustrations
- She only has 10-15 minutes of practice time in between work meetings
- She can’t be fully consistent with her practice
- She doesn’t have anyone to practice with
Ken, 51
English - Beginner/Intermediate
Goals & Motivations
Ken has been taking ESOL classes at the local community center and practicing after his 9-5 job. He wants to practice speaking more so he can have more conversations with his children.
Frustrations
- He isn’t technology savvy
- He is indecisive on what to practice
- He doesn’t have people around him outside of ESOL class who are in his language level
English - Beginner/Intermediate
Goals & Motivations
Ken has been taking ESOL classes at the local community center and practicing after his 9-5 job. He wants to practice speaking more so he can have more conversations with his children.
Frustrations
- He isn’t technology savvy
- He is indecisive on what to practice
- He doesn’t have people around him outside of ESOL class who are in his language level
Pain Points
01 - Language learning resources are primarily focused on written learning and not real time speaking practice.
02 - Learners find it uncomfortable to practice speaking with others who are outside their language level or vocabulary range.
03 - Learners resist consistent speaking practice because figuring out what to learn next is mentally taxing.
Pain Points
01 - Language learning resources are primarily focused on written learning and not real time speaking practice.
02 - Learners find it uncomfortable to practice speaking with others who are outside their language level or vocabulary range.
03 - Learners resist consistent speaking practice because figuring out what to learn next is mentally taxing.
Problem Statement
Language learners need a simple and engaging way to practice speaking in order to break resistance and build confidence for future practice.
How might we create a solution that encourages learners to practice speaking a new language right away?
Problem Statement
Language learners need a simple and engaging way to practice speaking in order to break resistance and build confidence for future practice.
How might we create a solution that encourages learners to practice speaking a new language right away?
Visual Identity
‘Chattr’ Language Learning App
Visual Identity
‘Chattr’ Language Learning App
‘Chattr’ Language Learning App
Chattr’s brand is inspired by the visual concept of “connection”. The round logo, characters and 3D elements represent the fluidity between the people and cultures we’re able to connect with through language. Utilizing Assitant, a font family that is clean, minimal and welcoming, Chattr is able to walk the line between being colorful and refined.
Chattr’s brand is inspired by the visual concept of “connection”. The round logo, characters and 3D elements represent the fluidity between the people and cultures we’re able to connect with through language. Utilizing Assitant, a font family that is clean, minimal and welcoming, Chattr is able to walk the line between being colorful and refined.
Design Solution
Guided Scenarios
Chattr includes “Guided Scenarios” which are game-like 3D scenarios that learners can act out such as asking for directions or ordering coffee. Learners can search categories of different scenarios from their dashboard and then play as their language partner in order to practicing speaking with Chattr characters.
Design Solution
Guided Scenarios
Chattr includes “Guided Scenarios” which are game-like 3D scenarios that learners can act out such as asking for directions or ordering coffee. Learners can search categories of different scenarios from their dashboard and then play as their language partner in order to practicing speaking with Chattr characters.
Guided Scenarios
Chattr includes “Guided Scenarios” which are game-like 3D scenarios that learners can act out such as asking for directions or ordering coffee. Learners can search categories of different scenarios from their dashboard and then play as their language partner in order to practicing speaking with Chattr characters.
Chattr Button
The Chattr button at the center of the bottom nav bar allows learners to access two essential functions easily:
![]()
- Randomizer
Choosing a lesson is often where learners feel resistance. The “Randomizer” button allows learners to jump right into a scenario without having to make a decision.
- Translator / Dictionary
Whether a learner is practicing quick chats or browsing through the community forum, they’ll be able to get to the translator easily and look up any words or phrases they need.
Whether a learner is practicing quick chats or browsing through the community forum, they’ll be able to get to the translator easily and look up any words or phrases they need.
Quick Talk
The “Quick Talk” feature allows learners to speak directly with their virtual language partner in real-time. Learners can see subtitles for what their language partner is saying and receive suggestions or tips on what to say back.
Badge System
As learners practice speaking, they earn badges for milestones and different scenarios that they complete. These badges are collected on their profile page where they can also view their total speaking time and other progress statistics.
Reflection
Initial Design vs. Final Design
- Initial Design
- Too many different styles and outlines that made it overwhelming to take in information - Unclear hierarchy
- Screen broken up unnecessarily
-
Final Design
- Buttons are able to stand out
- More intuitive hierarchy for the user to follow
- Cohesive style that allows information to be digested more easily
- Too many different styles and outlines that made it overwhelming to take in information
- Buttons are able to stand out
- More intuitive hierarchy for the user to follow
- Cohesive style that allows information to be digested more easily
Iconography Exploration
- Initial Iconography vs. Final Iconography
Through user testing, I was able to make the icons more intuitive for the user particularly for “Quick Talk” and “Scenarios”. The functions of the Chattr button also changed throughout the process.
![]()
![]()
Improvements
![]()
![]()
![]()
![]()
- More Intuitive Iconography
The “Quick Talk” icon could be misinterpreted for speaking practice in general and the “Scenarios” icon is more familiar to users as a play button. I believe that the iconography could be more specific to their functions, for example visualizing the “quick” aspect for “Quick Talk”.
-
Optimize Filters in Scenarios Search
Another improvement would be to optimize filters in the scenarios search to be more specific and give users a better sense of what would fall into those categories.
-
Accessibility & Inclusivity of the “Help” Bubble
The blue help button on the quick talk screen should be explored further since it’s hard to see at the moment. Another problem I anticipate is that different languages take up different amounts of space. I’m also curious to see how the bubble could appear, either through a pop up or as a button that brings up the tip.
-
“Accept” / “Deny” Options for Randomizer
Giving the user some confirmation when using the Randomizer would be beneficial to the experience. For example, when they choose the randomizer, a prompt might tell them “this is what we’ve chosen” and they can confirm or randomize again.
Through user testing, I was able to make the icons more intuitive for the user particularly for “Quick Talk” and “Scenarios”. The functions of the Chattr button also changed throughout the process.
The “Quick Talk” icon could be misinterpreted for speaking practice in general and the “Scenarios” icon is more familiar to users as a play button. I believe that the iconography could be more specific to their functions, for example visualizing the “quick” aspect for “Quick Talk”.
Another improvement would be to optimize filters in the scenarios search to be more specific and give users a better sense of what would fall into those categories.
The blue help button on the quick talk screen should be explored further since it’s hard to see at the moment. Another problem I anticipate is that different languages take up different amounts of space. I’m also curious to see how the bubble could appear, either through a pop up or as a button that brings up the tip.
Giving the user some confirmation when using the Randomizer would be beneficial to the experience. For example, when they choose the randomizer, a prompt might tell them “this is what we’ve chosen” and they can confirm or randomize again.