top of page
Chatt.r  Mockup.png

"Chatt.r emerges as a transformative language learning platform, designed to streamline the language acquisition process and enhance user engagement through personalized and interactive learning experiences."

Targeting language learners across the globe, Chatt.r combines artificial intelligence with a comprehensive communication-focused curriculum to offer personalized learning paths. This platform is engineered to enhance linguistic skills efficiently, ensuring learners achieve fluency with confidence, all integrated within a sleek, user-friendly interface designed from scratch.

Challenge

The main challenge in creating Chatt.r was to develop a comprehensive language learning system that goes beyond traditional methods, integrating technology to provide personalized, interactive, and engaging learning experiences. This needed to address the lack of practical speaking practice and adaptability found in existing language learning apps.

Role

Project Lead, User Experience Design, User Research, Prototype Development, User Testing and Feedback Integration

Duration

2.5 months

Solution

The solution was to create Chatt.r, a language learning app that combines AI-driven personalization with an engaging user interface to foster effective learning. Key features include adaptive learning paths, real-time pronunciation feedback, and a community platform for users to engage and practice with peers. The design process focused on user-centered design principles to ensure the app was intuitive and responsive to the diverse needs of learners.

Design Process

Lean UX

Tools

Figma, Illustrator

Think

In the "Think" phase, the focus is on understanding and defining the user's needs and challenges. This involves gathering insights through methods like user research, interviews, and empathy maps to accurately define the problems the product aims to solve.

Problem statement

Current language learning platforms predominantly emphasize vocabulary and grammatical skills, often overlooking the critical components of speaking and listening. This approach leaves learners ill-prepared for real-world conversational settings where interactive and auditory skills are essential. The absence of a holistic, communicative focus hinders learners from effectively using the language in practical, everyday situations, creating a significant gap in language education that fails to meet the needs of modern learners seeking comprehensive language proficiency.

Assumptions

Current language learning platforms predominantly emphasize vocabulary and grammatical skills, often overlooking the critical components of speaking and listening. This approach leaves learners ill-prepared for real-world conversational settings where interactive and auditory skills are essential. The absence of a holistic, communicative focus hinders learners from effectively using the language in practical, everyday situations, creating a significant gap in language education that fails to meet the needs of modern learners seeking comprehensive language proficiency.

assumption prioritiation chart.png
assumptions.png

Interview and Survey Insights

In an effort to deeply understand the nuances of language acquisition via digital platforms, a comprehensive set of interview questions was developed to gauge users' learning behaviors, preferences, and challenges. These questions specifically explored how users engage with language learning apps, with a focus on understanding their motivations, the effectiveness of interactive modules, and any barriers they encounter while learning a new language.

Frame 38.png

Competitors' analysis

In this section, I explore how Chatt.r compares with other leading language learning platforms. I'll examine their teaching methods, technology, and how they engage users to identify opportunities for Chatt.r to stand out and better meet the needs of language learners worldwide.

competitors analysis.png

Empathy Mapping

After noting down the common themes found through affinity mapping, it was now time to understand users' emotional states, pain points, aspirations, and behaviors. This is where two empathy mapping canvases were created to capture the nuanced experiences of different user types identified from earlier research stages.

Each persona—Venkatesh, who uses social media for escapism, and Sharanya, affected by social comparisons—had a dedicated canvas to ensure tailored solutions for their unique digital consumption challenges.

EM.png

User Persona

Creating user personas for "Switch" helps us to visualize the different types of users who might benefit from our app. This process ensures we cater to diverse needs and preferences in digital wellness, from tech-savvy millennials to busy professionals looking to disconnect.

persona 1.png
persona 2.png

Hypotheses

Current language learning platforms predominantly emphasize vocabulary and grammatical skills, often overlooking the critical components of speaking and listening. This approach leaves learners ill-prepared for real-world conversational settings where interactive and auditory skills are essential. The absence of a holistic, communicative focus hinders learners from effectively using the language in practical, everyday situations, creating a significant gap in language education that fails to meet the needs of modern learners seeking comprehensive language proficiency.

hypotheses.png
hypothesis chart.png

Make

The "Make" phase is about turning insights and hypotheses from the "Think" phase into tangible prototypes. This is where ideas are quickly sketched, prototyped, and iterated upon based on initial design concepts, ensuring that the solutions align closely with user needs identified earlier.

Lean UX Canvas

