AI-Driven Design · Disponibile per nuovi progettiAI-Driven Design · Available for new projects

Trasformo gli insight in prodotti semplici e scalabili.

I turn insight into simple, scalable products.

Lead Product Designer con oltre 13 anni su piattaforme B2B data-dense — smart mobility, IoT, healthcare, enterprise SaaS. Porto una pratica di AI-Driven Design: design system costruiti con Claude Code via MCP in Figma, prototipi in Claude Design, componenti e documentazione sempre allineati.

Lead Product Designer with 13+ years on data-dense B2B platforms — smart mobility, IoT, healthcare, enterprise SaaS. I run an AI-Driven Design practice: design systems built with Claude Code via MCP in Figma, prototypes in Claude Design, components and docs always in sync.

13+
Anni di esperienzaYears of experience
+80%
Time-to-action operatoriOperator time-to-action
+60%
Metriche di usabilitàUsability metrics
Product Design UX Research Prototyping AI-Driven Design Design Systems Interaction Design Product Design UX Research Prototyping Design Systems AI-Driven Design

Portfolio

Lavori selezionatiSelected work

Una selezione protetta dei progetti più rappresentativi. Product e UX design, dalla ricerca al rilascio.

A protected selection of representative projects. Product and UX design, from research to release.

Product Design UX & Research ProtettoProtected

Un percorso
di design.
A design
journey.

Ricerca con gli utenti, prototipazione rapida e interfacce semplici, scalabili e profondamente umane.

User research, rapid prototyping and simple, scalable, deeply human interfaces.

Esplora i case studyExplore the case studies
FisioGest agenda

AI-Driven Design

Design accelerato
dall'AI.
Design accelerated
by AI.

L'AI non sostituisce il giudizio di design: comprime il tempo tra un'ipotesi e un prototipo verificabile. Ho impostato una pratica AI-driven end-to-end, dal design system fino agli spec pronti per lo sviluppo.

AI doesn't replace design judgement — it compresses the time between a hypothesis and a testable prototype. I've set up an end-to-end AI-driven practice, from design system to dev-ready specs.

Design system con Claude CodeDesign systems with Claude Code

Fondamenta, token e componenti generati e mantenuti con Claude Code via MCP dentro Figma per scalabilità e coerenza.

Foundations, tokens and components generated and maintained with Claude Code via MCP inside Figma for scalability and consistency.

Claude CodeMCP · Figma

Prototipi in ore, non settimanePrototypes in hours, not weeks

Design sprint a cadenza settimanale: flussi, wireframe e prototipi hi-fi navigabili costruiti in Claude Design e validati con utenti reali.

Weekly design sprints: flows, wireframes and navigable hi-fi prototypes built in Claude Design and validated with real users.

Claude Designv0Design sprintDesign sprints

Team guidati con l'AI nel processoTeams led with AI in the loop

Ho guidato team di designer con l'AI integrata nei rituali: critique, acceptance criteria e handoff documentati, non improvvisati.

I've led designer teams with AI built into the rituals: critique, acceptance criteria and handoff documented, not improvised.

Design OpsNotionAgile

Chi sonoAbout

Design sistemico,
soluzioni umane.
Systems-led design,
human solutions.

Sono Antonino Omar Amato, Lead Product Designer con oltre 13 anni di esperienza. Trasformo domini operativi complessi — monitoraggio real-time, controllo del traffico, tolling, analytics — in dashboard che gli operatori riescono a usare sotto pressione.

Copro il ciclo completo: ricerca, architettura dell'informazione, design system e spec pronti per lo sviluppo. Guido team di design dentro organizzazioni agili e cross-funzionali, con una pratica AI-driven integrata nel processo.

I'm Antonino Omar Amato, a Lead Product Designer with 13+ years of experience. I turn complex operational domains — real-time monitoring, traffic control, tolling, analytics — into dashboards operators can use under pressure.

I own the full cycle: research, information architecture, design systems and dev-ready specs. I lead design teams inside agile, cross-functional organizations, with an AI-driven practice built into the process.

Figma Claude Code Claude Design Miro Notion
Cosa faccioWhat I do Tocca per esplorareTap to explore

{{ sk.desc }}

{{ m }}
{{ sk.metric.v }}{{ sk.metric.l }}

RiconoscimentiRecognition

2016 · Quirinale

Premio dei Premi

Premio Nazionale per l'Innovazione consegnato dal Presidente Sergio Mattarella — progetto Orange Fiber.

Italy's National Innovation Prize, presented by President Sergio Mattarella — Orange Fiber project.

2015 · ADI Design Index

Premio per l'InnovazioneInnovation Award

Selezione ADI Design Index, l'annuario del design italiano curato dall'Associazione per il Disegno Industriale — progetto Orange Fiber.

Selected for the ADI Design Index, the Italian design yearbook curated by the Industrial Design Association — Orange Fiber project.

Organizzazioni con cui ho lavoratoOrganizations I've worked with

Autostrade per l'Italia Movyon Poste Italiane Italiaonline ClearScore Rekord AG AMRC nkoda Yumpingo Paradigma Masamune

ContattiGet in touch

Hai un progetto
in mente?
Have a project
in mind?

Sono aperto a opportunità full-time e collaborazioni freelance. Scrivimi due righe, rispondo a tutti.

I'm open to full-time roles and freelance collaborations. Drop me a line, I reply to everyone.

ContattamiGet in touch

Portfolio

Case study
selezionati
Selected
case studies

Quattro progetti di product e UX design. Per riservatezza, alcuni contenuti sono protetti da password.

Four product and UX design projects. For confidentiality, some contents are password protected.

FisioGest agenda
Healthcare SaaS Mobile-first

FisioGest

La segretaria digitale all-in-one per fisioterapisti: agenda, pazienti e incassi in un'unica interfaccia mobile-first.

The all-in-one digital secretary for physiotherapists: scheduling, patients and payments in one mobile-first interface.

Leggi il case studyRead case study
Kratera dashboard, Etna in allerta gialla
Data systems Live · 2026

Kratera

