Massive Multi-Select
Problem
Selecting attributes from a multi-select dropdown resulted in lots of time spent hunting through a overwhelming list. While the list was grouped, the groups were not visible until scrolling past them. And trying to review selections was easily scannable or grouped.
Research
I spoke with internal users to identify pinpoints with the current component and asked them "if it could work like magic, how would you imagine it" to understand the real needs.
I then researched several other designs currently out there that tackle a large number of multi-select options, including a great UX article on Improving the usability of multi-selecting from a long list. An existing solution was found and I modified it to meet our needs.
I went through a couple different iterations of the design, prototyping each with internal users to gather feedback. I participated in a love code session with the UI Lead to enhance the experience as he began building out my design.
Solution
A new component was created that made it easier for users to find and review selections from a large list without having to hunt through a dropdown or sift through an endless sea of selections formatted as chips. Now a user could look through groups to find the attribute they needed with a smaller focused list to choose from. A collection of all selections could be viewed separately, and a search enabled quick location of known attributes.
After the new component launched the reception from users was very positive, they were able to find and edit attributes with greater ease than before.