The secret to a good dropdown: a test case 🤫
By: Eyal Yeruham
Tags: Usability, Data Driven, Dropdown, Product Design, UX

I spent several sleepless nights having nightmares about the dropdowns in the product my scrum team and I have worked on, called Best Fit. This is the story of how I, IMO & backed up by data, made the best experience for our users out of a flow consisting of seemingly endless dropdowns.

✨ The Product — Best Fit

In a nutshell: Best Fit gathers information from users about their academic background and financial possibilities, then compares that to the data StudyPortals has on the specific programme a student is viewing. Cross-referencing all the information and using a complex algorithm, Best Fit presents students with a result in terms of how well they fit the programme.

*Disclaimer: the screenshots I will be using to show the improvements I brought to Best Fit are from the current live version, including a fresh coat of visual paint created by Fay Theo.

The opening page of Best Fit

💪 The Challenge

Best Fit consists of multiple questions on separate pages, which the user goes through one by one. Naturally, you lose some users along the way; however, the drop-off and final completion rates were unnaturally low. The clickthrough rate from page to page varied between 65–85%. So the main task at hand was to optimise the drop-off rate across the flow and subsequently the completion rate.

When dissecting the problem, it became rapidly apparent that the drop-off source was the favoured interaction method; dropdowns. To start, my scrum team and I ran extensive testing on multiple devices to find reproducible bugs. While we found and fixed several critical bugs that stood in the way of usability, we had to realise that there was more to it than we initially thought.

At this moment in time, Best Fits dropdowns were barebones. A list of items, which are scrollable and tapping “H” on the keyboard, would jump to the first item that starts with the letter “H” in the list. That was it.

Being the great tool Best Fit is, it has to cater to all students and universities. Meaning, hundreds of countries to pick from, all universities and colleges in each country, a boatload of disciplines, all the available currencies in the world (including gold & bitcoin) and a handful of grading systems.

If you would add up all the items you had to scroll through, you were in the hundreds. No wonder users were dropping off left and right.

🔎 Type-to-Search

After thinking through the issues and having a list of ideas, we realised that type-to-search within the dropdown list was the most valuable improvement to introduce. It would drastically improve users’ experience when looking for a specific item in the dropdown, and the implementation wasn’t more than a sprint.

Type to search meant basically a filter and sorting functionality at the same time. When you start typing “u”, any countries not including the letter are straight away omitted from the dropdown. Next, countries beginning with the letter “u” would present themselves at the top in alphabetical order. Lastly, countries that included the letter “u” anywhere in their names would appear in alphabetical order afterwards. Meaning that, within the list, the United Kingdom or the United States would appear on top, followed by results such as Austria or Hungary. As you typed your search, the results got more refined, excluding additional items from the complete dropdown list.