Un digital shadow per monitorare lo stato dei vulcani: sismicità, ordinanze e livello di allerta in tempo quasi reale, con ogni dato tracciato alla sua fonte.

A digital shadow for monitoring volcano status: seismicity, closure orders and alert level in near-real time, every value traced to its source.

Leggi il case studyRead case study

Altri case study protettiMore protected case studies

Inserisci la password per visualizzare gli altri progetti.

Enter the password to view the other projects.

Password non correttaIncorrect password

Manufacturing AMRC · Co-design

Rekord, Digital Product Passport

Un Digital Product Passport tablet-first per la manutenzione delle pale eoliche, attivato dalla scansione di un QR sul componente fisico.

A tablet-first Digital Product Passport for wind-turbine maintenance, triggered by scanning a QR on the physical component.

Leggi il case studyRead case study
Rekord component interface
BSB desktop dashboard
Enterprise UX 2023–2024

Modernizzare i tool video della rete autostradale italianaModernizing Italy's motorway video infrastructure

Ridisegno guidato dalla ricerca della piattaforma di monitoraggio video di BSB, usata dagli operatori di 14 concessionarie per gestire oltre 5.000 flussi live da telecamera.

A research-driven redesign of BSB's internal video monitoring platform, used by operators across 14 motorway concessionaires to manage over 5,000 live camera streams.

Leggi il case studyRead case study
Enterprise UX ASPI × Movyon

SIV, AmmodernamentoModernization

Riprogettazione user-centered del sistema di gestione delle informazioni autostradali di ASPI, con un sinottico ispirato alle mappe metropolitane.

User-centered redesign of ASPI's highway information management system, with a synoptic inspired by metro maps.

Leggi il case studyRead case study
SIV dashboard operativa della sala radio

Contenuto protettoProtected content

Inserisci la password per accedere a questo case study.

Enter the password to access this case study.

Password errata. Riprova.Wrong password. Try again.
← Torna al portfolio← Back to portfolio

Case study · 2023–2024 · Enterprise UX

Modernizzare i tool video della rete autostradale italianaModernizing Italy's motorway video-infrastructure tools

Un ridisegno guidato dalla ricerca della piattaforma interna di monitoraggio video di BSB, usata dagli operatori di 14 concessionarie autostradali per gestire oltre 5.000 flussi live da telecamera.

A research-driven redesign of BSB's internal video-monitoring platform, used by operators across 14 motorway concessionaires to manage over 5,000 live camera streams.

5.332
Flussi video gestitiVideo streams managed
−58%
Tempo sulle attivitàTask-time reduced
6
Mesi di ricercaMonths of research
4
Ruoli utente servitiUser roles served

RuoloRole

UX Research Lead

DisciplineDisciplines

Research · IxD · Proto

SettoreSector

Enterprise · Infra

StrumentiTools

Figma · Miro · Dovetail

01

Contesto & problemaContext & problem

Uno strumento critico costruito per ingegneri, usato ogni giorno dagli operatoriA critical tool built for engineers, used daily by operators

La piattaforma di BSB era cresciuta in modo organico per oltre un decennio, ogni nuova funzione aggiunta alla struttura esistente senza un'architettura dell'informazione coerente. Gli operatori che gestivano migliaia di flussi simultanei navigavano interfacce dense e incoerenti, senza una gerarchia chiara.

La sfida non era solo visiva: il sistema non aveva un modello unificato delle relazioni tra flussi, telecamere, codec e nodi geografici. Gli utenti avevano sviluppato workaround complessi, schede del browser, fogli di calcolo, passaggi verbali, per compensare ciò che l'interfaccia non mostrava.

BSB's platform had grown organically over a decade, each new feature bolted onto the existing structure with no coherent information architecture. Operators managing thousands of simultaneous streams navigated dense, inconsistent interfaces with no clear hierarchy.

The challenge was not just visual: the system had no unified model of how streams, cameras, codecs and geographic nodes related. Users had built elaborate workarounds, browser tabs, spreadsheets, verbal handoffs, to compensate for what the interface couldn't show.

{{ p }}
PrimaBefore Video Manager su Internet Explorer, oltre 10 anni di stratificazioniVideo Manager on Internet Explorer, 10+ years of accreted features
Legacy dashboard
Legacy stream detail
Legacy requester popup

02

Ricerca & discoveryResearch & discovery

Ritmo di ricerca bisettimanale per 6 mesiA bi-weekly research rhythm over 6 months

Le sessioni alternavano osservazione, co-design e validazione, con partecipanti da quattro ruoli: operatori di sala controllo, ingegneri di rete, responsabili regionali e amministratori di sistema.

Sessions alternated observation, co-design and validation, with participants from four roles: control-room operators, network engineers, regional managers and system administrators.

{{ t.date }} {{ t.phase }} {{ t.activity }} {{ t.who }}

03

Ricostruire i percorsi reali, passo per passoReconstructing the real paths, step by step

Passo normaleNormal step Pain point identificatoPain point identified

Operator · indagine su un flusso degradatoinvestigating a degraded stream

7 passisteps · mediaavg 14 min
{{ s.n }}
{{ s.label }} {{ s.note }}

Engineer · controllo salute regionale a inizio turnoregional health check at shift start

5 passisteps · mediaavg 6 min
{{ s.n }}
{{ s.label }} {{ s.note }}

04

Quattro scelte che hanno plasmato il ridisegnoFour choices that shaped the redesign

Ogni decisione è radicata in un comportamento osservato, validata tramite test di prototipo e bilanciata con i vincoli ingegneristici.

Each decision is grounded in observed behaviour, validated through prototype testing, and balanced against engineering constraints.

{{ d.n }}

ProblemaProblem

{{ d.problem }}

Scelta di designDesign choice

{{ d.choice }}

MotivazioneRationale

{{ d.rationale }}

DopoAfter Ridisegno · dashboard e mappa unificateRedesigned · unified dashboard & map view
Redesigned dashboard

05

Da tool frammentati a una piattaforma di monitoraggio coerenteFrom fragmented tooling to a coherent monitoring platform

