DUOLINGO.

Adding a Vocabulary Feature to Duolingo

Project Overview

Background

Duolingo is a popular mobile platform for language learners that teaches languages in a fun and easy game-like way.

I had previously heard a few Duolingo users complain about not being able to find vocabulary related information within the app and having to look for it somewhere else. It inspired me to do research and find out if the problem really existed, and if adding a vocabulary feature could fix it and in what ways.

Challenge

• Find out if and how a vocabulary feature can add value to the experience and satisfaction of Duolingo’s users.

• Build an intuitively structured feature that can satisfy the users’ need for vocabulary related information.

• Keep the UI design of the feature in style with the original Duolingo app so that it can fit in organically.

Approach

For most of it, I followed my project timeline. However, some parts required going back and iterating based on the further progress made. For that reason, I allowed myself some flexibility in terms of skipping back and forth between different steps of the project that can be particularly seen in phases 2-4.

Role

UX Designer (UX Research, Interaction Design, Product Design, User Testing).

Tools

Figma, Miro, UX Tweak.

Time Allocated

74 hours

Project Phases

1 - Research

RESEARCH PLAN | COMPETITIVE RESEARCH | PROVISIONAL PERSONAS | USER SURVEY | RESEARCH DEBRIEF | USER PERSONA

Creating a Research Plan

As this project was for a feature that I already had on my mind (based on the user feedback I had heard before), all the steps of the research phase reflected that in the way I approached it. However, in order to not have let myself be misled by my speculations, I was open to any outcome including the research disproving the importance of adding the vocabulary feature.

As a starting point, I created a detailed research plan in order to have a structured guide for my UX Research phase.

Competitive Research

First, I performed competitive benchmark study in order to see how some other language apps approached the vocabulary problem.

I found via Google a list of top language apps and picked 3 of them based on their description and popularity with users. Then I installed them on my phone and started exploring. I found out that only 1 of them had complete vocabulary information, while the other 2 had only vocabulary practice with preset word order and no possibility to see all words or find specific ones. 1 of them also lacked word translations. None of them had a search option for looking up words.

I also gathered other related information including user feedback to learn more about where the apps succeeded and what they lacked.

So far, the information gathered proved that the feature I wanted to create could at least make a difference.

Provisional Personas

In addition, I did research on average language learners archetypes, and then, based on it, created five provisional personas in order to have a better idea of possible life situations, goals and pains of average language app users.

To make them appear more Duolingo related, I used the images and names of some of the app’s characters.

User Survey

For my primary research, I decided to go with user surveys as it would allow me to gather information from multiple users living in different parts of the world within a short time frame.

My survey questions sounded more like interview questions with a variety of answer options. I also included open-ended questions in order to get more specific data on the vocabulary related issues the users experienced (or not).

The results showed that the majority of the survey participants experienced problems finding, remembering and understanding new words they learned on Duolingo and could benefit from a vocabulary feature added to the app.

If you are curious to see the survey script and results, please hit the button below.

UX Research Debrief

Now that my research was completed, I wrote a research debrief based on the quantitative and qualitative data I had gathered during my research, which was supposed to help me with my next steps.

The main takeaways were:

• Secondary Research - not all the popular apps had a vocabulary feature neither did all of them offer translations or a search option;

• Primary Research - lack of an organized vocabulary storage interfered with the users’ experience with the app.

Conclusion: An organized vocabulary storage with translations, audio and a search tool could improve the user experience of Duolingo users.

User Persona

After having finished my research debrief I could create my user persona.

Since I was working with an already existing product and knew what solution to the problem I was aiming for, it made creating this user persona a little different. My user persona turned out to be in a way vocabulary feature centered, which still worked for me as long as she was a cumulation of my research results.

2 & 3 - Information Architecture & Interaction Design

FEATURE MAP | TASK FLOW AND USER FLOW | UI PRODUCT REQUIREMENTS | LOW-FIDELITY WIREFRAMES

Site Map

Since there was no point creating a map of the entire app, I mapped out only the structure of my future feature.

I made the vocabulary feature accessible from Homepage and Stories. I kept it simple and split the feature in two subsections - My Words (containing the users current vocabulary progress) and All Words (containing all the vocabulary of a language course).

I wanted to make using the feature easy and convenient, and so I included a search bar and a sorting tool.

