top of page
.png)
Adding a language exchange feature to the Duolingo language-learning mobile app.
the client
Duolingo (Concept)
my role
Research
UX/UI Design
Prototype Testing
duration
4 weeks
Duolingo has helped users improve their language learning for over a decade. Through the course of this time, Duolingo communities and forums have formed and users are organically connecting to push their language learning further.
After finding an external Language Exchange thread, we found that users were attempting to match with native speakers who were learning their native language-- for instance, matching a native Arabic speaker hoping to improve their English with a native English speaker hoping to improve their Arabic.
.png)
the challenge
Creating a language exchange feature to the existing Duolingo app would be a major update to the app and would require careful on-boarding. In addition, this new feature would have to be consistent with the existing flow and design of the current app in order for users to follow along with it.
the solution
To help with user on-boarding for this new feature, I created an introductory step-by-step form and utilized the Duolingo owl to help users walk through instructions how to use certain features. While I added 2 new footer buttons to the app, I was sure to keep all things consistent with the product's current design and flow.
the process
research
goals
-
Determine what helps language learners learn best
-
Understand the goals of language learners
-
Identify the paint points of the language learning experience
methods
-
Competitive Analysis
-
Provisional Personas
-
User Interviews
competitive analysis
I began my research by identifying Duolingo's closest competitors and reviewing their products. I found insightful information on what features users found helpful and what features they found difficult. Duolingo proved to have a competitive advantage with the number of languages offered, but lacked learning opportunities to learn conversational phrases and areas of application.
.png)
provisional personas
To help jumpstart my research, I created a few provisional personas to help inform my decisions when planning for my user interviews.
.png)
user interviews
In order to get a better understanding of the language learning experience and the effectiveness and pain points associated with it, I interviewed 4 language learners via Zoom.
-
All participants mentioned that the most helpful practice when learning a new language was being immersed in an environment where they could hear the language being used
-
1/2 of the participants mentioned that hearing native speakers in YouTube vlogs, shows, or podcasts also proved to be beneficial to their language learning
-
3/4 participants mentioned difficulty in finding native speakers to practice with
-
Of those participants 2/3 mentioned that it was especially hard to find native speakers willing to correct them in their language speaking
-
-
Participants associated the following feelings with what it feels like to learn a new language early on: anxious, insecure, timid, and stressed
needs
-
Improve language speaking for work-related reasons
-
Feeling more connected to a culture
-
Communicate with people around them
pain points
-
Finding native speakers to practice with
-
Learning correct pronunciation
-
Finding resources for common and everyday language or phrases
desires
-
Hearing native speakers speak the language
-
Humanized learning experiences
-
Opportunities for real-time application and correction
define
user personas
Based on the research gathered, I created user personas for the average Duolingo user in order to better help me design intentionally and effectively.
.png)
site map
I created a site map in order to visualize where content would live within the existing app.
.png)
task flow
I created a simple user task flow for following on-boarding steps and choosing a user to practice a language with.
.png)
user flows
I created a user flow that demonstrates the flow user persona, Tyler would take to find a a native French speaker to practice with in America.
.png)
I created a user flow that demonstrates the flow user persona, Priya would take when using the chat feature to improver her written German small talk skills.
.png)
project goals
I took time to compare and contrast the different business and user goals as well as the technical constraints that may occur during this project. These notes allowed me to determine effective goals for this project and would serve as a helpful reminder when designing the product.
.png)
design
sketching ideations
Before working on my wireframes in Figma, I sketched out different layout ideas for the Community and Chat screens.
low-fidelity wireframes
I created low fidelity wireframes that displayed the the on-boarding process, community feed, chat feed, and call screen.
When designing, I wanted to ensure the new feature I added was consistent with Duolingo's existing branding and style guidelines.
.png)
branding
When creating branded assets for Duolingo, I referred to their existing brand guidelines for reference. I was sure to utilize their same illustrations, color palettes, and buttons throughout the app. When designing new icons, I made sure to use the same level of thickness, roundness, and colors.
high-fidelity mockups
I brought my wireframes and branding to life by creating high fidelity mockups of the new features for the Duolingo app. The new features include a Community feed displaying details about native speakers and filter options, additions to user profiles to include timezone, interests and availability, a chat feature with helpful translation and voice tools, and a calling feature.
.png)
test
usability testing
I created a mobile prototype and began usability testing via Zoom. The test was made up of 4 participants aged 20-28 years old.
Objectives
-
Test the comprehension of new features
-
Observe the flow users take when completing actions
-
Gather general feedback from users
.png)
Summary of Findings
-
All participants were successfully able to translate a received message with the owl's help
-
All participants were able to navigate through selecting a person to chat with and initiating a message or call
-
3/4 participants had difficulty constructing a translated message (All participants mentioned it would have been helpful to have the owl explain this tool too)
-
3/4 participants mentioned the translate button being easy to miss without instruction
affinity map
Participants comments were divided by those related to the navigation of the prototype and general pieces of feedback. After analyzing the comments, wins from the study were listed as well as further areas to research.
iterations
Based on my usability testing and affinity mapping, I was able to identify high priority iterations for the product:
-
Reorganized the filters in a hierarchy that would make better sense for the user
-
Added a helpful owl to explain how to translate a message
-
Added a timezone to the section showing availability so users can register that times are converted to their local time
See iterations in the prototype below.
takeaways
This project grew me in my ability to create assets and features that fit a pre-existing brand and its style guidelines. It called for the extra intention when it came to creating my flow and designing the user interface.
I wanted users to still feel like they were using the Duolingo app and that their experience was being further enhanced.
next steps
-
Areas to consider for the future:
-
More intentional on-boarding process when it comes to introducing the chat features (Perhaps a fake conversation trial to explore the features)
-
Incorporating gamification to the chat feature (Engagement points, practice time, etc...)
-
bottom of page