Il sistema ridisegnato è stato rilasciato nel Q1 2024, unificando la vista mappa e la lista flussi in un'unica interfaccia con default basati sul ruolo.

The redesigned system shipped in Q1 2024, consolidating the map view and stream list into a unified interface with role-based defaults.

↓ 58%Riduzione tempo attivitàTask-time reduction

Indagine su un flusso degradato: da 14 min a meno di 6 min nei test di usabilità.Investigating a degraded stream: from 14 min to under 6 min in usability testing.

5 → 1Tassonomia di stato unificataUnified status taxonomy

Etichettatura incoerente sostituita da un unico modello a 5 stati.Inconsistent labelling replaced by a single 5-state model.

4Ruoli serviti da un solo sistemaRoles served by one system

Operatori, ingegneri, manager e admin, con default adeguati al ruolo.Operators, engineers, managers and admins, with role-appropriate defaults.

06

Un linguaggio visivo coerente in ogni vistaA consistent visual language across every view

Il ridisegno ha introdotto una libreria di componenti condivisa per navigazione, indicatori di stato, tabelle, overlay di mappa e pannelli di dettaglio, garantendo coerenza visiva e comportamentale, consegnata con specifiche annotate per breakpoint, stati e casi limite.

The redesign introduced a shared component library for navigation, status indicators, tables, map overlays and detail panels, ensuring visual and behavioural consistency, handed off with annotated specs for breakpoints, states and edge cases.

Redesigned screens, full set
Redesigned map view on tablet
Map-first · cluster codificati per gravitàMap-first · severity-coded clusters
{{ sc.label }}

07

Validare l'impatto in produzioneValidating impact in production

I test di usabilità confermano l'intento; i dati sul campo confermano il risultato. Queste sono le metriche che strumenterei nei primi 90 giorni post-lancio.

Usability testing confirms intent; field data confirms outcome. These are the metrics I'd instrument in the first 90 days post-launch.

{{ m.title }}

{{ m.body }}

{{ m.target }}

Parliamo del tuo prodotto.Let's talk about your product.

info@omaramato.com

© {{ year }} Antonino Omar Amato · Case study · Rete autostradale italianaCase study · Italy motorway network

Case study · 2024–2026 · Healthcare SaaS

Trenta secondi tra un paziente e l'altroThirty seconds between two patients

FisioGest è il gestionale per fisioterapisti che tiene agenda, cartelle e incassi in un'unica interfaccia. Progettato perché si usi tra un paziente e l'altro, non alla fine del turno.

FisioGest is practice-management software for physiotherapists: scheduling, records and payments in one interface. Designed to be used between two patients, not at the end of the shift.

app.fisiogest.it/agenda
FisioGest · Agenda desktop
FisioGest · Agenda mobile

RuoloRole

Lead Product Designer

TipoType

SaaS B2B

TargetAudience

Freelance · 10–40 pz/sett.Freelance · 10–40 pt/wk

StackStack

Figma · Tailwind · Shadcn

Contesto & problemaContext & problem

Professionisti analogici, sommersi dalla burocrazia.Analog professionals, buried in admin work.

Fisioterapisti e osteopati freelance, dai 10 ai 40 pazienti a settimana, lavorano ancora con agende cartacee, fogli Excel e promemoria mentali. Ogni ora sottratta alla cura è un'ora spesa a ricordare.

Freelance physiotherapists and osteopaths, 10 to 40 patients a week, still run on paper agendas, spreadsheets and mental reminders. Every hour taken from care is an hour spent remembering.

~1 h

al giorno in scartoffie, sottratte alle sedutea day on paperwork, taken from sessions

2–3

no-show a settimana, per promemoria mai inviatino-shows a week, from reminders never sent

3 strumenti tools

carta, Excel e WhatsApp, nessuno che parla con l'altropaper, Excel and WhatsApp, none talking to each other

0

voglia di imparare un altro software complicatoappetite for learning another complicated tool

Il prodotto · desktopThe product · desktop

Quattro schermate che tengono in piedi uno studioFour screens that keep a practice running

Cambia modulo dalle tab: la finestra scorre insieme alla pagina, come nel prodotto reale.

Switch module from the tabs: the window scrolls along with the page, just like the real product.

Clicca per ingrandireClick to enlarge

app.fisiogest.it/agenda
{{ d.alt }}

{{ d.title }}

{{ d.body }}

{{ t }}

Il prodotto · mobileThe product · mobile

Tutto a portata di pollice, in meno di trenta secondiEverything within a thumb, in under thirty seconds

Scorri: ogni passaggio cambia la schermata nel telefono, nell’ordine in cui il terapista la incontra davvero.

Scroll: each step swaps the screen inside the phone, in the order the therapist actually meets it.

{{ s.alt }}
{{ s.n }} {{ s.kicker }}

{{ s.title }}

{{ s.body }}

  • {{ b }}

Dettagli di craftCraft details

Tre momenti in cui l'interfaccia deve sparireThree moments where the interface has to disappear

{{ c.alt }}

{{ c.tag }}

{{ c.title }}

{{ c.body }}

Impatto attesoExpected impact

Cosa cambia nella giornata di uno studioWhat changes in a practice's day

Obiettivi basati su ricerca qualitativa e quantitativa con professionisti del settore.

Targets based on qualitative and quantitative research with industry professionals.

{{ m.value }} {{ m.label }} {{ m.note }} Before → After: {{ m.ba }}

Dietro al progettoBehind the work

Processo, ricerca e sistema — apri solo ciò che ti interessaProcess, research and system — open only what interests you

Otto capitoli, dalla ricerca aumentata con AI al design system in produzione.

Eight chapters, from AI-augmented research to the production design system.

Come l'intelligenza artificiale ha guidato ogni fase — dalla ricerca qualitativa ai componenti di produzione — senza mai rompere il loop.

How AI drove every phase — from qualitative research to production components — without ever breaking the loop.

{{ p.phase }}

{{ p.title }}

{{ p.tool }}

{{ p.body }}

