Duolingo
An ed-tech success case, Duolingo is one of a few platforms putting mobile-first learning at the forefront. However, while gamification can definitely improve time spent on platform and retention metrics, Duolingo's current sitemap doesn't give justice to the feature-rich platform.
As a case study on improving Duolingo’s user experience, I took a look into how I could improve the navigation on the platform and designed wires to introduce accessibility-rich features (such as support for dark mode), as well as changed the visual design to better optimize for engagement through gamification.
Pictured above: An new experience to support dark mode, update visuals, emphasize gamification features, and improve app navigation.
Pictured above: The current state of Duolingo. Note the extensive bottom navigation (including a "see more" button) that varies when different languages are selected. This is not ideal, because it does not allow the user to establish a set UI pattern and thus prohibits user familiarity with the app navigation. Likewise, user statistics, such as streaks, are mixed with in-app currencies at the top (gems and hearts), and lighting-round challenges (which are language-specific) are located on the leaderboard (which is not language-specific). Also, the in-app shop is currently buried (the user must tap their hearts or gems counter to access the shop), which does not optimize for transactions. I address these issues below by simplifying the bottom navigation to the current language selected, user profile, the leaderboard, and the shop.
Pictured above: Here you can see the simplified bottom navigation. Within the languages tab, the user can view language alphabets, audio lessons, e-books, and practice hub using the upper-right corner buttons instead of having to filter their bottom navigation. Likewise, I moved lighting challenges to the language tab (bottom-left corner), as they are language-specific. Users can now see their progress towards unlocking a new league in their XP progress bar on the left-hand side of their top stats bar, including markers for league demotion and promotion zones. In the upper right-hand side of the user's top stats bar, they can still view their hearts and gems in one place; however, I surfaced access to the in-app shop in the bottom navigation.
In addition to introducing dark mode, I also updated the visual design of gamification features to be less flat and more eye-catching, including an updated look and feel to gems (the currency), league shields, locked content, and league gemstones. I also introduced slight gradients to the colors within the app to better match these updated visuals.
