Dissecting Duolingo’s Design
March 31, 2020 — 13 details
Duolingo states that — absolutely — everybody can learn a language with Duolingo. On their site, you can read the research that concludes that 34 hours on Duolingo equals an academic semester in languages. Thus Duolingo is very promising to learn any language you want. Duolingo was established in 2009 by Luis von Ahn, a professor of computer science and his student Severin Hacker. In 2013 they launched Duolingo as a mobile app and that turned into an absolute hit, Duolingo was that year’s Apple’s app of the year. Duolingo is available on every platform, from the web to mobile, from iOS to Android and even as a window phone application. The app is free in use, but as with several other apps, there’s also a paying premium version; Duolingo Plus.
Launch
When you launch Duolingo, it’s the first time you’ll meet their mascot owl. This character will guide you through the learning experience and assist and motivate you to complete lessons. The friendly wave of the owl is an immediate indication that learning languages with Duolingo will be accessible. These interactions and character animations are extended throughout the entire app and add a lot to the overall user experience. Next to the character animation, you get the option to start without an account or login if you already have one, so you can skip the onboarding process.
Onboarding
The entire onboarding process is based on the design pattern of progressive disclosure. Handling settings this way is helpful to guide the user effortlessly through certain settings, especially with a wide target audience like Duolingo’s. It keeps their content manageable and non-overwhelming. As a user, it didn’t even feel like setting up my settings. The right questions came at the right moment enhancing an intuitive experience.
Login
After setting up your preferences while onboarding, you immediately get a first taste of Duolingo’s lessons, which I will discuss later on. Providing lessons at this point gives the user a sense of value the app will provide, a well thought out move of the UX designers. After this first lesson, you’re finally able to log in. Duolingo asks for your age, a username and a password. Why they need the age of their users isn’t clear to me. An indication of its relevance would be helpful. As with the onboarding process, the login form is also designed in a progressive disclosure way. A few ads later you eventually enter your landing page.
Navigation
To navigate through the app, the main tab bar is implemented at the bottom of the screen. This tab bar stays persistent and is therefore always visible on the screen, whether the user scrolls down or not. This gives a certain effortless feel while navigating and adds up quick access between the different tabs. An active tab is indicated by a coloured icon. These icons aren’t all equally clear on itself. They miss some labels to clarify which page they navigate to.
Available lessons
The themes
Let’s take a dive into the core functionality of Duolingo, that is, its language lessons. These are displayed on the landing page of the app. All lessons are based on themes, such as travel, family, greetings etc. The lessons page shows all available lessons and which ones you already unlocked. Unlocked lessons are coloured and locked lessons remain grey. When you tab on an unlocked lesson a micro-interaction starts to play giving it a cheerful feel. The circle around the lesson icon also gives a quick indication in advance, showing your progress in that particular lesson. Tabbing on locked lessons also gives the user some feedback, which is very helpful, instead of just leaving them grey.
The scrolling
For each language, there’s a certain amount of lessons available. It takes a while to scroll to the end. When scrolling back up, a hidden surprise awaits. A fun visual illustration of the mascot owl indicates the top of the page when you over-scroll.
The hearts
In the free version of the app, you get some lives to complete the lessons. When answering wrong during a lesson, you lose a life. When completing a lesson with good answers, you gain virtual coins. This motivational approach for learning languages with Duolingo is mainly based on gamification. The lives you can lose are represented by hearts. When tabbing on your hearts an overlay fades in and the background darkens. Working with this overlay is a smart choice. It keeps the relationship with the page you’re on intact, so you don’t lose your orientation within the app. The hearts are also animated on the rhythm of a heartbeat, which makes the association with having lives more real.
Learning
Read, write, listen and speak
Duolingo distinguishes itself from boring textbooks by the engaging way they provide their learning material. In each lesson, your writing-, reading-, listening- and speaking skills are tested. To get more grammatical info or to relisten to the pronunciation of each word you can tab on them, which makes it highly interactive. This way, users can easily repeat some hard parts and learn at their own pace. All actions are again supported by micro-interactions. For instance, when something is pronounced some indication in the form of a moving speaker icon is given to the user.
Character animation
In each lesson, there are also some characters that guide you. These characters all have their own personalities. When your answer is right, they cheer you on in their own way. This is very motivational and fun to watch. All of these personalities also represent different cultures and races which adds up to the accessibility of the wide target audience Duolingo wants to reach.
Closing an in-progress lesson
When you attempt to abruptly close an ongoing lesson, Duolingo shows you a confirmation screen. This way feedback is provided and confirmation is asked of the user when performing destructive cancel actions.
Stories
To test everything you learned over a couple of lessons, you can unlock stories. These stories test interactively writing-, reading-, listening- and speaking skills. The course of the story is again beautifully animated. The text smoothly fades in, on the pace of the spoken words. The storyline and the words also are kept above a certain fold and aren’t sticky at the bottom, to improve the reading.
Loading state
When loading actions are required, the mascot owl of Duolingo gives the users some facts or tips in between. This makes that split second of waiting much more enjoyable!
Ads
After completing each lesson or story a lot of annoying ads appear. These ads refer to a constant reminder to switch to Duolingo Plus, the ad-free paying premium version of Duolingo. It almost feels a bit pushy this way to upgrade your version. Whenever a dialogue appears involving ads or marketing for Duolingo Plus, the primary button to switch to Plus is always the most obvious one to tab, which is misleading and to trick users.
To conclude, Duolingo is a very intuitive app to learn languages at your own pace and whenever you want and are able to. The greatest assets of Duolingo are its finetuned animations and micro-interactions. These add a lot to the user experience. To reach an as wide target audience as possible, they also go that extra mile, by for instance using progressive disclosure, to make the ease of use more accessible and by the different ethnicities, races and gender in their character animation during the lessons and stories. The biggest downside is the constant pushy reminder to their paying premium version Duolingo Plus.
