Imagine trying to find something in a dropdown menu, but you can only get to the letter ‘S’. A bit of a nightmare, eh? That’s the sort of pickle our customers were in with our CRM. We had a select dropdown that was hitting its limits, and it was causing a proper headache. We needed to find a solution, and fast. It was a proper dive into the depths of our design system.
Situation – The Select Dropdown Dilemma
We had a customer who was struggling to access options beyond the letter ‘S’ in one of our select dropdowns. Turns out, there was a limit of around 1000 options, and they had way more than that. It was a bit of a design flaw, and it was impacting their ability to use the system. We needed to find a way to make our select dropdowns more robust, more adaptable.
Task – The Select Dropdown Revolution
My task was to research the bug, understand the limitations of our current design, and come up with a solution that would work for both small and large datasets. We needed to create a select dropdown that could adapt to the number of options, providing a seamless user experience regardless of the scale. It was a bit of a design revolution, a chance to rethink how we approached select dropdowns.
Action – The Adaptive Select Solution
We started by researching the bug, confirming the 1000-option limit. We then brainstormed solutions, thinking about how we could make the select dropdown more adaptable.
After a bit of digging, I came up with a design that would enhance or degrade based on the number of options. It was a bit like a chameleon, changing its form to suit the situation. We built this into our design system, giving engineers a clear framework to work with.
We ended up with four different versions:
- 1-5 options: Buttons, for quick and easy selection, reducing clicks and mouse movement.
- 6-15 options: A regular select dropdown, for those mid-range options.
- 15-50 options: A searchable select box, allowing users to type and find options quicker.
- 51+ options: A searchable select box with a side filter, allowing users to filter by category and narrow down their choices.
It was a bit like creating a Swiss Army knife of select dropdowns, each version tailored to a specific need.
Result – The Select Dropdown Success
The bug was fixed, and our customer was chuffed to bits. They could finally access all their options, beyond the letter ‘S’. We also created clear documentation on how the adaptive select dropdown worked, making it easier for engineers to implement it in the future. It was a proper success, a testament to the power of good design and a bit of problem-solving.
It was a reminder that even the smallest design elements can have a big impact on user experience. And that sometimes, a bit of creative thinking can turn a bug into a feature.
If you wish to learn more about this project, please let me know.
Ready to choose the perfect digital foundation for your new website or product? Get in touch with us today for a free platform consultation! We’ll analyse your business needs, discuss your options, and help you make the right choice.