DuoSongs – New DuoLingo Feature Design
Personal Project | Solo Project | 2 hours
Concept
Learning a language is hard work. What if it was just a bit more fun? Music is a great tool for remembering all kinds of things (looking at you ABC’s song!) including language. When I was first learning English, which is my second language, my lesson plans included songs some of which I remember by heart to this day.
Now I am learning Italian, and like millions of others have turned to Duolingo to get started. Duolingo is a great app, and a good example of gamification in education. They are always tweaking their features, but something I haven’t seen from them yet is using songs as part of their lessons. I decided to explore what a Duolingo Songs feature might look like.
Process
Since Duolingo is an established app, I started with thinking about how the Songs feature would fit into it. I basically had two options – include bits of songs into the regular lessons, or separate them out into their own page. I decided to go with the second option and make Songs behave similarly to Stories, allowing the users to choose when to interact with them. Since Songs can be a longer time commitment than regular lessons I thought it would be the best choice.
Having figured that out, I did a few quick wireframes in InVision Freehand. I used screenshots from the app to speed up the process, and outlined the flow of how the feature would work.
The Songs page would list songs available to the user, and each song could have 3 crowns to earn. The songs would be split into levels similar to Stories, to provide a feeling of progression and leverage some gamification principles.
Once a song is launched, I decided to incorporate the music video of the song at the top, and use the rest of the space for the lyrics. There is also a scrubber at the bottom to pause and rewind the song. Then, the lyrics would highlight in time with the music, and various activities relating to the lyric would be presented. The overarching rules of Duolingo would persist, and mistakes would lose you hearts.
Once the wireframes looked solid, I moved to Figma for mockups. I used the existing branding and styles of Duolingo to make the feature look seamless. Since Duolingo uses a custom font for their app, I consulted their branding guidelines and used their suggested alternative – Nunito.
Result
I think the feature feels natural to include in Duolingo, and it was a good challenge to work within the parameters of an existing app. For such a short timeframe of this project, I am happy with the result.
Finders
A journal and encyclopedia for foragers.
