silverfish
Case study

Smart CAF

Italian paperwork, online, with the price shown before you start. Then I redesigned it.

A frame from the Smart CAF film: the Smart CAF name above the words Your CAF office, online.
The questions
Chapters7 · 1:19

  1. Before you open, the questions start. “How much is the 730?” “Which documents do I need?” “Any update?”, asked twelve times before nine.

  2. Let us handle the chaos. Smart CAF: your CAF office, online.

  3. Your clients see every price up front, find the right service in seconds and upload their documents online. Your office gets every application complete, and clients follow every step: no “any update?” calls.

  4. That’s your client’s side. Now, yours. The one screen your team works from: navigation; your views (assigned to me, unassigned, awaiting documents, overdue); every case with its status, payment, owner and due date; and search, from anywhere, with Ctrl K.

  5. Walk-ins and calls, filed in seconds. Assign any case in one key. Clients hear about it instantly, by app and email. Missing a page? Ask from the case. They upload it, and the status updates itself.

  6. Same office. Quieter phone. “Thanks! I saw the status online.”

  7. Run a CAF? Let’s build yours. Prices, documents, requests, updates, cases, your team: your CAF office, online. Book a demo at hello@silverfish.dev. Built and set up for your office by silverfish.

Watch with sound?

This case study opens with a one-minute film. It’s made to be heard: music and small sounds for every tap.

I’ll remember your choice on this device.

Italian paperwork, online, with the price shown before you start. Then I redesigned it.

At a glance

01The problem
Immigrants in Italy queue at offices without knowing the price or the documents needed.
02What I built
An online office with fixed prices, phone uploads and case tracking. Then I redesigned it.
03The result
Before is live at smartcaf.tech. After is online as a demo you can try.
My part
Built the portal and the back office, then the redesign [to confirm]
Client
An Italian CAF and immigration agency

Built with

Next.js · React · Express · MongoDB · Redis · Backblaze

1

The problem

Thousands of people in Italy, many of them immigrants, need help with paperwork: a tax return, a residence permit, a benefit for their children. The help exists, at offices called CAFs. But you usually find out the price and the list of documents only once you're there, often after queuing.

Smart CAF puts that office online: pick a service, see the fixed price, upload documents from your phone, and follow your case until it's done.

2

Words you'll need

CAF
A tax help centre
Patronato
Help with pensions, benefits and welfare
ISEE
Proof of household income, needed for many benefits
Permesso di soggiorno
A residence permit
Codice fiscale
The Italian tax code everyone has
3

Before and after

Same page, same day. Move between the stops to compare.

Before: smartcaf.tech. Headline Simplify Your CAF Journey, four feature cards, and a stats row that is blurred here.
After: smartcaf.xilofy.com. Headline Your paperwork in Italy, handled, over a photo of a street in Rome, with a search box and service categories.
Before · liveAfter · demoThe Before stats row is blurred because I can't back those numbers up. The redesign only says what's true.
Before, on a phone: Simplify Your CAF Journey, with the stats blurred.
Before
After, on a phone: Your paperwork in Italy, handled.
After
4

Five tasks, compared

