01 / Divorcio — studio render of the live app
Work / Divorcio / Case study
Complexity. Made Human.
Legaltech / Product / Front-end architecture
A divorce app that says what happens next.
01 / The challengeCommunication / Experience / Clarity
Brief / Direction / Purpose
Hard paperwork,
one step at a time.
A divorce comes with a lot of forms at a bad time. The app asks one thing at a time, in plain words, and always shows what comes next. I built its front end on my own, from the first commit to production.
02 / The experienceThe message / The user / The system
What the app has to get right.
Ask only what it needs.
Plain words, and the next question only once the last one is answered.
Show the next step.
The current step and the ways forward are visible on every screen.
Keep it calm.
No pressure, nothing ambiguous, no animation pulling at the eye.
Never lose an answer.
Autosave as you type, errors that say how to fix them, and every control works from the keyboard.
03 / Up closeStudio renders / The live site
The same site, eight ways in.
01 / On a phoneThe sign-up 
02 / The detailThe care calendar, close up 
03 / Across sizesThe registration 
04 / Straight onAll four devices 
05 / The monitorThe childcare forms 
06 / Laptop and phoneThe sign-up 
07 / The tabletThe registration 
08 / The whole deskFrom high on the left
04 / Product thinkingStructure / Calm / Control
One form engine for every form.
Every form in the app runs on one engine: ten input types, nested up to four levels, saved as you type and checked as you go. A partner can approve each answer or discuss it in a thread.
Under it sits a component library of its own, built for Divorcio's products: some forty React components on Headless UI, colours as OKLCH tokens that give the light and the dark theme from one set, and contrast computed rather than guessed. A library, because then every form, dialog and step looks and behaves the same, and an accessibility fix reaches the whole app at once. The last release did exactly that: the password toggle reachable by keyboard, every dialog named for a screen reader. Each release passes its type, lint, test and token checks before it is published.
Studio render / The live app
Back to all projects
05 / Accessible by designProduct UX / Content / Engineering
Every step / has a way back.
Calm is mostly
an engineering job.
A clear label, a response when you expect one, and a way to fix a mistake. In a flow like this, that's most of what being kind means.
01 / Language
Plain words.
It explains first, then asks.
02 / Feedback
Clear status.
Each step says where you are and what's left.
03 / Access
Keyboard first.
Full keyboard use, 44 px touch targets and 7:1 contrast in dark mode.
04 / Continuity
Always fixable.
A wrong or half-finished answer can be corrected later.
06 / MeasuredThe live app / PageSpeed Insights
The live app, measured.
Mobile
- Performance
- 98
- Accessibility
- 96
- Best practices
- 100
- SEO
- 100
- Largest contentful paint
- 1.2 s
- Total blocking time
- 150 ms
- Cumulative layout shift
- 0.00
Desktop
- Performance
- 100
- Accessibility
- 96
- Best practices
- 100
- SEO
- 100
- Largest contentful paint
- 300 ms
- Total blocking time
- 60 ms
- Cumulative layout shift
- 0.00
PageSpeed Insights (Lighthouse 13.6.0) · measured 13 November 2026
The full report
| Mobile | Desktop | |
|---|---|---|
| Performance | 98 | 100 |
| Accessibility | 96 | 96 |
| Best practices | 100 | 100 |
| SEO | 100 | 100 |
| Largest contentful paint | 1.2 s | 300 ms |
| First contentful paint | 1.2 s | 300 ms |
| Total blocking time | 150 ms | 60 ms |
| Cumulative layout shift | 0.00 | 0.00 |
| Speed index | 1.9 s | 900 ms |
Lab data: Lighthouse under simulated mobile and desktop conditions. Real visitors’ numbers can differ.
Run it yourself on PageSpeed Insights (opens in a new tab)01 / More projectsNext one
More projects.
Independent by design / Built to stand apart
Clarity Over Complexity.
If you're building something people use on a bad day, write to me.
Start a project