Case study: Duolingo flash
Flashcards for Duolingo to revise topic-based vocabulary
This mini-article is part 6 of a 52-part series — 52 Weeks of Interaction Design by Saleh Riaz. The series is meant to be a personal project. Read more about it in the introductory article or find all interactions here.
Week 6 — Duolingo Flash
Use case
The user shall be able to revise the vocabulary of completed topics in Duolingo presented in flashcards form with the translations, usage in sentences, pronunciations, and articles if required.
Understanding the problem — Discovery and problem definition
Learning a new language can be a tough challenge but not necessarily if the medium we use to learn it is fun. The 3 main constituents of a language are form, content, and use. Breaking down further, a form consists of morphology and the vocabulary or words are one important part of this. Phonetics, syntax, semantics, and pragmatics all are connected to the vocabulary of a language.
I am one of the user personas for this problem since I have been actively trying to learn a new language — German. Being a fluent English speaker and having the ability to converse in Urdu, Hindi, and Punjabi (native language), I understand how a language works and how the basic structure of a language looks like. German or Deutsch, being one of the Proto-Germanic languages, is easy to map onto the English language if you understand the grammar rules. Yes, there are lots of differences but it's easy to learn for English speakers.
There are lots of tools and mediums, me and other participants whom I interviewed used. Online courses, schooling, study groups, workbooks, and audiobooks are a few of the most common ways to learn a new language. One tool that was pretty common among all the participants and which I actively use as well is Duolingo. Duolingo is a freemium app for mobile and web that has changed the way a new language can be learned. Few features of Duolingo are quizzes, practice exercises, stories, tips, etc which make the learning experience more immersive and fun with the added factor of gamification.
With all these great features, one thing that the users miss is the ability to revise the topic-wise vocabulary. As mentioned earlier, vocabulary is one of the crucial parts of a language and most of the new learners want to keep on learning new words so they can at least converse using the most common words. Most users think that learning vocabulary is a ‘vital part of learning a language. Duolingo initially used to have a flashcards-based platform for memorization called ‘TinyCards’ but they eventually shut it down so they can focus on exploring newer options.
So the challenge for this week was to find a solution that allows users to revise/learn vocabulary.
Ideating and prototyping a solution
Defining the problem led to coming up with different solutions for this use case. Since the theme of this year’s 52 weeks project is to design unconventional designs, I tried to target the ideas that provided a more human solution. Flashcards have been an age-old method to convey bite-sized information to learners. My solution revolved around taking this physical interaction of flashcards and converting it into a digital one. We have all interacted with flashcards or even playing cards at least once in our lives so we humans can relate to such interactions at a very deeper level and create intuitive digital interactions.
The solution I came up with is to create a sub-brand for Duolingo called Duolingo Flash so that I can be integrated into the app itself to provide a more cohesive learning experience for the users. Read more about sub-brands here. The idea is to allow users to unlock the ability to revise through flashcards once they have completed a topic/lesson. So for example, if I complete the lesson for ‘Food’, I shall be able to revisit the topic by going through the flashcards. It's similar to how Duolingo exposes the practice options when we’re done with a lesson. The entire idea of Duolingo is positive reinforcement when you keep on repeating new things so they end up learning it.
While prototyping the designs, the visual design has been inherited from Duolingo since we are targeting to craft a sub-brand that is a part of the actual app itself.
Guidelines of Duolingo can be found on their website.
The interaction starts from the lessons page where the user can see all their lessons. If the user has completed a lesson, they can tap on it to reveal the relevant options to that lesson. A new button for flashcards is being shown and upon tapping that, they can start using Duolingo Flash. Once tapped on the button, the user is taken to the loading screen with a duo animation and tips/trivia. The loading screen in our case holds real importance to onboard new users on how to use the flashcards.
The next screen is our main flashcards screen itself where the user is shown the front side of the card and the ability to swipe the card away. The swipe gesture is the main interaction. The left and right swipes both have different behaviors and subsequent actions. The pattern is somewhat influenced by Tinder and the application of Jakob’s Law makes it easier for users to know how the design works. The right swipe removes the card from the stack and the left swipe takes the card off the top and puts it at the end of the stack. So while revising, if the users come across a difficult word that they think they will need to revise again, they can left swipe it to stack it at the end so when they’re done with all the words, they will be shown that difficult word again. The front of the card has the article, the word, a button to listen to the pronunciation, and another button to reveal tips or sentences regarding that word. Taping the front of the card will turn it around and show the meaning of the word.
The designed prototype is one of the many solutions ideated. The solutions can be extended to provide a better user experience. Another custom setting that can be added for Duolingo Flash is that of enabling illustrations for the words that act as a visual aid for learners. This has been one of the foundations of learning something new and we have been doing this since we were in kindergarten. Another thing that can be added is a list of the words by topic/lesson so the learners can just go through them before taking an exam.
Testing
I tested the prototype initially myself but we all know how biases are one of the biggest hurdles for a designer so I tested the app among my study group and the community who are learning the German language. Everyone liked the idea of having an interactive flashcard experience to learn the vocabulary by the topic. The pronunciation and the sentence feature were liked by them as well. The ability to left swipe a card to send it back to the stack was a very common operation as most users cannot learn a new word the first time.
Asking the participants to think aloud during the usability study really help me understand the user journey as well which was a little different from my own and helped me explore different more broad solutions.
52 weeks of interaction design is a personal project by Saleh who is a product designer. The intention of this project is to create humanizing, unconventional designs since the design must always keep evolving, and creating unique designs is essential to give products a unique identity.
Saleh is a product designer working on digital products, crafting their concepts, interactions, and experiences. Find more about him on Behance, Dribbble, LinkedIn, and Twitter