{{ t }}
{{ s.title }}
{{ s.sub }}
{{ r.label }} {{ r.value }}
6h+
Audio analizzato · NotebookLMAudio analyzed · NotebookLM
48
Design Token · via MCPDesign Tokens · via MCP
34
Componenti React in produzioneReact components in production
< 30s
Target operativo · prenotazioneOperational target · booking

Come Lead Product Designer ho guidato un team di 5 designer junior con una dashboard Kanban: retrospective e backlog review settimanali, documentazione raccolta nelle acceptance criteria delle user story.

As Lead Product Designer I guided a team of 5 junior designers with a Kanban dashboard: weekly retrospectives and backlog reviews, documentation collected in the user stories' acceptance criteria.

{{ p.num }}

{{ p.title }}

{{ p.desc }}

  • ·{{ pt }}

Dall'accesso al dettaglio operativo in pochi livelli, così che ogni funzione sia raggiungibile senza perdersi.

From access to operational detail in a few levels, so every function is reachable without getting lost.

{{ lvl.level }} {{ lvl.name }}
{{ n }}

Task analizzato su 20 personas. L'obiettivo: completare la prenotazione in meno di 30 secondi, mentre si è al telefono con il paziente.

Task analyzed across 20 personas. The goal: complete a booking in under 30 seconds, while on the phone with the patient.

{{ j.step }} {{ j.time }}

{{ j.title }}

Pain

{{ j.pain }}

SoluzioneSolution

{{ j.fix }}

IpotesiHypothesis

{{ s.hyp }}

{{ s.val }}

{{ s.quote }}

Principi mobile-firstMobile-first principles

{{ m.num }}

{{ m.title }}

{{ m.body }}

Cosa cambia su desktopWhat desktop adds

{{ u.title }}

{{ u.body }}

Gestione pazientiPatient management

{{ p.tag }}

{{ p.title }}

{{ p.body }}

IncassiRevenue

{{ r.num }}

{{ r.title }}

{{ r.body }}

{{ s.n }}

{{ s.title }}

  • {{ it }}

La fondazione del prodotto: libreria UI, design token e principi di accessibilità. Tailwind CSS v4 e Shadcn UI, tipografia Inter, base 8px, conformità WCAG 2.1 AA.

The product foundation: UI library, design tokens and accessibility principles. Tailwind CSS v4 and Shadcn UI, Inter typography, 8px base, WCAG 2.1 AA compliance.

Tailwind CSS v4 Shadcn UI Inter WCAG 2.1 AA Mobile-First Design Tokens

Color Tokens

{{ c.name }}

{{ c.hex }}

Buttons — States

Primary · radius 8 · h40

Prenota visita Prenota visita Prenota visita

Secondary · Outlined

Esporta Esporta

Ghost · Text

Annulla Annulla

Typography Scale · Inter

Patient overviewH1 · 24/32 · SemiBold
Agenda di oggiH2 · 20/28 · SemiBold
Dettagli appuntamentoH3 · 16/24 · SemiBold
Testo di descrizione.Body · 14/20 · Regular
09:30 · Sala 3Meta · 12/16 · Medium

Status Badges

Confermato In attesa Pagato Non pagato

Input Fields

Cerca paziente…
Mario Rossi
Codice fiscaleCampo obbligatorio

Accessibilità · Indicatori H/M/LAccessibility · H/M/L indicators

Indicatori testuali integrati nella scala colore della pain map: colore + testo, leggibile anche per utenti daltonici.

Text indicators built into the pain-map colour scale: colour + text, readable for colourblind users too.

HPriorità altaHigh priority
MPriorità mediaMedium priority
LPriorità bassaLow priority

Parliamo del tuo prodotto.Let's talk about your product.

info@omaramato.com

© {{ year }} Antonino Omar Amato · FisioGest, SaaS per la gestione clinicaClinical management SaaS

CASE STUDY · PRODUCT DESIGN & SISTEMI DI DATICASE STUDY · PRODUCT DESIGN & DATA SYSTEMS

Kratera: il digital shadow dei vulcaniKratera: the volcano digital shadow

Sismicità, ordinanze di chiusura e livello di allerta in tempo quasi reale, con lo switch tra i preset dei vulcani monitorati dal selettore in testa. Progettato per chi deve decidere un'interdizione mentre il turno è in corso.

Seismicity, closure orders and alert level in near-real time, switching between monitored-volcano presets from the switcher up top. Built for whoever has to call an exclusion zone mid-shift.

kratera · stromboli · vista mare
Kratera · Stromboli, vista mare
Kratera · Stromboli, vista mare

Stromboli, vista mareStromboli, sea view

RUOLOROLE
Product design · system design
STACK
Serverless API · scraping · SVG
FONTI DATIDATA SOURCES
INGV · Protezione Civile
COPERTURACOVERAGE
Multi-vulcano · Etna pilotaMulti-volcano · Etna pilot
STATOSTATUS
Concept · validazione in corsoConcept · in validation
IL PRODOTTO · TRE VISTE, UN SOLO STATOTHE PRODUCT · THREE VIEWS, ONE STATE

Tre viste per l'operatore di turno, un solo statoThree views for the operator on shift, one single state

Prospettiva, Sezione e Mappa sono tre letture dello stesso momento: la stessa allerta, la stessa timeline, la stessa provenienza dichiarata su ogni numero. Cambiando vulcano dal selettore cambiano i dati e la morfologia, non la grammatica dell'interfaccia.

Perspective, Section and Map are three readings of the same moment: same alert, same timeline, same declared provenance on every number. Switching volcano changes the data and the morphology, never the interface grammar.

kratera · visteviews
Kratera · Etna, vista Prospettiva
Kratera · Etna, vista Sezione
Kratera · Etna, vista Mappa
Kratera · Stromboli, vista Mappa
{{ v.n }} {{ v.kicker }}

{{ v.title }}

{{ v.body }}

  • {{ b }}
IL PRINCIPIO VISIVOTHE VISUAL PRINCIPLE

Una stima non deve mai avere l'aspetto di un dato certificato.An estimate must never look like a certified fact.

