Tag management originated from recurring user feedback, requests that had reached enough volume to escalate through the internal feedback system to the design team. The existing functionality was limited to administrators in settings, leaving everyday users without direct access to the feature. As the primary designer on the project, the work involved translating user feedback into a net new feature within an existing design system.
Prototype
Component Features
The Dropdown Interface: The solution centered on a dropdown interface triggered by a tertiary plus Tag button, opening directly to a search bar and full tag list. A key early decision was to populate the full list on open rather than requiring search input first, ensuring users could browse without knowing exactly what they were looking for. Tags were ordered by creation date to reflect recency and familiarity.
Duplicate Prevention: Duplicate prevention was handled entirely within the search interaction. As users typed, the list filtered in real time to surface similar tags before a new one would be added. If an exact match existed, that tag was applied automatically. If no match was found, the create modal pre-populated with whatever the user had already typed, removing the need to retype.
Closing Behavior: A save button was included at close, technically redundant since tags were applied on selection, but retained as a deliberate UX decision to give users a clear positive close action and reduce any sense of uncertainty. In retrospect the interaction could be refined further, but the priority at the time was shipping a reliable, friction-reducing experience during a compressed timeline.
Search Feedback: Empty states were documented for search results that returned no matches, ensuring users had clear feedback when a tag didn't exist yet and a natural path to creating one. The empty state also surfaced the create option directly, turning a dead end into a natural next step.
Design and Functionality
Collaborative Feasibility: The design challenge wasn't just what to build but what was possible within an existing component library and technical framework. Rather than designing in isolation and handing specs to development, the process involved ongoing collaboration with engineers to validate feasibility at each step. Can a search bar live inside a dropdown? Can a button update its appearance to reflect the selected color in real time? Each question shaped the final solution.
Working Within the System: The component library was treated as a toolkit rather than a constraint. Existing components were composed in new ways to create interactions the system hadn't supported before, while maintaining visual and behavioral consistency with the broader platform. The color picker is a good example of this approach, a text field component was adapted so the caret button previewed the selected color, with the dropdown opening a gradient selector and hex input below. The result felt native to the system despite being a custom solution.
Performance Considerations: Because this was a site-wide addition backed by significant user feedback volume, there was organizational runway to pursue more considered solutions rather than quick fixes. That context informed decisions like lazy loading the tag list with a shimmer state for longer load times, a pattern that existed in the system but hadn't been applied to a dropdown before.
Documentation and Handoff
Spec File: Handoff was delivered as a Sketch spec file with behavioral annotations covering interaction patterns, component states, spacing details. Notes were written directly on the file to give developers clear context on how components should behave without requiring a separate document or meeting to interpret the designs.
Handoff and Timeline: The component was handed off and entered the development backlog. While the full release timeline was disrupted by external circumstances, the handoff documentation was complete and thorough. The priority throughout was delivering a solution that was implementable and precise rather than rushed to meet an arbitrary deadline.
