iDiff
A visual tool to compare multiple fidelities of designs
What Design tools let you click through one prototype at a time. There's no way to compare lo-fi, mid-fi, and hi-fi versions side by side, or show stakeholders the reasoning behind decisions across iterations.
Why The delta between iterations is where design thinking is most visible, both for learning and for building shared understanding with collaborators and clients.
How A split-screen web app where you upload prototype images for each fidelity, place hotspots, and preview them together with adjustable splits and device masks.
Background
During my first semester at CMU, I was fascinated by how much a design evolved between lo-fi paper sketches and high-fidelity screens. Existing tools like InVision let you click through a single prototype, but there was no good way to compare fidelities side-by-side or communicate the intent behind design decisions. The tool I wanted would let designers place lo-fi, mid-fi, and hi-fi prototypes on a split-screen display with hotspots and destination states, making the delta between iterations immediately visible.
Ideation
The core concept combined the clarity of lo-fi paper sketches with the satisfying click-through feel of a digital prototype. I settled on a collaborative showcase tool with two modes: an authoring view that consolidates controls into a single pane to minimize context-switching, and a preview view supporting horizontal and vertical splits with optional device masks for tablet and phone form factors.
Paper Prototyping
I sketched both authoring and preview views and ran quick validation sessions. The drag-bar handler was immediately legible as a split-screen control, with strong affordance for sliding between fidelities. The feedback pointed to three refinements.
- Feedback 1For the authoring view, move controls to a single pane (either left or right) to minimize jumping between screens.
- Feedback 2For previewing, enable both horizontal and vertical splits for comparing fidelities.
- Feedback 3Add multiple screen and device masks to enhance the preview experience.
Authoring Flow
The authoring flow is where you compose a showcase by uploading images for each fidelity, placing hotspots on them, linking each hotspot to a destination state, and publishing the preview link. All controls live in a single left-side pane.
Previewing Flow
The preview supports both laptop and iPad skin modes. When opened on an actual iPad the device skin disappears, letting users interact with the prototype on the physical device as intended.