Su un tema dove protezione civile, osservatori vulcanologici, INGV e centri di ricerca decidono sulla base di questi numeri, ogni valore in interfaccia porta con sé la sua provenienza: colore diverso, etichetta diversa, tooltip diverso per «letto da fonte ufficiale» contro «stimato dal sistema».

On a topic where civil protection, volcanological observatories, INGV and research centers make decisions from these numbers, every value carries its provenance: a different color, label and tooltip for "read from an official source" versus "estimated by the system".

01 · ORDINANZAORDINANCE
Rosso pieno, bordo continuo: la zona esiste in un atto firmato. Il tooltip cita numero e data dell'ordinanza.Solid red, continuous outline: the zone exists in a signed order. The tooltip cites its number and date.
02 · STIMAESTIMATE
Ambra, tratteggio: è il sistema a dedurre il fronte. Il tooltip dichiara il metodo e i suoi limiti.Amber, dashed: the system infers the front. The tooltip states the method and its limits.
03 · REPLAY
Viola: il tempo non è adesso. Titoli riscritti («Metriche del 13 ago») e nota «zone ricostruite, non ordinanze reali».Purple: the time is not now. Headings rewrite themselves ("Metrics for 13 Aug") plus a "reconstructed zones, not real ordinances" note.
SELETTORE VULCANO · ESTENDIBILEVOLCANO SWITCHER · EXTENSIBLE

Una grammatica pensata per lo switch tra i preset dei vulcaniA grammar built for switching between volcano presets

Lo switch dal selettore in testa cambia morfologia, viste disponibili e stato di allerta, mentre gerarchia, colori di stato e dichiarazione della fonte restano identici — la stessa struttura con cui l'applicativo definitivo accoglie i preset dei vulcani monitorati.

The switch from the selector up top changes morphology, available views and alert state, while hierarchy, state colors and source declaration stay identical — the same structure the finished product uses to hold each monitored volcano's preset.

kratera · etna · prospettiva
Kratera · Etna, vista Prospettiva, allerta gialla
ETNA · GIALLOYELLOW Attività sopra la norma: tremore e anomalie termiche sommitali, accesso limitato in quota.Above-normal activity: tremor and summit thermal anomalies, restricted access at altitude.
kratera · stromboli · vista mare
Kratera · Stromboli, vista mare, allerta verde
STROMBOLI · VERDEGREEN Attività stromboliana normale: esplosioni regolari alle bocche, sentieri aperti fino a quota consentita.Normal Strombolian activity: regular explosions at the vents, trails open up to the permitted altitude.
DIETRO AL PROGETTOBEHIND THE WORK

Contesto, dati e correzioni: apri solo ciò che ti interessaContext, data and corrections, open only what interests you

Sei capitoli: cos'è un digital shadow, come si comporta il sistema quando le fonti tacciono, cosa ha corretto il vulcano.

Six chapters: what a digital shadow is, how the system behaves when sources go quiet, what the volcano itself corrected.

L'Etna nell'estate 2026 è passato da attività ordinaria a fase di allarme regionale. Le informazioni che contano, livello di allerta, quota di interdizione, versanti chiusi, esistono, ma sono sparse tra bollettini INGV, comunicati della Protezione Civile e ordinanze comunali, spesso pubblicati solo come testo su pagine HTML non pensate per essere lette da una macchina.

In summer 2026 Etna moved from ordinary activity to a regional alarm phase. The information that matters, alert level, exclusion altitude, closed flanks, exists, but is scattered across INGV bulletins, Civil Protection releases and municipal orders, often published as plain text on pages never meant to be machine-readable.

Il problema di design non era «com'è fatto il vulcano». Era: come mostro, in un unico posto, cosa è vero adesso, e da dove viene ogni singola informazione.

The design problem wasn't "what does the volcano look like". It was: how do I show, in one place, what's true right now, and where every single fact came from.

Un digital shadow è la rappresentazione di un sistema reale che si aggiorna a partire dai suoi dati, senza simularlo né predirne il comportamento. Qui il flusso è a senso unico, la realtà aggiorna il modello, e la morfologia del cono è schematica: onesto, utile, letto e stimato con la fonte sempre dichiarata.

A digital shadow is a representation of a real system that updates from its data, without simulating or predicting its behavior. Here the flow is one-way, reality updates the model, and the cone's morphology is schematic: honest, useful, read and estimated with the source always declared.

DIGITAL SHADOW
Flusso a senso unico · morfologia schematica · nessuna predizione, solo lettura e stima dichiarataOne-way flow · schematic morphology · no prediction, only reading and declared estimation

Le pagine ufficiali a volte caricano il bollettino via JavaScript, a volte non lo pubblicano affatto. La sismicità da sola può essere piatta anche in fase di allarme comunicato. Il design ha dovuto prevedere il fallimento di ogni singola fonte, e dichiararlo in interfaccia.

Official pages sometimes load the bulletin via JavaScript, sometimes don't publish it at all. Seismicity alone can be flat even during a declared alarm. The design had to plan for every source failing, and say so in the UI.

1
Ordinanze e comunicati ufficialiOfficial orders and releases
Scraping di Parco dell'Etna, Protezione Civile Sicilia, comuni etnei · parsing testuale in italiano per quote, versanti, numeri di ordinanzaScraping Parco dell'Etna, Sicily Civil Protection, Etna municipalities · Italian text parsing for altitudes, flanks, order numbers
2
Rassegna stampaPress coverage
Se il bollettino ETNAS non è leggibile alla fonte, si legge il comunicato ripreso dalla stampa, etichettato come lettura non ufficialeIf the ETNAS bulletin isn't readable at the source, the press-reported version is used, labeled as an unofficial reading
3
Sismicità INGVINGV seismicity
Se non c'è nessun comunicato leggibile, il livello si stima dal conteggio e dalla magnitudo degli eventi delle ultime 24h, e in UI diventa ambraWith no readable release, the level is estimated from event count and magnitude over the last 24h, and turns amber in the UI
4
Override manualeManual override
Un operatore può sempre forzare livello o zona, e la dashboard lo segnala come MANUALE, non come lettura automaticaAn operator can always force level or zone, and the dashboard flags it as MANUAL, not an automatic reading

