WorkSparkify
Rebuilding a field-documentation app from scratch — and the design system behind it
Sparkify is a field-documentation app for electricians — they test and sign off electrical installations, then have to prove it. I joined a product that had grown from a photo tool into a job it was never structured to do, and that almost nobody had adopted. As design lead and the team's only designer, I rebuilt it end-to-end — the information architecture, the core flows, and the tokenised design system that now carries it across two brands and every surface: iOS, Android and web. What follows is the thinking behind that rebuild — the problems I found, the decisions I made, and what shipped.
Contents
My role
- Product design, end-to-end
- UX research & user flows
- Wireframes → clickable prototypes (low → high fidelity)
- Design-system architecture (tokens & components)
- Design language & multi-brand theming
- Web client — desktop surface
- Marketing site — sparkify.cloud
- Developer handoff — iOS & Android
The team
- CEO, CFO, CTO & CCO
- iOS & Android engineering leads
- ML / image-recognition & QA
- Master electricians — field testing
- Investors & academic advisors
Deliverables
- Rebuilt information architecture & user flows
- Wireframes & high-fidelity clickable prototypes
- Tokenised design system (published library)
- Two brands from one system (Onstruc + Sparkify)
- Component library for iOS & Android
01
The starting point
An app that had grown into a job it was never structured to do — and that few had adopted.
What was there before
The first question was why so few people used 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 what was, underneath, still a photo app. 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 camera was the app The shutter sat in the middle of the tab bar, Projects and Gallery either side. The main verb was take a photo — not document a job.
Projects were counted in pictures Each project's subtitle was a photo count — 6 Pictures, 4 Pictures. The unit of work was the image, so nothing in the model knew what a finished report even was.
Documentation arrived bolted on When it came, it came as a long flat list of fields with no structure of its own, and no relation to the standard the report actually had to satisfy.
The core problem
The work finished on site. The paperwork followed them home.
Documentation is the part of the job electricians like least and can't avoid — done on a ladder, in a basement, one-handed and out of patience. Any tool that demands concentration loses to a clipboard. So one measure governed the rebuild: speed. Make documenting faster than paper, automate every step a machine could do, and the tool stops being a chore and becomes the obvious choice.
The classic way
Measure. Note it down. Transfer it later. Fix the mistakes. Compose the report.
The customer gets a Word or Excel file with a printed signature — days later.
The goal I designed toward
Pull the readings, sign on site, produce the finished report on the spot.
The customer gets a signed VDE PDF with the electrician's logo — before they walk out.
02
The insight that unlocked it
The way in wasn't to design a better document — it was to mirror the electrician's world, because the structure users needed already existed in their trade, not in the software.
This came from research, not a hunch — interviews, affinity maps, and journey maps 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, visual inspection — 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.” The task-first concept was proven in low-fidelity wireframes with electricians before a single high-fidelity screen was drawn.
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. That question became the spine, and the test every later decision had to pass: does this mirror how the work already happens, and does it make it faster? Everything downstream — prefilled values, NFC transfer, photo recognition — follows from it.
The same principle repeats everywhere. Nearby projects uses location to surface the sites around you, because someone opening the app is almost always standing on the job. And the tree view gives each project a flexible nested structure — a proven way to organise information, long used across many fields, so I adapted it rather than inventing something new. A site maps naturally to site → building → floor → flat, but it bends to however a job is actually organised.
03
The decision that came before any screen
The hierarchy had to be settled before any layout, because it's the one thing every screen inherits.
Get it wrong and every screen spends its life fighting it. So the first move wasn't a screen — it was settling one nested hierarchy, workspace down to a single field. The payoff for the user: each scope shows only what belongs to it, so they're never lost, and settings made high up cascade down automatically — fewer things to enter, less to get wrong.
Values cascade. A prefilled value set at the workspace level flows down into every project and document beneath — inherited fields appear pre-populated and marked, so the electrician confirms rather than retypes.
Structure · Projects
A building is not a flat list
A site has buildings, a building has floors, a floor has flats — so projects nest, and the tree is shown rather than described. Each level carries what belongs to it: an address, its own documents, its own prefilled values. The counts sit on the row, so the state of a job is legible without opening it. One structure, learned once.
04
Every feature had to remove a keystroke
With speed as the measure, features weren't added to impress — each one exists to take a step away from the person on site.
None of it is walled off. Sparkify reads from the hardware and planning tools electricians already use — measurements straight from Wiha and Sola testers, circuit lists imported from Stromlaufplan.de — so it plugs into the kit they already rely on, rather than asking them to abandon it.
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 the fast route comes first, and the manual one is never a punishment.
AI · Device testing
The model reads it; the electrician stays in charge
Transcribing a nameplate is the tedious part, so image recognition takes it on: 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, not a locked AI output, with a highlight showing what was detected and the expectation set up front. Recognition is a shortcut through the typing — the professional stays accountable for what goes in.
Reuse · Project & workspace layer
Prefilled values — say it once, reuse it everywhere
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 recurring client, the same standard — so those values are set once and never retyped. They live at two levels, deliberately: the workspace holds what's true of the whole company, the project what's true of one site, and every documentation inherits both. The challenge was making the setup feel small — solved as a three-step wizard that always shows where you are and how much is left.
01 · Pick the template Prefills are set per template, so a 0701/0702 and a photo documentation each keep their own defaults instead of sharing one blurred set.
02 · Choose the fields Fields are ticked in the groups they already live in, so the choice mirrors the document's own structure — and a whole group can be taken in one tap.
03 · See what's left Every group carries its own 0 / 6 filled count. The same progress pattern as the documentation itself, so the wizard needs no new vocabulary.
↳ The form itself Not a fourth step — the destination. The same field components as the live document, including the address picker, so setting a prefill is indistinguishable from filling one in.
Editing a default isn't rewriting history. Changing a prefilled value updates the default that new documentations start from — finished ones are left alone. Pushing the change into existing documentations is a separate, explicit action: two verbs for two intentions, because quietly rewriting a signed report is not one anybody wants.
05
The core loop — where the rebuild had to earn its keep
This is the flow an electrician runs dozens of times a day, so I designed it around one constraint: it has to work on a ladder, one-handed, with no patience to spare.
The hard part wasn't the fields — it was that no two jobs are the same shape. A smoke-detector check and a VDE 0100-600 report share components, not a layout. A fixed screen per report would have shipped faster but broken the first time a workspace needed its own template. So the documentation is built from typed parts — text, number, date, select, photo, address, barcode, measurement among them — that assemble into any structure a template defines. More work up front, and the reason the product scales.
Real jobs repeat — circuit after circuit, room after room — so blocks are repeatable: add, duplicate, reorder, delete — with deletion always confirmed before anything is lost. Making that effortless took most of the detail work, and none of it was guesswork — the flow was prototyped, usability-tested on real jobs, then A/B tested and iterated with electricians until it held up in their hands. The adoption curve below is what that produced.
Designed for the messy middle, not the happy path. Every action carries its full set of outcomes — success, confirmation, error — as toasts, and the multi-selector expands into a focused modal so choosing many options never fights the form underneath. These are the edge cases most field tools skip, and exactly where an electrician gets stuck.
01 · Teach it in place One hint, shown exactly where the gesture lives and dismissible for good — instead of an onboarding screen nobody reads. It's an authored feature, not a one-off: any block can carry an instruction.
02 · Duplicate in one swipe The gesture reveals two actions. Duplicate is instant; Delete is the only red element on the screen, and always confirmed.
03 · The copy, already in place The new block lands directly under the original and takes focus. Its label is built from its own field values, so the copy reads “4, Living room” — never “Block 4”.
04 · Reorder without dragging Reorder mode swaps the list for arrows — precise with gloves on, and impossible to trigger by accident while scrolling a long form.
The payoff, in real product analytics: after this shipped in late June, ~1 in 4 daily documentation-makers were duplicating a block or a whole documentation (peaks ~35%). Current partial week excluded.
Set up the report Two signature slots, and either can be left as an empty field to sign on paper instead — because the second signature is often the customer's, and the customer isn't holding the phone.
Signed on the glass Drawn with a finger, or pulled in from a saved profile signature for the tenth job that week. Name, city and date sit with it, because a signature without them isn't worth anything to a customer.
Handed over before leaving The finished report — signed, with a QR code for digital access. The job ends on site, which is the whole promise of the rebuild in one artefact.
The app in motion
Short recordings from the real app — the flows that make documentation quick on site.
Projects
Create a project in seconds
Naming it is enough to start — the address is optional, so nothing blocks you when you're standing on a site that isn't catalogued yet. Fewer required fields, faster start.
AI · Device testing
Add a device from a photo
The same image recognition, in motion — shoot the device and its plate and the fields fill themselves, one segment of a template that does much more.
06
The system every screen is built from
Not documentation written after the fact — the thing the screens are assembled from, and the reason one designer could keep a product this size consistent.
I made one architectural call early that paid for itself many times over: 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 — 6,000+ components, consumed on iOS and Android — where changing one token updates every screen that uses it. It is also why the second brand later cost days instead of months.
Foundations
The point isn't the individual values — it's that one architecture scaled the whole product consistently, and let a second brand ship by swapping token values instead of redesigning screens.
Every value below is a real Figma variable from the published library. Colour, type, spacing, radius — even elevation and blur — are tokens, so components and screens reference the token, never a raw value.
Colour · brand ramp
Colour · text & neutral
The task-colour system
Each documentation task carries its own colour, defined once as a gradient token and reused on its home tile, its header and its report. The design system and the product concept are the same idea.
Type · Roboto headings + Inter body
Spacing scale
Corner radius
Component library · a representative slice
Variant-based component sets, every property bound to the tokens above — one published library, built once, consumed on iOS and Android.
07
Two brands, one system
A second brand shipped as a set of new token values — not a redesign.
Because the system runs on tokens rather than fixed styles, a second brand didn't mean a second design. Onstruc and Sparkify use the same token names — primary/500, text/500, the task-colour set — with different values inside. Re-theming was a matter of swapping values, not redrawing screens: change the variable, and the whole app follows.
Onstruc
primary/500 · #425c59
Sparkify
primary/500 · #0a1a2f
One variable, two values. Type (Inter · 16/24), spacing (space-100 = 8) and radius (radius-300 = 8) are byte-for-byte identical across both brands — only the primary ramp changes. That's the entire re-theme.
The two brands weren't a design exercise — they were a business decision. The product was built as Onstruc; then Wiha came in behind it and it went to market as Sparkify. I knew a re-theme was coming, so I structured for it from the start: every colour referenced by role, nothing hard-coded, 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, not a project. Planning for it was the work; the switch itself was almost an anticlimax.
Onstruc · primary/500 · #425c59
Sparkify · primary/500 · #0a1a2f
08
Built for the field
Offline sync, roles and permissions, address entry, empty and error states — the unglamorous work that decides whether a tool survives real use.
Offline by default
Basements and new-builds have no signal. Work continues offline; changes sync on reconnect, and a clear banner tells the user the count they see may be stale.
Roles & permissions
Owner, Manager, User and Guest — assignable per member, at both workspace and project level, with distinct views for admins and guests.
Designed empty & error states
Every list has a purpose-built empty state; every action has success, confirmation and error feedback. No blank screens, no dead ends.
Robust address entry
Search autocomplete, drop-a-pin on the map, or type it by hand — with a graceful fallback when precise/GPS lookup isn't available.
Recovery · Draft state
The safety net for work that gets interrupted
Phones die, overheat, and get closed mid-form. Progress saves automatically as a draft, and returning to the app asks one question on Home, where it can't be missed: continue, or discard. Continue is emphasised, discard is the quiet one — when someone has lost an hour on a ladder, the recovery path shouldn't be the one they hunt for.
Access · Members
Permissions where the people are, not in a settings screen
A role is a dropdown on the member's own row — no separate permissions matrix to hunt for. Inviting is the one action above the list, because adding someone is what you came to do; removing reuses the same swipe used elsewhere, so there's no new gesture to learn. The owner's own role is fixed, not merely discouraged.
09
One system, every surface
One component library for the native apps, and a web client built on the same system — one design language across every surface.
Figma was the single source of truth — one library, not separate files per platform. A component defined once carries the same structure and tokens across iOS and Android; the web client is a separate build drawing on the same system, so the whole product reads as one. Naming every state, variant and size before it was needed is the least visible part of the work and by far the highest-leverage: the reason two brands, three platforms and a steady stream of new templates never became three separate products.
I designed the majority of the web client too, with Onstruc's CTO — and the marketing site at sparkify.cloud, so the design language carried from a form on a ladder out to the page that sells it. The split between surfaces is posture, not power: the phone is one job on site, one hand free; the web client is many jobs at a desk. Where a capability matters in both, it exists in both — the PDF report builder runs on the phone as well as the browser.
Authoring · Templates
The web client is where the system authors itself
A documentation type isn't hard-coded — it's a template, authored here from fourteen field types plus two containers, a block and a repeated block. That constraint keeps the information architecture honest: documentation, block, field, with no arbitrary nesting to get lost in. Two settings do quiet work — a block's label is composed from its own field values, and an instruction helper can attach to any block, which is where the “swipe left to duplicate” hint comes from.
Built to be handed over. Field names and descriptions are stored per language, and a whole template can be exported to JSON and imported back — the design tokens ship the same way, as a live JSON file the platforms read, not a redlined spec that drifts. A workspace can be handed a ready-made document type instead of rebuilding it.
10
Outcome
Live on every platform in 27 languages — a signed report now done on site in minutes.
What started as a photo tool had become one documentation system — spanning the job site, the office and every platform in between. The numbers are what that turned into.
600
Documentations created a day
The rebuilt product, in daily use — the old one was barely adopted
27
Languages shipped
One task-first structure, localised across the EU
~7 min
From measurement to signed report
Timed by electricians on a full MFT report — the old way ran across days
2,000+
NFC measurement reads a week
From a standing start — the tap-to-read flow I designed
Sparkify shipped. It's live on iPhone, iPad, Android and a browser-based web client — the same documentation synced across all of them — localised into 27 languages, with a free tier that stays free. The rebuild replaced a tool nobody adopted with one shaped around how the work actually happens: from the first measurement on site to a signed PDF, without retyping.
The loop closed. The old way ran across days: measure on site, note it on paper, transfer it at the office, fix what got mistyped, compose the report, send it. With the tester talking to the phone and the template already shaped like the standard form, a full MFT report is now filled out, signed and handed over on site, in roughly seven minutes — timed by electricians running the job, not estimated.
Early users are enthusiastic — the app holds 5.0 on the App Store across its first ratings, with reviews like “best app for documentation.” And because it runs on a tokenised design system, the team keeps shipping — new templates, a second brand, hardware and planning-tool integrations — without redesigning the app each time. The system is what lets the product keep moving.
What I inherited
A photo-first tool. Paperwork finished at the office, transcribed by hand.
Structurally unable to produce a report — and barely adopted.
What shipped
Task-first documentation. Measurements imported, signed on site in ~7 minutes.
Live on iOS, Android and web in 27 languages — rolling out across the EU.
The standards-based approach is what makes it travel. Because EU electrical standards are closely aligned, the same task-first structure adapts country to country — so a country picker at onboarding (shipping now) simply serves the templates that match where the electrician works. The insight that unlocked the German product is the same one carrying it into France, Sweden, Norway and the wider EU.
Real product analytics, Apr–Jul 2026 — roughly 600 documentations created a day. The measure the rebuild was judged on: the old app was a photo tool few had adopted.
Real product analytics, Mar–Jul 2026 (the current partial week is excluded). Adoption of the tap-to-read NFC flow I designed — from a standing start to 2,000+ events a week.
Sparkify — Berichte für Elektriker
The rebuild started from one idea: the structure users needed already existed in their trade, not in the software. Everything after that was following it honestly.
More work
View all
House of Mobile & GamesRedesigning an e-commerce homepage and lifting conversions by 46%
Social Skills AnimationTurning social stories into animations a therapist can build inside a session
Junge FreiheitMaking a decades-old publication legible again online
Kinderleichter ArbeitsschutzGiving a safety-services business its first digital product
Second OpinionGetting a patient to trust a doctor they have never met