← Back to projects
PROJECT · 03

FRAME / COMPARE

Comparing interface versions side by side so every visual change becomes visible.

Status
Internal tool prototype
Role
Tool design, frontend engineering
Duration
3 weeks
Year
2024
2-upside-by-side view
50%default split
4keyboard shortcuts
CASE STUDY
ToolingImagesUX

Context

The hardest changes to discuss in design review are rarely complete redesigns. They are small shifts in spacing, weight, and alignment. Switching between two pages from memory makes those shifts easy to miss.

Approach

Frame / Compare offers side-by-side, split, and flicker modes. Every mode shares the same viewing model, keeping the conversation on the change itself.

Engineering focus

Image decoding, zoom, and dragging are separated to avoid repeated work with high-resolution screenshots. Keyboard shortcuts cover the primary actions for fast review sessions.

Takeaway

The most useful part of a tool is not always more data. It can be a shared way to look. Explicit comparison modes make vague “it feels different” conversations easier to turn into concrete observations.

SANDBOXED EXPERIENCE

Interactive demo

This demo runs inside a restricted sandbox.