Correzioni fatte in produzione, guidate da segnalazioni reali: quote dei crateri, orientamento della vista, sovrapposizioni di etichette, e, quando il livello ETNAS è salito a F1 il 13 agosto, il passaggio da un'allerta impostata a mano a un'allerta che si aggiorna da sola.

Corrections made in production, driven by real reports: crater altitudes, view orientation, label overlaps, and, when the ETNAS level rose to F1 on 13 August, the shift from a manually-set alert to one that updates itself.

UN CASO CONCRETO · 13 AGOSTOA CONCRETE CASE · 13 AUGUST

Durante la simulazione dell'evento F1, l'interfaccia mostrava la zona di interdizione come poligono fisso. Ragionando sul caso reale è emerso che il fronte stimato potrebbe non coincidere con quello comunicato ufficialmente, da qui la distinzione visiva tra zona da ordinanza (rosso pieno) e zona stimata (ambra tratteggiata), con tooltip che dichiara la differenza.

While simulating the F1 event, the interface showed the exclusion zone as a fixed polygon. Reasoning through the real case, it emerged that the estimated front might not match the officially communicated one, hence the visual split between ordinance zone (solid red) and estimated zone (dashed amber), with a tooltip stating the difference.

Una barra sempre presente in fondo alla dashboard porta gli otto momenti che hanno definito la crisi dell'estate 2026, dalla frattura a 3.000 m del 26 giugno al passaggio ETNAS a F1 del 13 agosto, fino alla chiusura dei fenomeni eruttivi il 26 agosto. Cliccando un nodo l'intera interfaccia entra in REPLAY: metriche, zone e stato di accesso si ricostruiscono a quel momento, e la vista scelta resta quella.

A bar pinned to the bottom of the dashboard carries the eight moments that defined the summer 2026 crisis, from the 3,000 m fissure on 26 June to the ETNAS shift to F1 on 13 August, through to the end of the eruptive phase on 26 August. Clicking a node puts the whole interface into REPLAY: metrics, zones and access status are reconstructed for that moment, and the chosen view stays put.

DIRETTA · LIVE
Badge verde LIVE, fonte dichiarata, «aggiornato N min fa» sempre visibileGreen LIVE badge, declared source, "updated N min ago" always visible
REPLAY · RICOSTRUITORECONSTRUCTED
Badge viola, titoli che diventano «Metriche del 13 ago», nota «zone ricostruite · non ordinanze reali», pulsante «Torna a ORA»Purple badge, headings that become "Metrics for 13 Aug", a "reconstructed zones · not real ordinances" note, and a "Back to NOW" button

Cosa ha funzionatoWhat worked

  • Dichiarare sempre la fonte in UI ha reso le correzioni più facili da spiegare, non più difficili
  • Always declaring the source in the UI made corrections easier to explain, not harder
  • Progettare per il fallimento delle fonti (cascata a 4 livelli) invece che per il caso ideale
  • Designing for source failure (a 4-level cascade) instead of the ideal case
  • Correggere in pubblico, quando il vulcano stesso ha smentito assunzioni iniziali
  • Correcting in public, when the volcano itself disproved early assumptions
  • Aggiungere la macchina del tempo: lo stato corrente da solo non raccontava la crisi
  • Adding the time machine: the current state alone didn't tell the story of the crisis

Cosa farei dopoWhat I'd do next

  • Passare dalla prospettiva schematica a una geometria reale (DEM Tinitaly INGV) per mostrare quale versante è davvero esposto a una colata
  • Move from the schematic perspective to real geometry (Tinitaly INGV DEM) to show which flank is actually exposed to a flow
  • Leggere i PDF dei bollettini ETNAS direttamente, eliminando la rassegna stampa come fonte di fallback
  • Read the official ETNAS bulletin PDFs directly, removing press coverage as a fallback source
  • Evolvere la timeline da otto momenti a una barra continua, con confronto tra due momenti nella stessa vista
  • Evolve the timeline from eight moments to a continuous bar, comparing two moments in the same view

Questo documento descrive un concept progettuale sviluppato come esercizio di product design e system thinking. Il prototipo non è ancora connesso a dati in tempo reale.

This document describes a design concept developed as an exercise in product design and system thinking. The prototype is not yet connected to real-time data.

© {{ year }} Antonino Omar Amato · Product Design
Tutti i lavori →All work →

Contenuto protettoProtected content

Inserisci la password per accedere a questo case study.

Enter the password to access this case study.

Password errata. Riprova.Wrong password. Try again.
← Torna al portfolio← Back to portfolio

Case study · 2026 · Manufacturing

Rekord

Digital Product Passport

Un Digital Product Passport tablet-first per la manutenzione delle pale eoliche, progettato per l'AMRC. Si attiva con la scansione di un QR sul componente fisico.

A tablet-first Digital Product Passport for wind turbine maintenance, built for AMRC. Triggered by scanning a QR code on the physical component.

rekord.io / dpp
Rekord DPP product overview

ClienteClient

AMRC

RuoloRole

Product Designer

SettoreSector

Economia circolareCircular economy

PiattaformaPlatform

Tablet · QR web app

01

Contesto & problemaContext & problem

I componenti in composito arrivano a fine vita senza alcun registro dei materialiComposite components arrive at end-of-life with no material record

Pale e mozzi delle turbine eoliche sono prodotti con materiali compositi la cui composizione esatta raramente sopravvive alla produzione. Quando i componenti arrivano agli impianti di riciclo, gli operatori non hanno alcuna visibilità su composizione, tolleranze di produzione o storico di manutenzione.

Recuperare i dati richiedeva una ricerca manuale tra export MES scollegati, registri cartacei e contatti dei fornitori, un processo che richiedeva giorni, non minuti, bloccando sia la conformità alla marcatura CE sia il recupero dei materiali a fine vita.

