Ray Yuen. NextLesson Glossary

A feature of our interactive tool

After the initial version of our interactive learning tool was live, it was up to the curriculum team to fill it with amazing lessons. In the meantime, we focused on new features and learning tools. Since many of our lessons centered around real world jobs—like accountants and sports team managers—there were bound to be industry-specific words that students wouldn't know. We set about building a “toolbox” that a student could use. We had visions of many tools down the road, but for now, the first tool would be a glossary.

The User Experience

When a student encounters a underlined glossary term, they can click on it to see the definition. A little pop up tooltip will tell the student the definition and show an image if there is one. They can also access a list of all the terms in the lesson by going to the right hand toolbar and clicking on the glossary icon. This will slide in the list of glossary terms in the lesson that they can look over.

A video depicting the two ways you can view a glossary term's definiton.

Having the experience unobtrusive was key, because we didn't want students to get distracted. Rather than open up separate tabs or new windows, we intergrated it as much as we could. This lead to the side toolbar. The secondary vertical pane that shifted out of the toolbar also served a great place to hold the table of contents, which allowed quick navigation.

The Visuals

We had a variety of concepts and objects to diagram including careers, mathematic principles, and industry‑specific terms. Fortunately, I had a library of image assets that I'd slowly created over time, making this task a little less time-intensive. However, it still required a bit more thought over how to illustrate more abstract concepts like “viable” and “hypothesize.”