Learn a new language with friends.
For one DesignLab project, our task was to add a feature and I chose to add to Duolingo. I wanted to work on a project that combined my passion for education with my background of being bilingual.
This proposed featured is “Friends.” It’s an entirely new section on Duolingo that lets users collaborate with the friends on lessons, and support their friends on their class achievements. Duolingo previously had friends elements sprinkled in their site, and this feature greatly expands that functionality.
The Hypothesis
My initial hypothesis was that people want to learn with friends, specifically through friendly competition. My original inspiration was from learning games like “Words with Friends” where friends compete against each other. These games have been wildly popular. In order to test this hypothesis, I wanted to conduct research.
I also noticed on the Duolingo forums that there were many requests related to friends such as an online chat in the app, more friends features, and the ability to learn or interact with friends on the site. At the start of this project, Duolingo had some friends features implemented such as the ability to add friends to a list, and a leaderboard showing your learning score compared to your friends. However, these were all isolated features sprinkled throughout the site and app.
How Do People Like to Learn?
In order to test my initial hypothesis, I had to start broad. I didn’t want to give away that this was for a Duolingo friends feature, and I didn’t want to prime anyone’s answers. I wanted to understand what activities or subjects people liked to learn, and how they liked to do it. I was hoping some themes would appear that would support or refute my initial hypothesis.
I made my user interviews simple, with a focus on four broad questions related to learning.
Are there any activities that you would like to learn?
Is there anything that you use to learn?
How has this helped you?
What would you like to see in the future? *pertaining to what they say*
For all these questions, I had lists of follow up questions prepared. However, I still wanted to keep these interviews open ended, letting the interviewee guide discussing how they like to learn. This open ended approach yielded some really interesting insights. The first being…
My initial hypothesis was wrong.
Every interviewee mentioned the importance of social connections and positive social support in learning. However, they all discussed a desire to collaborate or share what they learned with their friends or loved ones. People wanted to work together when learning something new, not compete. Some interviewees also mentioned strong positive support from family or close friends motivated them to keep learning.
Other Key Takeaways
Learning with Friends is More Rewarding
All participants mentioned something about learning with friends being positive or motivating. Most expressed a desire to learn together with their friends in a shared interest. This deepened motivation for the topic learned, and deepened the friendships at the same time. Even those who learned on their own initially, still shared what they learned with their friends, and expressed a desire to learn with others in the future.
Small Groups are Best
Most participants said they learned best in a small group of 5-8 people, especially if that group was friends. They also said a small group size made it easier to interact individually and become friends with each member. People desire social connection while learning, whether that be with friends they already know, or with a group who shares their same learning interests.
Analyze Competitors
For my competitive analysis, I focused on companies or organizations where people could learn a new language with others. Language is often learned organically through immersion. Because of this, I even included the online videogame runescape. A user could choose a different language for the game and go onto a server with people chatting in that language. A user could choose immersion online.
I noticed most of the ways to learn a language online were free or low cost. However, the tradeoff is all of these are self-paced and rely on the user’s own motivation. Now, Duolingo does the same thing. So the key becomes increasing the user’s own motivation to learn the new language.
In my research, I also found scientific studies validating that positive social connection promotes better learning. These studies matched the findings of my own interviews.
Personify the Main Potential User
I combined the important elements from the research above to create Isabella Fuentes - strong, positive connection with family and friends, values social relationships, a desire to learn with others, and a personal reason for learning a new language.
Defining What’s Important
After our first set of research was completed. I wanted to draw out and resolve the pain points that were brought up.
Site Map
I decided where to add the new friends feature in Duolingo’s already existing sitemap. Since friends are so important to learning, decided the new “friends” feature should be added to the top level navigation on the learning portal (the green pills). I also noticed even though Duolingo had friends elements, they were spread over multiple pages. I planned to consolidate all those friends elements into one location.
Task Flow and User Flow
For the task flow, I focused on the user adding their first friends, since they need to complete this step before any other interactions with friends. For the user flow, I focused on all the friends functions I planned to include in the site. These include decisions around adding or inviting friends, interacting with friend’s achievements, and learning together with friends.
Defining and Sketching The Functionality
Now it was time for me to define all the functionality and sketch it into initial concepts. I created a list of all planned functionality. This included elements such as logging in, adding a friend, inviting a friend, a friends list with a signal for when they were online, a leaderboard, a social section for liking and commenting on achievements, and most importantly learning lessons with friends.
I laid these all out on the new page, the friends dashboard. I focused on putting the most important functions at the top, and organizing the other parts below.
Wireframing
The next step was putting everything together into a wireframed friends dashboard, and preparing a prototype to test the dashboard as a solution.
Initial Wireframes
I started with expanding up the new “friends dashboard” page. This is where most of the new friends feature would live.
Finishing out the Prototype
Once I had the dashboard worked out, I finished out the rest of the prototype. This included more details in the dashboard, any actions or overlays on the dashboard, and expanding upon the “learn with friends” function.
Testing the Concept
Usability Testing Plan
I first wanted to find out if the adding a friends feature actually made sense to the customer. Once that was understood I checked to see if they could start a lesson with their friend. If everything went according to plan; then I tested to see if they understood what they could share with their friends and how the leaderboard function worked.
Planned Final Revisions
Used information that was mostly brought up as paint points from participants, and focused on adjusting to better suit the customer.
UI Design
I focused on refining the dashboard, and reworking the functionality based on the user testing feedback. I also created a UI kit, adding my new elements to Duolingo’s existing design system and style guide.
I updated my UI design from a copy of the original prototype, so that the final visual design also acted as a testable prototype for future phases. Also, In the wireframe prototype phase, I had componetized most elements of the pages.
Friends Dashboard and Updated Lesson Page
I started adding all the final page revisions into the wireframes. Then, I focused on the components and updated them to UI versions. I started with the new navigation component, then all the page components. I worked on the UI kit in tanden with making these final page designs.
Overlays
I followed the same steps with the overlays. Both overlays were their own components. For the lesson overlay, I added to Duolingo’s existing component. The friends list overlay was a new component entirely.
UI Kit
Finally, I tweaked the organization of the UI kit. This helps me or a new designer pick the project back up any time. Also, since most elements were componetized, they could be edited on the UI kit in the future and it would automatically update that component on all relevant mocks. The UI kit page was long, so I’ve presented a modified layout version here.
Next Steps for Duolingo
I plan to retest the new “Friends” feature with the UI added. I want to see if there are any further issues. From there, I would share the designs onto a platform like Dribbble to start the conversation about legitimately adding this feature to Duolingo.