Wind turbine blades and hubs are manufactured from composite materials whose exact composition rarely survives production. When components reach recycling facilities, operators have no visibility into material makeup, production tolerances, or maintenance history.

Retrieving product data required manual lookup across disconnected MES exports, paper records, and supplier contacts, a process taking days rather than minutes, blocking both CE-marking compliance and end-of-life material recovery.

GiorniDays

tempo medio di ricerca dei dati di prodottoaverage lookup time for product data

ManualeManual

processo senza un'unica fonte di veritàprocess with no single source of truth

02

Ricerca sul campo, in officinaField research, in the workshop

«Adesso, se arriva una pala e ci serve la specifica del materiale, scrivo a tre persone diverse e aspetto due giorni. Quando arriva la risposta, la finestra per il riciclo si è già spostata.»

"Right now, if a blade arrives and we need its material spec, I'm emailing three different people and waiting two days. By the time we have the answer, the recycling window has moved."

, Field Engineer, AMRC · visita in officinaworkshop visit

{{ f.title }}

{{ f.body }}

03

Architettura dell'informazioneInformation architecture

Una gerarchia che rispecchia l'oggetto fisicoA hierarchy that mirrors the physical object

Il modello di navigazione è stato validato con gli ingegneri AMRC in sessioni di co-design: ogni livello mappa qualcosa che un tecnico può indicare sulla turbina reale.

The navigation model was validated with AMRC engineers in co-design sessions, every level maps to something a field technician can point to on the actual turbine.

Principio di design: ogni decisione di navigazione deve poter rispondere alla domanda «dove si troverebbe fisicamente questo componente?»Design principle: every navigation decision should be answerable by asking "where would this component be physically located?"

DPPDigital Product Passport
Components List
BladesBlade 1 – 5
HubsHub 1 – 2
Component Detail
Manufacturing Data Quality Control 3D Model Inspection Reports EU Compliance

04

Tre momenti che definiscono l'esperienzaThree moments that define the experience

{{ m.tag }}

{{ m.title }}

{{ m.body }}

Rekord, Product Overview screen
SCREEN 01 Product Overview DPP di primo livello: lista componenti, riepilogo qualità, date di registrazione e barra di stato, lo stato di atterraggio dopo la scansione del QR.Top-level DPP: component list, quality summary, registration dates and status bar, the landing state after a QR scan.
Rekord, Component detail, Blade part 1
SCREEN 02 Dettaglio componente, Blade part 1Component detail, Blade part 1 Dati di produzione, misure di controllo qualità, grafico di confronto energetico e storico di manutenzione con selettore di data 'time-machine'.Manufacturing data, QC measurements, energy comparison chart and maintenance history with a time-machine date selector.
Rekord, Component detail, end-of-life state
SCREEN 03 Dettaglio componente · stato fine vitaComponent detail · end-of-life state Dati di produzione, confronto energetico tra le pale, controllo qualità e selettore 'time-machine'. Indicatori rossi e flag nel titolo emergono automaticamente alla soglia di smaltimento.Manufacturing data, per-blade energy comparison, quality control and a time-machine selector. Red indicators and a title flag surface automatically at the disposal threshold.

05

Tre decisioni che hanno plasmato il prodottoThree decisions that shaped the product

{{ d.n }}

ProblemaProblem

{{ d.problem }}

Scelta di designDesign choice

{{ d.choice }}

MotivazioneRationale

{{ d.rationale }}

06

Obiettivi di design & impatto attesoDesign goals & expected impact

Queste sono intenzioni di design: il progetto è stato consegnato come prototipo e MVP co-progettato. I risultati sono ancora da misurare su scala.

These are design intentions, the project was delivered as a prototype and co-designed MVP. Outcomes are yet to be measured at scale.

{{ g.tag }}

{{ g.title }}

{{ g.body }}

Parliamo del tuo prodotto.Let's talk about your product.

info@omaramato.com

© {{ year }} Antonino Omar Amato · Rekord, Co-design con AMRCCo-design with AMRC

Contenuto protettoProtected content

Inserisci la password per accedere a questo case study.

Enter the password to access this case study.

Password errata. Riprova.Wrong password. Try again.
← Torna al portfolio← Back to portfolio

Case study · 2024 · Mobilità · EnterpriseMobility · Enterprise

SIV. AmmodernamentoModernization

Riprogettazione user-centered del sistema di gestione delle informazioni autostradali di ASPI, dalla dashboard olistica a un sinottico ispirato alle mappe metro.

User-centered redesign of ASPI's highway information management system, from a holistic dashboard to a metro-map-inspired synoptic.

SIV · Dashboard operativa della sala radio
In diretta · Sala radioLive · Radio room
−80%
tempo di entrata in azionetime to take action

La dashboard olistica a widget: l'intero tronco autostradale in un colpo d'occhio. Allarmi, eventi, soccorsi, cantieri e mappa in un'unica vista, senza più finestre del browser disposte a mosaico.The holistic widget dashboard: the whole motorway trunk at a glance. Alarms, events, rescue, roadworks and map in a single view, with no more tiled browser windows.

RuoloRole

Design ConsultantDesign Consultant

ClienteClient

Autostrade per l'Italia

Partner

Movyon · BCG · PwC

AmbitoScope

Sale radio · Web appRadio rooms · Web app

01

Contesto & problemaContext & problem

Operatori di sala radio, sommersi da finestreRadio-room operators, buried in windows

Il progetto nasce dalla collaborazione tra Movyon e Autostrade per l'Italia, con il supporto consulenziale di BCG e PwC. Come design consultant per Movyon, ho riprogettato il sistema di gestione delle informazioni stradali con un solo obiettivo: migliorarne usabilità ed efficacia operativa per gli operatori delle sale radio.

The project comes from the collaboration between Movyon and Autostrade per l'Italia, with advisory support from BCG and PwC. As a design consultant for Movyon, I redesigned the road information management system with a single goal: improving its usability and operational effectiveness for radio-room operators.

{{ p.title }}

{{ p.body }}

02

