Media feature for language app.
Duolingo was not involved in this project nor am I in any way affiliated with Duolingo.
Duolingo Feature Addition
- Duolingo Feature Addition
- 🌏 What is Duolingo?
- Why add a media feature?
- 🔎 Research
- Competitive Audit
- User Research
- Task Flow
- Wireframes
- Material Design
- 📱 Design Time!
- Is this design Usable?
- Before/After shots
- 🗒️Wrapping Up
🌏 What is Duolingo?
Worldwide, people are seeking to learn new languages, and language learning apps have become increasingly popular. While there are a multitude of apps that try to bring a unique approach, Duolingo is one of the most well-known. However, many users need more immersive, real-life content to support their language learning beyond what the app currently offers.
Why add a media feature?
A media feature would benefit Duolingo by improving user enjoyment and increasing app usage, ultimately leading to a more efficient language learning experience. As someone who would love to use this feature, I had an idea of where to start but needed to seek an understanding of what users need.
🔎 Research
Competitive Audit
Comparing both language-learning and entertainment applications allowed me to get an idea of the market, identify opportunities, and find an edge.
User Research
After conducting interviews, it became apparent that users would find this feature useful and enjoyable, as shown in the diagram below. This validation confirms that the idea should progress to the next phase.
Because it is essential to remember why this feature would be helpful, I combined information from different interviews and used a quote from one of the users to create this persona.
With a broad understanding of what users want, it was time to incorporate both business needs and technical considerations to narrow the scope.
Task Flow
Before designing pages, it is helpful to create information architecture. To do this, I created a task flow to make sure I can create pages with proper CTAs to make sure the user can progress through the main tasks of the new feature.
Each aspect of the feature should have similar flows to create consistency to allow users to seamlessly flow through each task. Because the goal is to educate users, I also wanted there to be minimal options to focus users on completing goals. I mimicked Duolingo’s current flow and customized it to fit the new feature.
Wireframes
Material Design
Prior to designing, it was imperative to thoroughly review Duolingo's Material Design Guidelines and carefully examine their existing pages.
📱 Design Time!
Adding an icon to the navigation bar is essential to provide a way for users to navigate to this feature.
Three more icons were then added as a colorful, casual, and fun way to show the user that there are three different sections to explore.
**The arrows are not part of the design, just here to help direct your focus to these aspects within the design.
How could we ensure that users are suggested material they are interested in?
By adding onboarding process!
Duolingo’s material design mentions the use of emojis, so these were incorporated.
How can we continue to suggest relevant content?
By adding a like button to help produce an appropriate algorithm.
Are users engaging with this media in ways they would regularly?
Most users reported using their phones for reels and music, but primarily use their television for shows and movies, so a screencast option was added.
As mentioned in the initial user research, subtitles and adjustable playback speed are necessary to help with comprehension.
These functions are available in audio lessons, so it adds to the app cohesion, as well.
Since the app already uses lessons, these lessons follow the same format to provide consistency.
How will users know about this new feature?
Adding a banner to call attention to the feature is a seamless way to ensure users will be alerted to check it out.
Duolingo aims to provide education to people of all ages, skill levels, and technological comfort. How will this feature support this?
Step-by-step instructions are provided to make sure there is equal opportunity for the benefit of this feature. However, it aims to be intuitive, so a skip option is available for more experienced users.
There are ten pages of instructions, each page containing minimal information for quick scanning allow users to understand what is occurring in this feature.
Is this design Usable?
Usability testing was done with 10 participants. The goal was to see if users could navigate the new feature with minimal instruction and understand what it does and how to use it.
Before/After shots
Though all the final changes are implemented in the designs above, I wanted to showcase the changes made.
As you can see, the search feature originally stood out like a sore thumb, so much so, that in hindsight, it’s hard to fathom that decision. However, when I took a look at this feature from a different angle, it was a quick and easy fix following the material design guidelines.
For the quiz page, though it was a close style match, creating a pop-up window induced an inconsistency considering there are existing quiz pages for the app.
🗒️Wrapping Up
This media feature immerses language learners by incorporating entertainment media they regularly enjoy. However, it remains focused on education rather than solely on entertainment. It also maintains consistency with Duolingo’s minimal design and existing pages.
To experience the prototype and thoroughly see each page, click through the prototype below, or click here to access in a new window.