Offline First Field Reporting for Remote Floor Plan Corrections
Client: magicplan Vibe Code Challenge
Role: Solo product designer, from concept to coded prototype
Format: Take home challenge
Method: Problem reframing, AI assisted research, coded prototype
Stack: React, TypeScript, Tailwind CSS, Framer Motion
Outcome: A working prototype with separate views for the field crew lead and the CAD expert, connected by one shared audit timeline from report to site verification
Context
Ticket #4821: a floor plan mismatch on a renovation site. Marek, the crew lead, is in a basement in Berlin with work gloves on, one bar of signal and three workers waiting. Ines, the CAD expert in Munich, has to correct the plan before her shift ends at 15:00.
On paper it was a reporting task. In reality it was a problem of trust and timing.
Reframing the Problem
Instead of asking how Marek reports an error, I asked how Ines gets enough trustworthy, structured context to correct a vector plan remotely, without a phone call and without stable connectivity.
Key Decisions
Structured evidence first, conversation second. Every report is bound to a vector object on the plan, for example wall W04, and carries the planned value, the measured value, the offset, a measured twice confirmation and a compressed photo. Text and short voice notes exist, but only as a secondary layer.
Offline first. Capturing and sending are decoupled. Data is saved on the iPad first and then moves through visible states: saved locally, queued, syncing, delivered. Marek can lock the device and return to his crew without wondering whether anything got lost.
Two interfaces for two very different people. Marek gets large touch targets, a big keypad, high contrast and no typing, so a report takes under 45 seconds with gloves on. Ines gets a dense desktop view with visual diffs and plan history.
Closed means verified on site. Publishing a corrected plan does not close the ticket. Marek checks the new version against the building and can reopen it with every measurement, photo and note preserved.
The Concept I Dropped
My first idea was live freehand markup on the plan while Ines watched. It failed on both ends: gloves made drawing imprecise, and real time streaming broke on one bar of signal. I replaced it with object bound selection: tap the wall, enter the measurement, attach a photo. More communication tools did not create clarity. Structured evidence did.
What I Left Out on Purpose
Live video, open chat, AR scanning and automatic AI plan editing. Each either fails on a weak network or moves a decision with legal liability away from the human expert.
How I Would Validate It
Glove and lighting tests on real sites, network stress tests with heavy packet loss, and a two week pilot on five sites measuring time to resolution, first time fix rate, fewer phone calls and reopen rate.
How I Built It
I used Claude, ChatGPT and Gemini to challenge my assumptions and map edge cases, then built the prototype in React, TypeScript, Tailwind CSS and Framer Motion, versioned on GitHub and deployed as a live demo.