Current language learning platforms predominantly emphasize vocabulary and grammatical skills, often overlooking the critical components of speaking and listening. This approach leaves learners ill-prepared for real-world conversational settings where interactive and auditory skills are essential. The absence of a holistic, communicative focus hinders learners from effectively using the language in practical, everyday situations, creating a significant gap in language education that fails to meet the needs of modern learners seeking comprehensive language proficiency.

leanux.jpg

Information Architecture

Current language learning platforms predominantly emphasize vocabulary and grammatical skills, often overlooking the critical components of speaking and listening. This approach leaves learners ill-prepared for real-world conversational settings where interactive and auditory skills are essential. The absence of a holistic, communicative focus hinders learners from effectively using the language in practical, everyday situations, creating a significant gap in language education that fails to meet the needs of modern learners seeking comprehensive language proficiency.

IA.png

Journey Mapping

Current language learning platforms predominantly emphasize vocabulary and grammatical skills, often overlooking the critical components of speaking and listening. This approach leaves learners ill-prepared for real-world conversational settings where interactive and auditory skills are essential. The absence of a holistic, communicative focus hinders learners from effectively using the language in practical, everyday situations, creating a significant gap in language education that fails to meet the needs of modern learners seeking comprehensive language proficiency.

UJM.png

Style guide

Current language learning platforms predominantly emphasize vocabulary and grammatical skills, often overlooking the critical components of speaking and listening. This approach leaves learners ill-prepared for real-world conversational settings where interactive and auditory skills are essential. The absence of a holistic, communicative focus hinders learners from effectively using the language in practical, everyday situations, creating a significant gap in language education that fails to meet the needs of modern learners seeking comprehensive language proficiency.

styleguide.png

Wireframes

wireframes.png

The Sw!tch app is ingeniously designed to intervene in users' habitual patterns of excessive social media use, particularly addressing the pervasive issue of doomscrolling. It employs a smart detection system that identifies when users have been active on social media apps for extended periods without breaks. Upon detecting prolonged usage, Sw!tch triggers a timely notification designed to disrupt this cycle and redirect the user’s attention.

Final Screens

The Sw!tch app is ingeniously designed to intervene in users' habitual patterns of excessive social media use, particularly addressing the pervasive issue of doomscrolling. It employs a smart detection system that identifies when users have been active on social media apps for extended periods without breaks. Upon detecting prolonged usage, Sw!tch triggers a timely notification designed to disrupt this cycle and redirect the user’s attention.

Onboarding

The onboarding process for Chatt.r is designed to personalize the learning experience right from the start. It collects key details like language proficiency, learning goals, and preferred styles to tailor the app's content to each user's needs. This ensures a more effective and engaging language learning journey. Simple, interactive screens guide users through this setup quickly, making the first interaction with Chatt.r both welcoming and efficient.

Splash screen.png
Onboarding.png
Onboarding-1.png
Onboarding-2.png
Onboarding-3.png
Onboarding-4.png
Onboarding-5.png

Step into the app

Daily Challenge: Engages users immediately with a quick, engaging task. Today’s challenge, "3 min small talk with Chatt.r," focuses on fluency and offers a lively way to practice conversational skills.​

Continue learning: Offers personalized recommendations to keep learning seamless. Featured lessons like "Making Purchases" under 'Conversational' and "Gender and Articles" under 'Fundamental' allow users to dive deeper into specific language aspects. It also has a progress bar at the bottom to indicate how far along you are.

Featured Weekly Activities: Showcases specially curated activities that vary weekly. For example, "Traveller’s Era" enhances fluency, and "Wining and Dining" boosts comprehension, catering to diverse interests and learning goals.

Daily digest: Keeps users connected with cultural insights and real-world applications of the language. It includes segments like "Swimming in La Seine," a current event snippet, and engaging media such as the "Watch 'Frères' trailer" for entertainment, enriching the learning experience with relevant content.

Home screen.png

Let's learn!

The "Lessons" section on Chatt.r offers a structured learning path under the various categories, tailored to enhance practical language skills in real-world scenarios.

Lessons List.png
Frame 31.png

The "Faire des Achats" lesson in the "Chatt.r" app offers users an immersive way to learn essential vocabulary and phrases for shopping in French. It provides a systematic approach by introducing relevant words like "Le Magasin" (store) and "Acheter" (to buy), followed by conversational phrases that are commonly used in shopping scenarios, such as "Combien ça coûte?" (How much does it cost?). Each term and phrase is clickable for additional details, helping learners understand usage and pronunciation.

