Design direction / Patchwork
Different decisions.
Different interfaces.
A five-person software team needs to decide which bugs block Friday's release. The useful first screen should support that decision, not summarize every project metric.
Read the input brief
Patchwork is a fictional B2B issue tracker. Existing data: issue title, severity, owner, release, status. Users triage daily on desktop and check status on phones. Keep readable issue IDs and keyboard-friendly controls. No analytics or AI prioritization backend exists.
Start with the triage desk.
Daily work is comparing several bugs and assigning an owner. Keeping the issue list next to the selected issue's details avoids a trip through several pages. The runway helps release meetings; the single-item queue slows comparison.
Executable design contract
- Desktop: 220px navigation, flexible issue list, 340px detail panel.
- Type: system sans; 28px page title, 14px issue rows, 12px metadata; monospace issue IDs.
- Spacing: 8px base, 16px row gaps, 24px section separation.
- Cobalt means selected/action; red marks blocking severity and includes a text label.
First implementation slice
Build the release-filtered list and one selected issue. On mobile, open details below the selected row with a visible Back to issues action.
Avoid here: ornamental charts, unearned AI priority scores and separate cards around each data cell.
These compositions are interactive direction studies, not connected tracker features. Screen labels are illustrative.