Vanilla Breeze

impact-effort

2x2 prioritization matrix with drag-and-drop between quadrants (Quick Wins, Big Bets, Fill-Ins, Money Pit).

Overview

A web component that renders a 2×2 impact/effort prioritization matrix with four quadrants: Quick Wins, Big Bets, Fill-Ins, and Money Pit. Items can be dragged between quadrants using native drag-and-drop or transferred via keyboard. Built on <drag-surface> for reorder and cross-surface transfer. Ideal for sprint prioritization, feature triage, and design workshops.

Attributes

Attribute Type Default Description
src string (URL) — Path to a JSON file containing an array of item objects
compact boolean — Reduces grid height, padding, and label sizes for denser layouts
title string — Optional heading displayed above the matrix

Child Attributes

Each direct child of <impact-effort> represents an item in the matrix. These attributes control placement and drag behavior:

Attribute Type Default Description
data-quadrant enum "quick-wins" Target quadrant: quick-wins, big-bets, fill-ins, or money-pit
draggable boolean — Must be set to "true" for drag capability. Auto-applied if missing.
data-id string auto-generated Stable identifier for the item, included in event detail. Auto-generated if missing.

Quadrant Descriptions

The matrix maps items along two axes — Impact (vertical) and Effort (horizontal) — creating four strategic quadrants:

Quadrant Position Description Typical Items
quick-wins Top-left High impact · Low effort Easy fixes, quick improvements, low-hanging fruit
big-bets Top-right High impact · High effort Major features, platform rewrites, strategic investments
fill-ins Bottom-left Low impact · Low effort Nice-to-haves, polish tasks, minor enhancements
money-pit Bottom-right Low impact · High effort Expensive features with unclear ROI, legacy migrations

Axis labels ("Impact" with an up arrow, "Effort" with a right arrow) are rendered alongside the grid for visual context. Each quadrant has a subtle background tint — green for Quick Wins, amber for Big Bets, blue for Fill-Ins, and red for Money Pit.

Drag Interaction

Items move between quadrants via native drag-and-drop. Each quadrant contains a <drag-surface> element sharing the same group identifier, enabling cross-surface transfers.

  • Drag — grab any item and drop it onto a different quadrant. The item's data-quadrant attribute updates automatically.
  • Keyboard — <drag-surface> provides keyboard reorder and transfer. Focus an item and use the keyboard shortcuts to move it between surfaces.
  • Live announcement — when an item moves between quadrants, a hidden live region announces the change for screen readers (e.g., "Moved PROJ-101 to Big Bets").

Data Mode

Load items from a JSON file by setting the src attribute. The file should contain an array of item objects, each with an id, quadrant, and label (or text).

Each JSON entry creates an <article> element with draggable="true" and the appropriate data-quadrant and data-id attributes. For richer item rendering, use <user-story> children directly in HTML instead of JSON mode.

Events

Event Detail When
impact-effort:move { itemId, from, to, item } Fires when an item is dragged between quadrants. from and to are quadrant names.
impact-effort:ready { quadrantCounts } Fires after the component initializes. quadrantCounts is an object mapping each quadrant name to the number of items it contains.

Accessibility

  • The grid uses role="region" with aria-label="Impact-Effort prioritization matrix"
  • Each quadrant section has an aria-label combining the quadrant name and its impact/effort description (e.g., "Quick Wins: High impact · Low effort")
  • Axis labels ("Impact" and "Effort") use aria-hidden="true" since the quadrant labels already convey the meaning
  • A hidden live region with aria-live="polite" announces item moves between quadrants
  • Keyboard transfer is provided by the underlying <drag-surface> components
  • Respects prefers-reduced-motion: reduce by disabling all transitions
  • Uses container-type: inline-size and stacks to a single column at narrow viewports (<30rem)
  • Print styles remove minimum heights, set static cursors, and add visible borders

Related

  • <user-story> — Story cards that serve as draggable items in the matrix
  • <empathy-map> — Empathy maps for discovering pain points to prioritize
  • <story-map> — Horizontal story mapping for sprint planning
  • <user-persona> — Persona cards providing context for prioritized items
  • <drag-surface> — The underlying drag-and-drop primitive used by each quadrant
  • UX Planning Pack — loads all six UX components together
↑