Using Natural Language Processing to Improve UX

@varun Creator of Quickz

Recently I've been working on polishing the overall UI and UX of Quickz (a classroom quiz app that gets it right 😀).

One of my favourite features to develop in the deck builder was the image searching tool. It's powered by an awesome service called Unsplash which generously offers an API for their image library, as long as you follow some basic guidelines.

Until now, the image search modal defaulted to searching randomly from a preset list of words, because I didn't know how a blank search page / modal home page should look.

This led to some funny results, such as this deck which was hosted live at Tampa Devs which just includes unrelated images for each question.

While out of place couches may be humorous, I decided to figure out a better solution. I wanted image searches to be fast and including an 'image searching homepage' would go against that.

Naturally, the best solution would be if the search box was already prefilled with exactly what the user wanted! Sadly I cannot read minds, especially not with JavaScript. But maybe I could use the text from the question?

This sounded like a complex problem, because it would involve somehow parsing English text, something that I have no experience with, like at all.

Fortunately, I stumbled upon compromise, a JavaScript library that "interprets and pre-parses text". It can do some really cool things, such as identifying topics mentioned in a sentence, or detecting adjectives, verbs, nouns and more. This sounded perfect and it's also pretty small! One issue is that compromise only supports English right now, but I'm fine with making that compromise. 🥁💿

Unfortunately, compromise's topic detection didn't do exactly what I was hoping it would. It worked with around 1 in 5 samples I tested, correctly identifying either a person, organization or place, but it didn't work with every question, especially those that don't have proper nouns, so I had to setup a fallback.

When topic detection fails, my code falls back to the detecting the first noun in the sentence. And if no nouns are found, (and the question is short enough), it fall back to searching the entire question.

If somehow after all of that, nothing was found, it still randomly chooses a search term... :)

This algorithm works surprisingly well. For example, this question asks "How many players on a team?", and the default search term was "players", which returned various pictures of sports players!

"Which subatomic particle has a positive charge?", returned a search for "particle", and "True or false: Gravity is a force that attracts objects to each other." searched for "gravity".

I'm pretty happy with these results! While my usage of it here is pretty small, I think that using NLP in small doses like this can really help improve the UX of a site.

This tiny change (took less than an hour to implement and test) makes the experience slightly better more often.

If you're interested in trying it for yourself, check out the Quickz deck builder.

Thanks for reading! :)