Speak Fluently, Live Colorfully:
We’re putting the play back into learning a new language.

Background

Current language learning platforms often focus heavily on writing and lack interactivity, sense of play and real-time speaking practice that is required to fully experience a language and the culture behind it.

“Chattr” is a concept for a language learning app that is focused on making real time speaking practice fun again for learners of all ages.

How ‘Chattr’ Works

• Learners create their own Chattr language partner and are able to start practice immediately through “Quick Talk” or “Scenarios”.
• Through game-like 3D scenarios such as “Asking for Directions at a Park” or “Ordering Coffee at a Coffee Shop”, learners get real world practice that will help them in becoming fluent in their target language.

UX Problem
Learning a new language can be intimidating and once a users open an app, the process of actually starting to practice can be tedious and confusing, which often leads to additional resistance when it comes to future learning.

Resolution
We want to make the process of starting a practice session quick, simple and encouraging. This will build the user’s confidence and promote future practice on Chattr.

This case study specifically focuses on three user flows that lay the foundation for how users begin a practice session using Chattr.

Discipline
Branding, UI/UX, 3D Modeling, Motion Graphics

User Flow #1: Guided Scenario

Johnny, 24
Johnny installs Chattr to learn some Spanish phrases before his trip to Mexico City next month. Today he wants to focus specifically on learning how to order coffee in a cafe.

User Flow #2: Random Practice

Ken, 51
Ken has been taking ESOL classes at the local community center and practicing at his job. He wants to practice speaking more but after a long day at work, he’s often indecisive about which scenarios to do or what conversations to start.

Chattr Button

In configuring the main navigation bar, we made two essential functions of Chattr easily assessible from anywhere in the app via the main Chattr button:

• Randomizer
Choosing a lesson is often where learners feel resistance. The “Randomizer” button allows users to jump right into a scenario without having to make a decision.

• Translator / Dictionary
  Whether a user 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.
  

User Flow #3: Quick Talk

Lena, 32
Lena has been learning Mandarin casually for the last year. She is taking a lunch break in her office at work and wants to get some quick practice in before she has her next meeting.

The Visual Story

Chattr’s brand is inspired by the visual concept of “connection”. The logo represents the people and culturals we’re able to connect with through language. Utilizing the Assitant, a font family that is clean, minimal and welcoming, Chattr is able to walk the line between being colorful and refined.

Brand Deck

UX Process & Conclusion

Reflection

This UX case study allowed me to dive into troubleshooting the details of the learner’s experience.

• Initial UI Design vs. Final UI Design
  The initial UI design utilized outlines that made it overwhelming to take in the information on each page. With the toned down final design, buttons are able to stand out and create a clearer hierarchy for the user to follow.
  

• Initial Iconography vs. Final Iconography
  I went back and forth with testing what a user would most likely need access to as soon as they open the app. Previous versions tested a button to jump into a free reign Chattr world or a “Quick Talk” session.
  
  

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


• “Difficulty Filter” for Scenarios Search
  In the scenario’s search results page, it would be useful for the user to differentiate what difficulty level each scenario is before they click into the details page.
  
  
• Quick Talk Page “Help” Bubble Assessibility & Inclusivity
  I had difficulty with anticipating the amount of dialogue that would come from the speaking practice as well as the “help” bubble. Because the length of sentences in each language is different, I would test having the help bubble as a component that fades in and out as the practice goes on as opposed to a permanent part of the page.
  


• “Accept” / “Deny” Options for Randomizer
  Although this adds an extra step to the randomizer function, it might be useful for the user to be able to “accept” or “deny” the chosen scenario.

Overall, the project taught me to dig into the details of each step when laying out the flow for a specific task. It became a process of taking away just enough that the flow felt natural and intuitive for the user. Through this cycle of testing and feedback, I was able to streamline the steps which will ultimately boost the users' confidence and promote future use of Chattr.

Thank you for visiting.