Chattr Language Learning



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.

Product Designer

Branding: 10 weeks
Product: 4 weeks

Cinema 4D
After Effects

User Personas

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.

- 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.

- 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.

- 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.

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

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.

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.

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.

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

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.


  • 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.

Thank you for visiting. 

︎︎︎ cqnguyen7@gmail.com