Un’app per dividere le spese di casa senza discutere. Dal primo colloquio al codice in nove settimane.

Ruolo
Product design e front-end
Anno
2025
Cliente
Nido, due fondatori
Strumenti
Carta, Figma, React
Un piano cucina con un bollitore, un tagliere e alcune fotografie istantanee appoggiate alle piastrelle

Il problema.

Quattro persone, un frigo, una bolletta della luce. Chi divide casa con altri tiene i conti con un foglio di calcolo e una chat, e a fine mese qualcuno ha pagato più degli altri senza sapere di quanto.

Le app che esistono chiedono a tutti di iscriversi e di registrare tutto. Dopo due settimane i coinquilini smettono. Il mandato dei fondatori era uno: aggiungere una spesa deve costare meno che scriverla in chat.

Il processo.

  1. Settimane 1 e 2
    Ascoltare
    Sei conversazioni con persone che vivono in case condivise e le loro chat di casa, lette con il permesso e senza nomi. Il segnale era uno solo: nessuno vuole il totale del mese, tutti vogliono sapere cosa devono a chi, adesso.
  2. Settimana 3
    Schizzare
    Tre percorsi su carta per aggiungere una spesa. Ha vinto il più corto: un importo, un tocco su chi c’era, fine. Tutto il resto è facoltativo e viene dopo.
  3. Settimane 4 e 5
    Provare
    Un prototipo navigabile provato con cinque persone. Due problemi saltati fuori subito: i saldi si leggevano come rimproveri e la divisione non uguale era nascosta. Cambiati entrambi, poi riprovato.
  4. Settimane 6–9
    Costruire
    L’interfaccia in React sui token scritti nella quarta settimana. Stato vuoto, errori e tema scuro previsti dal primo componente, non aggiunti alla fine.
Due mani aprono un ventaglio di campioni di colore su uno sfondo grigio

Le schermate.

Le tre che reggono il prodotto, disegnate con gli stessi componenti che poi ho scritto. Nomi e importi sono di esempio.

Casa di via Pratello

Questo mese tu devi

18,40 €

Spesa al mercatoGiulia, ieri42,60 €
Bolletta della luceMarco, 24 ottobre86,00 €
DetersiviTu, 22 ottobre14,30 €
Casa: quanto devi, adesso, e le ultime spese.

Nuova spesa

12,80 €

Caffè e latte per la settimana

Chi ha partecipato

Divisa in tre: 4,27 € a testa.

Aggiungi: un importo, un tocco su chi c’era.

Saldi

Chi deve a chi

Tu → GiuliaDa pagare18,40 €
Sara → Giulia6,10 €
Luca → Marco9,00 €
Sara ↔ MarcoIn pari0,00 €
Saldi: una riga per debito, niente totali da interpretare.

Un file solo.

Quattro colori, un raggio, otto passi di spazio. Ogni componente li legge e basta: cambiare l’accento della casa è una riga, non una settimana di ritocchi.

:root {
  --campo: oklch(0.96 0.02 88);
  --inchiostro: oklch(0.20 0.045 275);
  --accento: oklch(0.70 0.19 42);
  --raggio: 0.75rem;
  --spazio-1: 0.25rem;
  /* fino a --spazio-8 */
}

.pulsante {
  background: var(--inchiostro);
  color: var(--campo);
  border-radius: var(--raggio);
}

Cosa è uscito.

3
flussi principali ridisegnati: casa, aggiungi, saldi
24
componenti documentati con i loro stati
1
file di token condiviso tra design e codice
9
settimane dal primo colloquio alla consegna

Cosa rifarei

Avrei provato i saldi prima di disegnare le altre due schermate: ho speso due giorni a rifinire la schermata di aggiunta, e il vero nodo era la lettura dei debiti. La prossima volta si parte da lì.

Il prossimo: Orario.

Un’agenda per studi di fisioterapia, dodici settimane.

Tutti i progetti

Hai un caso simile?

ciao@teobellandi.example

Anche solo uno schizzo e un dubbio: scrivimi e vediamo da dove si parte.

Scrivimi