Design to software
Designers and PMs who build.
Brindlefen is an example company we made up: a job app for heating engineers. Its customer wants the report sent before leaving the house.
Working change
Radiator valve replacement
Alex at the job. Robin at home. Fictional people and work.
Edit the fictional note or record audio for local playback.
Listen to the voice fixture
Synthetic fictional note spoken by the installed macOS Daniel voice. No human recording. Whisper heard Replace where the script said Replaced. The engineer must correct that tense before sharing. Noisy audio remains next.
- Parts from the list
- radiator valve
- Safety result
- Pressure test not carried out.
- Follow-up
- Please arrange a pressure test on the return visit.
Compare the job screen before and after Voice reports
Before, the job has a plain notes field. After, the note sits beside a draft the engineer can review. These are the actual components from this local example; the full current screen above is interactive.
Radiator valve replacement
- Engineer
- Alex
- Homeowner
- Robin
- Work
- Radiator valve replacement
A plain job note. The report still has to be written separately.
Radiator valve replacement
Voice note transcript
Replaced the radiator valve in the sitting room. Used a radiator valve from the parts list. I didn't pressure-test. Please arrange a pressure test on the return visit.
- Work recorded
- Replaced the radiator valve in the sitting room. Used a radiator valve from the parts list.
- Parts from the list
- radiator valve
- Safety result
- Pressure test not carried out.
- Follow-up
- Please arrange a pressure test on the return visit.
Review the draft before adding it to the local outbox.
Compare the original and improved draft rules
The same fictional note goes through the original and improved rules. The original draft adds a test result and loses the follow-up. Both outputs below use the real report component.
Radiator valve replacement
- Work recorded
- Replaced the radiator valve in the sitting room. Used a radiator valve from the parts list. I didn't pressure-test. Please arrange a pressure test on the return visit.
- Parts from the list
- radiator valve
- Safety result
- Pressure tested.
- Follow-up
- None recorded
Radiator valve replacement
- Work recorded
- Replaced the radiator valve in the sitting room. Used a radiator valve from the parts list.
- Parts from the list
- radiator valve
- Safety result
- Pressure test not carried out.
- Follow-up
- Please arrange a pressure test on the return visit.
Read the component index
These are the reusable React components running this example.
JobScreen- The product frame shared by the working screen and the before and after views.
NoteInput- Editable transcript, example notes, local recording and voice-fixture playback.
DraftReport- The same report fields in editable and read-only views.
ReviewControl- The review gate that prevents stale or unchecked drafts entering the local outbox.
LocalOutbox- A readable report held in this browser session. It sends nothing.
BeforeVoiceReports- The earlier job-details state with a plain notes field and no voice or report feature.