Un cambio di paradigma: l'utente al centroA paradigm shift: the user at the center

Dai primi incontri di Firenze, con tutte le parti coinvolte attorno allo stesso tavolo, abbiamo adottato una metodologia user-centered per la raccolta dei requisiti e la progettazione, ponendo gli operatori al centro di ogni decisione.

From the first meetings in Florence, with every stakeholder around the same table, we adopted a user-centered methodology for requirements and design, putting operators at the center of every decision.

{{ p.title }}

{{ p.body }}

Ricerca sul campoField research
{{ c }}
Interviste presso le direzioni di tronco e le sale radio ASPIInterviews at ASPI's trunk directorates and radio rooms

03

Discovery: un ciclo iterativo che si chiudeDiscovery: an iterative loop that closes

Interviste semi-strutturate, wireframe disegnati alla lavagna durante gli incontri e prototipi in Adobe XD testati nel meeting successivo. Ogni giro restituisce un miglioramento tangibile.

Semi-structured interviews, wireframes sketched on whiteboards during meetings, and Adobe XD prototypes tested in the next session. Every loop returns a tangible improvement.

{{ s.n }}

{{ s.label }}

{{ s.desc }}

04

14 aree di intervento14 areas of intervention

La ricerca ha mappato il nucleo funzionale del sistema: 14 categorie, ognuna con le proprie esigenze di visualizzazione tra listati, sinottici e grafici di KPI.

Research mapped the functional core of the system: 14 categories, each with its own visualization needs across lists, synoptics and KPI charts.

{{ a.name }}

05

Il sinottico ispirato alle mappe metroThe metro-map-inspired synoptic

Dai brainstorming è emerso un bisogno chiaro: associare liste e dati a qualcosa di più intuitivo e immersivo. È nato così un grande sinottico ispirato alle linee metropolitane di Londra e New York, l'innovazione che ha ridefinito la gestione visiva delle informazioni stradali.

From the brainstorms a clear need emerged: pairing lists and data with something more intuitive and immersive. That gave birth to a large synoptic inspired by the London and New York metro lines, the innovation that redefined the visual handling of road information.

Sinottico · vista geografica della reteSynoptic · geographic network view

SIV · Sinottico geografico con eventi in tempo reale sulla rete autostradale

Sinottico PMV · A01 Milano–NapoliPMV synoptic · A01 Milano–Napoli

SIV · Sinottico PMV ispirato alle mappe metro

Spaziale e intuitivoSpatial and intuitive

Le informazioni disposte lungo la linea, come fermate su una mappa metro.Information laid out along the line, like stops on a metro map.

Codifica cromaticaColor coding

Rosso · allarmiRed · alarms Blu · eventiBlue · events

Modello mentaleMental model

Supporta operatori abituati a ragionare per geografia, non per tabelle.Supports operators used to thinking by geography, not tables.

Criticità immediateInstant criticality

Segni visivi riconoscibili a colpo d'occhio per le situazioni critiche.At-a-glance visual cues for critical situations.

06

Dalla ricerca al prodotto: tre streamFrom research to product: three streams

In fase di sviluppo, con un team scrum, il design dell'interfaccia si è concentrato su tre stream prioritari: Eventi, Cantieri e Allarmi.

In the development phase, with a scrum team, interface design focused on three priority streams: Events, Roadworks and Alarms.

SIV · Stream eventi attivi

Stream · EventiStream · Events

Eventi attiviActive events

Listato gerarchico di eventi e cause, con localizzazione chilometrica, stato e azioni rapide in riga.Hierarchical list of events and causes, with kilometric location, status and quick in-row actions.

SIV · Stream cantieri

Stream · CantieriStream · Roadworks

CantieriRoadworks

Dettaglio cantiere con mappa, direzione, km di scambio e rientro, ordinanza e stato di installazione.Roadwork detail with map, direction, swap and return km, ordinance and installation status.

SIV · Stream allarmi galleria

Stream · AllarmiStream · Alarms

Allarmi galleriaTunnel alarms

Gestione allarmi per galleria con video live e chip d'azione per inserire o chiudere un evento SIV.Per-tunnel alarm handling with live video and action chips to open or close a SIV event.

07

Accessibilità come priorità, sistema come fondamentaAccessibility as a priority, the system as foundation

Standard WCAG ai livelli AA e AAA per tipografia, colori e contrasti, perché il sistema sia leggibile anche in condizioni di stress o scarsa illuminazione. Il tutto sul design system di Movyon, costruito su griglia base 8px.

WCAG standards at AA and AAA levels for typography, colors and contrast, so the system stays readable even under stress or poor lighting. All built on Movyon's design system, on an 8px base grid.

Approccio atomicoAtomic approach

{{ d.level }}
{{ d.name }}{{ d.desc }}

WCAG

AAConformità di base garantitaBaseline compliance guaranteed
AAARaggiunta dove possibileReached wherever possible

Specifiche & strumentiSpecs & tools

Figma · dev-mode Adobe XD Base 8px 1440px Grid 12 col 13"+

08

Design e sviluppo, un ciclo virtuosoDesign and development, a virtuous loop

Il processo di design è stato integrato nel flusso scrum: mentre il design avanza sull'interfaccia, gli sviluppatori lavorano su debito tecnico e code review. Due ritmi che si rafforzano a vicenda.

The design process was woven into the scrum flow: while design moves ahead on the interface, developers work on technical debt and code review. Two rhythms that reinforce each other.

{{ b.title }}

{{ b.body }}

09

Risultati misurabiliMeasurable results

L'approccio user-centered e il processo iterativo hanno prodotto miglioramenti oggettivi nelle metriche di usabilità.

The user-centered approach and the iterative process produced objective improvements in usability metrics.

{{ r.value }}

{{ r.label }}

{{ r.note }}

Cosa abbiamo misuratoWhat we measured
{{ m }}

Parliamo del tuo prodotto.Let's talk about your product.

info@omaramato.com

© {{ year }} Antonino Omar Amato · SIV, Ammodernamento per ASPI × MovyonModernization for ASPI × Movyon