Lesson Intro.png
Vocabulary 2.png
Conversational Phrases.png
Forming Questions.png
Pronunciation 2.png
Cultural Note.png

The lesson progresses by teaching users how to form questions in French, using both casual and formal structures, ensuring they can navigate various shopping experiences. This approach not only equips users with language skills but also enriches their understanding of practical French usage, making it ideal for those preparing for travel, academic needs, or social interactions in French-speaking environments.

Activities.png
Frame 32 (1).png

Let's practice!

The Practice section of Chatt.r offers users a dynamic and interactive way to refine their language skills through a variety of exercises categorized under Speaking, Reading, and Listening. Each category is tailored to simulate real-life scenarios, enhancing practical language use.

Choose Your Chat

The "Choose Your Chat" activity in Chatt.r invites users to immerse themselves in interactive French conversations tailored to real-life scenarios. This feature enhances conversational skills by allowing learners to make choices in dialogues, as if they were actually interacting in a French-speaking environment. 

Practice 2.0.png
Practice 2.1.png
Practice 2.3.1.png
Practice 2.5.3.png
Practice 2.5.3-1.png

For instance, users can practice ordering coffee at a café, responding to the server's questions, and even inquiring about menu items. Each choice impacts the conversation, offering a dynamic learning experience that mimics real-world interactions. This practice session not only refines language skills but also builds confidence in using French in everyday situations.

Pick your small talk

The new "Discuss Your Day" activity in Chatt.r offers an interactive experience where users engage directly with an AI to talk about their daily routines. This exercise helps users practice essential verbs and everyday vocabulary, enhancing their ability to describe personal experiences in French.

Practice - AI.0.2.png
Practice - AI.1.png
Practice - AI.2.png
Practice - AI.1-1.png
Practice - AI.1-2.png
Practice 2.5.3.png

Users are prompted to speak about various aspects of their day, from morning routines to evening activities, allowing them to apply their language skills in describing real-life scenarios. The AI provides instant feedback, correcting pronunciation and syntax, which helps users improve their conversational fluency and accuracy. This personalized practice session not only refines language skills but also builds confidence in speaking French in daily contexts.

Community space

The "Community" section of Chatt.r serves as a vibrant social hub where users can engage with peers who share their language learning interests. This area is divided into several key features:

Forums: This space hosts a variety of channels and popular posts, allowing users to discuss topics ranging from everyday idioms to professional language needs. Whether planning a trip or preparing for an internship, users can find community support and share experiences relevant to their learning goals.

Match-ups: Here, users can find language partners based on their interests. Premium users have the exclusive ability to connect with native speakers, enriching the learning experience with authentic conversations. A simple tap can also find a random partner, making it easy to start practicing immediately.

Partner Interaction: Once a partner is found, users can choose to practice immediately or connect later. This flexibility supports learners in integrating language practice into their schedules seamlessly.

Community.png
Community-1.png
Practice 2.5.3-1.png
Stats.png

Insights

A comprehensive language learning dashboard that offers users a detailed analysis of their skills across different areas: Reading, Writing, Listening, and Speaking. Each section is designed to not only provide metrics on performance but also to offer tailored recommendations to help improve these skills.

Progress Summary: The main screen shows a snapshot of the user’s progress in various language skills using vibrant, color-coded progress circles.

 

General Insights: Below the progress summary, there is a dynamic graph displaying weekly engagement and progress, providing a visual representation of the learner's consistency and growth over time.

The language learning app's progress review section offers a comprehensive analysis of a user's skills across reading, writing, listening, and speaking. Each skill is meticulously assessed using specific metrics such as comprehension levels, vocabulary recognition, grammatical accuracy, and words per minute for both speaking and listening. Color-coded visual representations provide a clear and immediate understanding of the user's current abilities compared to their ideal targets. Alongside these evaluations, tailored recommendations are provided to guide the user on how to

Reading.png
Home screen.png
Home screen-2.png
Home screen-1.png

Check

During the "Check" phase, the prototypes and solutions developed in the "Make" phase are tested with actual users to evaluate their effectiveness. This involves user testing and gathering feedback to validate the hypotheses.

hyp1.png
hyp2.png
hyp3.png
hyp4.png
hyp5.png

© 2024 by Acsah Stanley

bottom of page