Finding and selecting items with
Enhanced Menu
What was the problem?
SIT (Security Investigation Tool) is an auditing tool in the Admin Console that enables admins to investigate and triage security issues. As we continued enhancing this tool with additional data sources and capabilities, items in each dropdown menu grew exponentially, resulting in excessively long lists.
The issue here was that the Admin Console design system had only basic menu interfaces, lacking layers or functionalities. The lengthy list of items hindered admins from efficiently completing their tasks. The absence of grouping into categories or a specific order increased the challenge even further. Additionally, the menu occupying excessive screen space was visually unpleasant.
As a result, we determined that an enhanced menu interface was necessary for the SIT.
Image of SIT before using Enhanced Menu
How did we solve the problem?
We addressed the issue by designing and implementing the Enhanced Menu in the SIT. This change not only fixed the problem of excessive screen space, but more importantly, enhanced the user experience for admins in efficiently locating and selecting items.
This improvement was driven by three new features introduced in the Enhanced Menu: Search, Pin, and Grouping.
Image of SIT with Enhanced Menu
Search
The search feature is most effective when users know the exact name of the item they are looking for. By typing item name into the search field, the results will filter, leaving only the desired item. Additionally, when users type in the item name partially, there is still a good chance that the results will be narrowed down to a manageable number, making the selection much easier.
Pin
The Pin feature is most effective for power users who are familiar with items they frequently select. In many cases, admins need to perform repetitive actions, and they already know which selections they need most of the time. This feature enables admins to pin their most commonly selected items to the top of the list, eliminating the need for them to search.
Grouping
The Grouping feature is most useful when users have a vague idea of what they are looking for but don't know the exact details. This feature organizes items into categories, each with a title. Users can expand and collapse these groups, enabling them to first identify a relevant category and then search for the item within a much shorter list.
Variations
The fully enhanced menu incorporates all three features mentioned above. However, depending on the situation, there could be cases where including all three might be considered excessive. This is why the enhanced menu was designed to be modular, allowing the components to mix and match one, two, or all three features based on the specific need.
Documentation
These are examples of documentation shared with cross-functional partners to help ensure that the intended design is understood and implemented accurately.
Project status and outcome
The Enhanced Menu was successfully GA launched as a custom component for the Security Investigation Tool. Following its launch, it received positive feedback both internally and externally, making a compelling case for its inclusion in the Novitas design system. Currently, the process of incorporating it as an official Novitas component is underway, allowing designers to soon integrate it seamlessly throughout the Admin Console.
My role and collaboration
Initially, this project was not part of the Product Manager's roadmap. However, I organized meetings with the PM and Engineers to highlight the UX issue. Supported by the negative feedback from our users, I successfully persuaded the team to include this project in our immediate roadmap.
Given my strong advocacy for this project, I took on the responsibility of leading it from kickoff to launch by
Conducting and guiding discussions to address the user needs
Working on the end-to-end UX, from ideation to final deliveries
Ensuring seamless communication with Engineers throughout the entire process to guarantee pixel-perfect implementations
I mainly collaborated with 3 Engineers, 1 Product Manager and 1 Writer for this project.
For more details about the project, please contact jtk8682@gmail.com