Rebuilding a field-documentation app from scratch — and the design system behind it

It had started life as a photo tool — take pictures on site, attach them to a job — and as the ambition grew to real documentation, flow after flow got bolted onto it. The problem was structural, not cosmetic; no restyling would fix it. So the call, agreed with the team, was to rebuild from the ground up rather than patch.

The work finishes on site, but the paperwork follows them home.

Documentation is the part of the job electricians like least — done on a ladder, in a basement, one-handed. A tool that demands concentration won't get used. So one measure governed the rebuild: speed. Make documenting faster than paper, and the tool becomes the obvious choice.

This came from research, not a hunch — interviews and journey mapping around the whole job, from arriving on site to handing over a signed report. One pattern ran through all of it: German electrical work is already standardised. A job is named after the standard it follows — device testing under VDE 0701/0702, installation tests under VDE 0100-600 — and that standard already prescribes what has to be measured and recorded. Electricians don't think “I'll create a custom document”; they think “I'm doing a 0100-600 today.”

So the app was flipped around that. Instead of a blank canvas, it asks one question:

What task are you doing today?

Every answer is a ready-made template shaped like the real job. The concept was proven in low-fidelity wireframes with electricians before a single high-fidelity screen was drawn — and it became the test every later decision had to pass: does this mirror how the work already happens, and does it make it faster?

Then we tested the rebuilt app in moderated sessions with users. One session, mapped stage by stage, and what six of them had in common:

Get it wrong and every screen spends its life fighting it. Each scope shows only what belongs to it, so users are never lost, and settings made high up cascade down automatically — fewer things to enter, less to get wrong.

NFC · Measurement import

The fast path, made optional on purpose

The reading can arrive three equal ways: tap the phone to the tester over NFC, scan its display, or type it by hand. Making NFC the only hero was tempting — but field testers are old, borrowed, or flat, and a “primary” path half the users can't take says the app wasn't built for them. So NFC is the quickest route, and entering the value by hand is always a normal option.

AI · Device testing

The model reads it; the electrician stays in charge

Image recognition takes on the tedious transcription: two photos — the device and its plate — and the fields fill themselves. The design judgement was in the guardrails. The electrician signs the report, so the model can never be the authority: results land in ordinary editable fields, with a highlight showing what was detected. Recognition is a shortcut through the typing — the professional stays accountable for what goes in.

Prefilled values are the biggest single time saving in the product, and they work unseen. An electrician's answers repeat far more than they vary — the same contractor, the same client, the same standard — so they're set once, at workspace or project level, and every documentation inherits them. And real jobs repeat too — circuit after circuit, room after room — so blocks are repeatable. Making that effortless took most of the detail work. It was prototyped, usability-tested on real jobs, then A/B tested and iterated with electricians until it held up in their hands.

Report · Signature

Handed over before leaving

The job ends on site. Signed on the glass — or pulled from a saved profile signature — the finished PDF carries name, city, date and a QR code for digital access. Either signature can be left empty to sign on paper, because the second is often the customer's and they aren't holding the phone.

I made one architectural call early that shaped everything that followed: don't draw screens — build a system and assemble them from it. Colour, type, spacing and radius are Figma variables, and every component references a token, never a hard-coded value. The result is a single published library — 600+ components, consumed on iOS and Android — where changing one token updates every screen that uses it. I also set the system up in Tokens Studio, a common way for teams to keep tokens in sync with code.

The payoff came with a business decision. The product was built as Onstruc; then Wiha came in behind it and it went to market as Sparkify. Designers from Wiha joined the team through that partnership, and I worked with them and with my co-founder, who is also a designer. I knew a re-theme was coming, so I structured for it from the start — every colour referenced by role, one primary ramp a brand could own. When the rebrand arrived it was a set of new values behind the same variable names: not a redraw.

Onstruc · primary/500 · #425c59

Sparkify · primary/500 · #0a1a2f

The same library carried the product to the desk. I designed the majority of the web client with Onstruc's CTO — where templates are authored from fourteen field types plus two containers — and the marketing site at sparkify.cloud, so the design language runs from a form on a ladder to the page that sells it.

Sparkify shipped. It's live on iPhone, iPad, Android and a browser-based web client, the same documentation synced across all of them, free to download. The rebuild replaced a tool that produced 10–20 documentations a day on average with one shaped around how the work actually happens: from the first measurement on site to a signed PDF, without retyping. The app has passed 1,000 downloads on Google Play and is rated 4.9 across its first reviews. And because it runs on a tokenised system, the team keeps shipping — new templates, a second brand, hardware and planning-tool integrations — without redesigning the app each time.

Get the app

Web client ↗sparkify.cloud ↗

The rebuild started from one idea: the structure users needed already existed in their trade, not in the software. The rest of the product follows from that.