Hey there, I'm Sean, a software engineer at SpanishDict, an online Spanish-English dictionary. For years SpanishDict has functioned mainly as a reference site where you could look up meanings of words, conjugations of verbs, and read articles about grammar topics, but lately we've been focused on building more interactive features in order to drive higher user engagement and better teach difficult language concepts.
Last year we built a vocabulary feature that allows users to add words to lists and be quizzed on them using spaced repetition, and over the past few months my team has been working hard to develop a new feature that we hoped to launch at the start of the school year, video lessons. We are still adapting to working remotely instead of in the office, but thankfully, we hit our goal, launching video lessons for several different grammar skills in English and Spanish this week!
The goal of this post is to provide a high-level overview of the lessons feature. Future posts will be more technical and will cover how we built the feature, diving into the various technical challenges we faced across the stack, from building a video pipeline to bringing animations to life. Keep an eye out for those in future weeks!
Users visiting the SpanishDict Grammar tab will now be presented with the page you see above, with several skills listed and many more to come. Clicking on one of these skills, like that of Ser vs. Estar, takes you to a page with a list of lessons for that grammar skill along with an article covering the topic. A blue target indicates the next lesson you should take. We track a user's progress through lessons, so if it's your first time visiting the page, the blue target will be placed on the first lesson in the skill.
Clicking on one of the lessons will navigate you to the lesson page, where you can start learning about the topic via interactive videos with many different types of questions. I'd encourage you to try out a lesson before you continue reading!
Usually the first few videos are for what we call explainer questions. Explainers introduce a new concept or reinforce a previously taught concept in a sort of lecture format with helpful graphics. Explainers contain either a multiple choice question or a single call to action button to indicate you are ready to advance to the next question. Following the explainer questions is typically a series of questions that follow a scenario playing out in real-time, like someone ordering food at a restaurant.
Another type of question, one that always features multiple choice, is the new term question. This question type is used to introduce a novel word or phrase to the student. The term is provided in context, so the user can hopefully reason out its meaning.
Notice how we can support both monologue and dialogue captions. The dialogue captions work great for the split-screen style video you see above. We have some videos that feature a discussion among three or even four people! Despite everyone recording in different locations due to the pandemic, our video editors have done a fantastic job blending the different footage together to make the lessons come alive.
Above you can see two more question types, cloze and translate. Cloze questions present the user with the base form of a word in a cue, and the user is asked to convert it into its proper form based on the context. In the above example, descansar needs to be converted into its past tense plural you form, descansaron. Translate questions ask the user to translate a cue from their source language. In this case the user needs to translate did you feel into the plural you form of sentir, sintieron.
For these two question types, to avoid giving away the answer, we beep out the answer while the video plays. Once the user has submitted their response, the video will replay without the beep to help reinforce the answer. You can see how it works in the video below!
As you can tell from the video above, we offer more than just multiple choice! Some questions, which we call writing questions, require the user to type in their answer. For a writing question, we automatically mark the answer as correct once a user has typed in the correct answer. If the user cannot come up with the correct answer, they can submit their answer by hitting Enter or clicking the Check button. If the only mistake made was inclusion or omission of accents, we'll show a helpful message to that effect and mark the user's answer as correct. Otherwise, we'll mark their answer as incorrect and show them the correct answer. This question will then be repeated at the end of the lesson!
In addition to multiple choice and writing, we hope to also add a sentence builder input type and if it's feasible, allow users to speak their answers!
The only question type I haven't yet mentioned is the transcribe question. This question type asks that the user listen to the video and fill in the blank with what they heard. Below are screenshots of multiple choice and writing input transcribe questions.
If any of the vocabulary in the captions isn't yet familiar to the user, we allow the user to see an English translation by hovering or tapping on the caption text. Despite already having a pretty good grasp of the Spanish language, I find myself using this feature a lot, as I always encounter at least one unknown word or colloquialism in every lesson!
We really tried to make the video lessons fun and engaging, and we think that this feature is the first of its kind on the web. It's almost as if you are in the room with native speakers having a discussion curated to help you learn specific grammar topics. It's a much more complete experience than you would get from a workbook or alternative language learning software that is entirely text-based.
As you go through the lessons, you'll see the creativity of our content team really shine through! In the Ser vs. Estar lessons, you get to take part in a pub trivia night, help a woman create her first online dating profile, be a fly on the wall in a job interview, and so much more!
These video lessons have been quite the team effort with so many people at SpanishDict deserving heaps of credit, from our product team that dreamed big and scared the engineers with the vast scope of their vision to the content team's impressive creativity and authoring speed to our designer's countless beautiful page layouts to the thoughtful planning, sequencing, and implementation by the engineers. Not to mention all the folks at the company that seemingly became actors overnight, including our head of HR and even the CEO!
If you're interested in hearing how we built this feature, I'll be adding some more posts, linked below, about some of the tricky engineering challenges we faced, and if you're interested in learning Spanish, I hope you'll try out the new lessons! Before you know it, you'll be an expert!
- Technical Post 1: Engineering a Great Video Experience
Comments powered by Talkyard.