GQueues

My work at GQueues

My role: Product design · Interaction design · Front-end engineering
GQueues work: 2025–present

At Baydin, I design and build interfaces for GQueues, a productivity app with nested tasks. My work includes the board’s drag-and-drop interactions, a command palette and shared shortcut system, task Snooze, and components used by other engineers.

For the board, the team set the product requirements; I designed the detailed behavior, layout, and motion, then built the production interface.

Working out the board's behavior

The goal was to give people a board view while preserving GQueues’ nested-task model. Columns had to correspond to sections, cards needed to show specified task details, and the board had to support keyboard navigation.

I designed the card layout, responsive behavior, empty and collapsed sections, and how tasks without a section would appear. Sections also needed to work in list view, where I designed how people add, rename, reorder, and collapse them.

Reordering or nesting?

Dragging could change more than a task’s order or column. It could also make a task a subtask, move it to a different parent, or bring it back out on its own.

Dragging a task between columns without nesting it.

The existing drag-and-drop library was built for nested lists and felt clumsy on the board, especially while scrolling. I proposed replacing it and rebuilt the interaction, refining card movement and drop transitions before adding subtask support.

My first approach used a fixed hover delay to nest a task. Team feedback exposed competing intentions: the delay could feel slow when someone wanted to nest, yet still cause accidental nesting when they were just reordering.

I made the delay depend on the destination:

• No subtasks: the longest delay, to avoid accidental nesting.
• Collapsed subtasks: a shorter delay before opening the group.
• Expanded subtasks: no delay, so people could drop straight into the visible group.

Hovering over a task, then dropping it as a subtask.

I also refined horizontal and vertical auto-scroll and the transition from the compact dragged card back to the full card. I tuned the timing and easing to keep movement quick without an abrupt jump between states.

Fast when familiar. Discoverable when new.

I wanted people to navigate and rearrange tasks without constantly switching between keyboard and mouse. I used familiar arrow-key patterns for navigation and movement, and added right-click menus for quick access to card actions. Those shortcuts shouldn’t be a prerequisite for using the board, so I kept a menu button on hover that exposes the same actions.

Moving the selected task between columns with keyboard shortcuts.

Feedback after launch

One user had abandoned GQueues five years earlier because it lacked a board view. They responded to the launch announcement to say it now had the features they’d needed for their projects. Another praised that we had kept the board “clean and light” compared with Trello.

Less to rebuild next time

I first built the dropdown menu component for Snooze. Menus reposition to fit the available space, and long menus scroll within the window. A safe-triangle algorithm keeps submenus open while the pointer moves diagonally toward them, while allowing people to switch items when they pause on another row. Keyboard navigation supports moving through items, opening and closing submenus, and selecting actions.

The component became the standard for new dropdowns across the app, including those in Kanban and the rich-text toolbar.

Menus adjust to available space and stay open as the pointer moves diagonally into a submenu.

I built the toolbar for rich-text editing in task notes. As the editor narrows, actions move into an overflow menu built with the shared dropdown component, keeping them available without wrapping the toolbar onto multiple rows. They return to the toolbar when space allows. The toolbar has since been reused in further editor development.

Formatting actions move into the overflow menu as the editor narrows.

The app uses vanilla JavaScript and an older version of jQuery. I built a shared base for web components, then used it to create reusable dropdowns and toolbars.

GQueues had no shared design files when we took it over. I reviewed the existing design choices in the code and browser, then built a Figma library with color, type, spacing, light and dark modes, and components with states and variants.

Zoomed-out Figma library showing shared components, states, and light and dark modes.

Snooze

Snooze lets people set aside a task and have it return at a chosen date or time. I designed and implemented the experience, including the date and time pickers and Snoozed queue. I introduced natural-language date entry as a direct way to specify when a task should return.

Command palette

I proposed the command palette during a hackathon, designed and built it primarily in code, then made the case to ship it. Search gives people access to actions and navigation without having to memorize every shortcut.

I replaced the legacy shortcut system so the palette and keyboard shortcuts share action definitions and handlers. Selecting an action in the palette or pressing its shortcut invokes the same handler. Context conditions determine when each action is available.

I built the palette as a web component within GQueues’ existing JavaScript app, with fuzzy search and subcommands. The shared system later supported quick navigation between queues in accounts with large sidebars.

After a beta, the palette was released to all users in September 2025.

Finding a task from the command palette.