Each line points to evidence in the code or on the live site.

  1. 01

    First impression

    From claims I couldn’t back up to a promise it keeps: the price, up front.

    Before
    Headline “Simplify Your CAF Journey”, a stats row I couldn’t back up (15k+ processed, 99% success) and wording like “Official Portal”.smartcaf.tech, 30 Sep 2026
    After
    “Your paperwork in Italy, handled.” Fixed fees on 50+ services, and life moments like New to Italy.smartcaf.xilofy.com, 30 Sep 2026

  2. 02

    Finding a service

    A way in for people who don’t know a service’s name.

    Before
    Search and a category filter, loaded in the browser after the page arrives.client/src/app/page.tsx
    After
    The same search, plus seven life moments that open the most common service, with its price and turnaround.components/home/content.ts

  3. 03

    Applying

    Nothing is lost if you close the tab.

    Before
    A 5-step pop-up. Closing it lost everything, and the tax code was checked for length only.ApplicationForm.tsx
    After
    Seven short screens, one topic each. The draft saves on every change, files included, and errors are explained.lib/applications/draft.ts

  4. 04

    Tracking a case

    From “what’s my status?” to “what do I do next?”

    Before
    A status badge, a live-updates panel and a list of requested documents.ProfilePage.tsx
    After
    A timeline of what happened and what’s next, with the requested document in the step that needs it.app/applications/[id]

  5. 05

    Staff back office

    Built for the rush at the desk, with the gap stated.

    Before
    A dashboard with revenue charts, agent assignment and Excel export. No undo.admin/OverviewView.tsx
    After
    A triage inbox with saved views, bulk actions, undo everywhere and a keyboard-first walk-in screen. No revenue charts yet.components/admin/*
5

The numbers, all of them

All measurements, same day, same settings, nothing left out. After wins on accessibility, weight and first paint. Today it's slower to show its main content, and that's the next thing I'm fixing.

MeasureBeforeAfterBetter
Lighthouse Accessibility88100After
Lighthouse Best Practices96100After
Lighthouse SEO100100Equal
Lighthouse Performance9174 todayBefore
First Contentful Paint*2.4 s1.2 sAfter
Largest Contentful Paint*2.8 s4.6 s todayBefore
Total Blocking Time109 ms368 msBefore
JavaScript transferred233 KB241 KBBefore
Requests2840Before
Page weight, home1,175 KB825 KBAfter
LanguagesEnglishEnglish + ItalianAfter
Draft saved if you close the tabNoYes, files includedAfter
Undo for staff actionsNoneEvery actionAfter
Revenue charts for staffYesNot yetBefore

Lighthouse 12, mobile, median of 3 runs, 30 Sep 2026. *57 % of Before's LCP is server response time from its own VPS, while After is served from Vercel's edge, so first-paint numbers partly compare hosting, not design.

Decision After · demo

The redesign was slower at first
Why
The trace shows about 2.2 s of main-thread work while the page hydrates, which holds back painting a hero photo that has already downloaded. The fix is fewer client components above the fold and deferring the animated rotating word.
Cost
Until it ships, the Performance row stays in the table, with the real number.
6

Try it

Apply for a service the way a client would. It runs on demo data.

Live demo Try the redesign smartcaf.xilofy.com
7

Before: what shipped

The engine under the product, and the part I'm proudest of.

Decision Before

Approval rules live on the server
Why
Agents can't approve or reject a case, and nothing is assigned before payment arrives. The browser can't talk its way around it.
Decision Before

Private documents stay private
Why
Files are stored per client, previews use links that expire, and ownership is checked before any link is issued.
Decision Before

Invoices that can't drift
Why
An invoice PDF is generated when payment is confirmed and withdrawn if the payment is reversed, and every change is logged.
Decision Before

Email that arrives
Why
Emails are queued, retried with back-off, and switched to a second provider if the first one fails.
For engineersTechnical
  • Next.js 16 client, Express 5 API, MongoDB via Mongoose, Redis + BullMQ workers, Backblaze B2 with presigned URLs, Brevo with SMTP fallback, four Docker containers behind nginx.
  • Credits are deducted with one conditional update, so a balance can never go negative.

What I'd do differently. v1 shipped without automated tests, and its home page made claims I couldn't back up. My later projects run tests in CI from day one, and the redesign only says what's true.

8

After: what changed, and why

Decision After · demo

Prices frozen at submission
Why
v1 already showed a fixed price on every service, and that stays. v2 also records the price at the moment you submit, so a later catalogue change never rewrites your bill.
Decision After · demo

One topic per screen
Why
4 stages over 7 short screens. That's more screens than v1's 5 steps, but no screen needs scrolling on a phone.
Decision After · demo

Never lose an application
Why
The draft saves on every change, uploaded files included. In v1, closing the pop-up meant starting again.
Decision After · demo

Errors you can act on
Why
The codice fiscale is checked properly, including omocodia (letters that replace digits when two people would share a code), and mistakes are explained in plain words.
Decision After · demo

A back office built for walk-ins
Why
One keyboard-first screen recognises a returning client by email, then tax code, then phone, so staff can file for someone standing at the desk.
Decision After · demo

Undo everywhere
Why
Every staff action can be reversed and is logged with who did it.
Decision After · demo

Say only what's true
Why
The v1 marketing stats were replaced with the one promise the product keeps: a fixed price, shown before you start.
For engineersTechnical
  • A single repository layer is the seam where the demo storage is swapped for the real API.
  • Deadlines come from the slowest service in a case, and cases show as overdue, due today or soon.
  • Browser storage syncs across tabs through useSyncExternalStore, without a signed-out flash while loading.
9

What I'd do next

Check documents before a human does. A small image model could tell whether an uploaded photo is the right document, and readable, before an advisor opens it. That would cut the back-and-forth that slows every case down.

Project receipt · Smart CAF

Checked 30 Sep 2026against code and the live site
My part
Portal, back office and redesign [to confirm]
Before
Next.js 16, Express 5, MongoDB, Redis + BullMQ, Backblaze B2, Brevo, 4 Docker containers behind nginx
After
A new front end: Next.js 16, React 19, Motion. Demo data for now
Shipped
Before live at smartcaf.tech · After online as a demo at smartcaf.xilofy.com
Measured
Lighthouse 12, mobile, median of 3 runs, 30 Sep 2026
Sources
smartcaf.tech · smartcaf.xilofy.com · both repos