Each word was supposed to be linked to a respective Word Details Page in case the user cared for more information.

Task Flow and User Flow

Next, I created a task flow for my feature and then, based on it, a user flow covering all possible paths a user could take within the feature on the way from Hompage or Stories to a Word Details Page.

UI Product Requirements

Before proceeding to drafting my wireframes, I made a list of UI product requirements to help me make sure my future wireframes would not miss any important elements.

I kept it to a minimum of 3 pages to design - My Words, All Words and Word Details Page. I also planned to create a Search Bar and a Sort By filter as well as a number of icons and other minor elements.

3 & 4 - Interaction Design & UI Design

LOW-FIDELITY WIREFRAMES | MID-FIDELITY WIREFRAMES | ICONS AND OTHER ELEMENTS | HIGH-FIDELITY WIREFRAMES

Low-Fidelity Wireframes.

Based on my UI Product Requirements list I sketched a few drafts of my future pages.

If you are curious to see the sketches, you can take a look at them by hitting the button below.

Mid-Fidelity Wireframes (Figma)

Based on my sketches as well as the original app’s style, I put together my mid-fidelity screens in Figma. I had to pull up multiple original Duolingo screens for reference and kept them close at hand.

I decided to add the vocabulary feature to the top navbar with the rest of the local dropdowns as the tab bar at the bottom was occupied by the app’s sections like Home, Stories and other “big ones”. I created a minimalistic dropdown offering My Words and All Words options as well as showing the number of words learned by the user.

On Vocabulary Page, I kept My Words and All Words as tabs for easy reach.

For the Sort By filter, I categorized words by A-Z, by part of speech and by course topic, so that the users could review their vocabulary grouped the way they would prefer it. Every category could be expanded downwards at a tap on its category icon as well as shrunk back to its compact default state.

I also added a Search Bar that could help the user find a certain word they needed immediately.

Last, I designed the Word Details Page to which it should take the user at a tap on a word.

Icons and Other UI Elements Set

Since the to-be-designed feature was for an already existing app, my new UI elements for it had to appear consistent with its style. It was both a challenge and the fun part of the project.

I designed the vocabulary icon and some other missing ones from scratch based on the original typefaces and colors of the app. The rest of the elements I based on the images and color schemes of the app to this or that extent while having to add something from myself here and there (like, for instance, drawing capital letters for the A-Z category icons or recreating some original images in a different color scheme).

High-Fidelity Wireframes (Figma)

Armed to my teeth with my color schemes, icons, dropdowns and such, I was ready to give my mockups their completed look.

This part is one of my favorite ones - the pure joy of applying all your hard work to your final creation.

5 - Iteration and Implementation

BUILDING THE PROTOTYPE | TESTING THE PROTOTYPE

App Prototype (Figma)

Last, but not least, was to stitch my prototype together to make it “come alive”.

It took a while as I was aiming to connect multiple altered copies of the initial 14 screens to provide for all possible flow variations for the scenarios I had on my mind. My goal was to make my mockup resemble the real thing as closely as possible, and I believe that my hard work paid off.

To judge it for yourself, you can take a closer look at the Figma prototype if you hit the button below.

Usability Testing Plan and Results

When it came to testing my prototype, it turned out to be so easy for the participants to complete the tasks from my plan, that I had to improvise and ask them to figure out a few more alternative ways of getting it done, which still went smoothly and proved no flaws to be corrected.

The participants said they wished the feature could be really added to the app because they found it awesome.

I documented my findings and wrote a summary of usability testing results based on them. Since the testing proved no areas requiring improvement, I deemed my project ready for hand off.

Case closed :)

CONCLUSION

It was a great opportunity to practice working with an existing project and learn about the subtleties of keeping within its guidelines while adding something new to it.

If I could or had to do it over, I would create more different scenarios for my usability testing.

The part that I enjoyed the most was the challenge of keeping my designs in line with the existing style of the app. On the other hand, it was in a way easier to follow an existing style rather than having to come up with one of your own from scratch within a short period of time. However, that as well required some time and attention to detail as I had to pull up many different existing screens for reference to keep my new screens consistent with the app’s style.

Another good thing was getting insights from actual users of an existing product as compared to interviewing people for a product that was yet to be created.