WaniKani is Japanese radicals, kanji, and vocabulary learning web app that uses mnemonics and a spaced repetition system to make kanji learning simple.

WaniKani has a very passionate community that I was an active participant of around 2015-2017. It was there that I was introduced to the concept of 'user scripts', a way to execute Javascript files in the browser in order to change the look or functionality of a website.

This is a retrospective of some interesting UX improvements I created for the community with some insights into what I wanted to achieve.

Goals

Looking back, it's clear my most impactful UX improvements can be summarised into two categories. Firstly, I wanted to provide better tools for power users. Language learning is a time intensive undertaking, so I tried to develop solutions that would streamline certain workflows in the application. Secondly, I wanted to provide additional information for a more informed learning process.

Part 2: Provide additional information for more informed learning

SRS level indicator

One of the most popular enhancements I created was simply to make the SRS level of the current review item visible in a colorful, but unobtrusive way. An SRS stage contains a varying amount of levels to complete before the item is 'promoted' to the next stage (meaning it would take longer before it had to be reviewed again). Each stage also had a certain color associated with it. The benefit of this simple visualisation is that user would more easily see their progress over time because review sessions would be coloured by the more 'advanced' SRS stages. A lot of users reported it also helped them gauge how much effort should be spend on a particular review item. Failing an item in a lower SRS stage has a low cost (the difference in review time increments is small), but if you know you're looking at an item in a higher SRS stage, you could spend extra time trying to recall the answer.

Spaced Repetition System (SRS) stages a student has to go through

Adding a subtle color-coded dot indicator on the right to indicate the SRS level

Inject mnemonics into underdeveloped lesson explanations

WaniKani is primarily a tool to learn the most common kanji (symbols) of the Japanese language, but it enforces those lessons by offering a lot of vocabulary that utilise the kanji you've learned.

Vocabulary lessons were presented in a linear progression system, which meant that certain lessons would have a more minimal explanation when it was a small variation of a word you had previously learned.

Example: the pronunciation of the verb 'to dry something' is very similar to the one of 'to get dry', and so the lesson would simply say "pronounce this in the same way as 'to get dry'". This lack of explanation was surely a time saver for the creators, but entirely unhelpful for the user when they didn't remember the pronunciation or mnemonic of the word that was referenced any more.

The solution to this problem was that any Japanese word would have a tooltip on a hover action that gave the user the option to fetch the mnemonic of the pronunciation or meaning of the word from its information page. In this way, users would no longer need to navigate away from the lesson or review session to look up the word in a dictionary or on another part of the website.

When hovering a Japanese word, a tooltip would appear that allowed you to insert the mnemonic of a word

Additional info page links

When you gave an incorrect answer during a review session, there would only be a link to the info page of the parts that made up the word (or kanji), but no link to the one of the word itself. This link could be useful because the full info page of a word contained more context and examples than what was available in the review session. I also added a link to the popular Japanese dictionary website Jisho.org because it contains even more examples.

Added the bottom section 'Link To Info Page', providing a link to the info page of the item being reviewed, as well as a link to a well-known dictionary