Reimagining Duolingo
January 2022 • Figma
Project aimed to improve the navigation menu on the Duolingo mobile application.
What is Duolingo?
Duolingo is a mobile application that aims to give users a "free, fun, and effective way to learn a language." They currently offer 40 languages to their users, 37 of which are available to English speakers.
With the plethora of languages available, it is common to see users who are trying to learn multiple languages at once. Duolingo even published an article about how our mind handles learning two languages at once, along with tips and tricks on how to do so.
However, the navigation menu varies a lot from language to language depending on the content available. This can be a bit cumbersome to the user.
Problem
The navigation system in Duolingo is inconsistent between languages and sometimes confusing as it does not show all of the menu options clearly.
Comparison Between Languages:
According to an article posted by Duolingo in June 2021, Spanish and French are the two most common languages, so they have the most content. Their navigation has the most options:
*Duolingo Languages in order of popularity:
Languages like Russian and Yiddish have lesson plans designed to teach users their unique language, which is depicted in their navigation:
Finally, languages with the least amount of content, like Indonesian and Klingon (spoken by a fictional alien race in Star Trek), have the most simple navigation:
Types of Pages
In order to fix the Navigation, let's first go over the different types of pages Duolingo has:
Home
Profile
Stories
Leaderboard
Audio Lessons
News
Alphabet
Shop
My Proposal
In each language, the following 5 pages are seen:
1. Home
2. Profile
3. Leaderboard
4. News
5. Shop
Therefore, to stay consistent, I propose to only includes these 5 pages in the main Navigation menu at the bottom of the screen:
Miscellaneous Lessons:
By utilizing the above Navigation, it solves the issue of the inconsistency between languages. However, it creates the problem of where the miscellaneous pages go:
1. Stories
2. Audio Lessons
3. Alphabet
Solution:
The miscellaneous pages that I mentioned above have one common similarity – they are all a type of lesson, or additional tools that could be used to strengthen the user’s language skills.
The “Home Page" originally housed all of the unit lessons, so I propose to add an additional navigation menu to other forms of lessons on this page.
The beauty of this navigation bar is that it holds all of the “types of lessons.” For the French and Spanich language, Duolingo offers the Unit lessons, Stories, and Audio books, which is pictured to the right. For the Russian language, Duolingo offers lessons on the alphabet, so this Navigation bar can be adjusted to include the alphabet icon.
This navigation bar allows the flexibility of adding specific lesson types for each language, without sacrificing the continuity of the main Navigation bar at the bottom of the screen.
Feel free to view the whole prototype on Figma utilizing the new Navigation bar.
