✹ PassparQ ✹
Redesign di una piattaforma di accessi tramite QR code, da strumento progettato per un solo cliente a prodotto pronto per il mercato.
✹ Contesto ✹
PassparQ è una piattaforma B2B nel settore PropTech che gestisce gli accessi fisici tramite QR code. Al posto di una chiave fisica, la porta si apre inquadrando un codice che sblocca una serratura meccanica. Chi gestisce la struttura cambia le chiavi digitali quando vuole, le revoca all'istante e sa sempre chi è entrato e quando.
Il prodotto esisteva già, ma era nato anni prima intorno a un singolo cliente e nel tempo era diventato poco usato e difficile da vendere. Il redesign si è rivolto a due target precisi, quelli in cui il controllo degli accessi è un processo quotidiano e non un accessorio: hotel e strutture ricettive, uffici e spazi gestiti.
✹ La sfida ✹
La piattaforma portava ancora la forma dell'organizzazione per cui era nata, e quella forma la rendeva rigida: non scalabile né adattabile ad altri clienti, quindi difficile da portare sul mercato.
Il sintomo più pesante era architetturale: ogni ruolo, Super Admin, Admin e Manager, viveva su una piattaforma a sé, con dominio e accesso separati. Tre applicazioni da mantenere in parallelo invece di un unico prodotto con i ruoli gestiti dai permessi.
✹ Ruolo e processo ✹
Ho seguito il progetto in autonomia, dall'analisi all'interfaccia fino all'handoff.
01 — Analisi euristica
Ho analizzato il prodotto schermata per schermata con un'analisi euristica di usabilità, valutando ogni vista rispetto alle euristiche di Nielsen. Ne è emersa una serie di attriti ricorrenti, dalla nomenclatura incoerente all'architettura dell'informazione, dai feedback di stato ambigui agli empty ed error state non progettati.
Alcune pagine della vecchia piattaforma — utenza Manager.
Mappa degli attriti emersa dall'audit euristico.
02 — Architettura dell'informazione
Ho ripensato il modello di navigazione a partire dall'architettura: da tre piattaforme separate per ruolo a un unico prodotto in cui i ruoli sono gestiti a livello di permessi. Su questa base ho riorganizzato la struttura per aree funzionali, così che ogni azione trovi posto nel contesto in cui serve.
Alberatura del prodotto unificato.
03 — La piattaforma
La piattaforma è lo strumento di gestione usato dagli Admin: da qui si amministrano le persone che accedono, le porte, le chiavi digitali e lo storico degli eventi.
Utenti
La sezione da cui l'Admin gestisce chi può accedere. Può creare nuove utenze, modificarle, disabilitarle o eliminarle. La creazione avviene in due passaggi: prima i dati della persona, poi il ruolo. I ruoli sono tre e si distinguono per ampiezza e durata dell'accesso: l'Admin ha accesso completo e permanente, l'Operatore staff un accesso valido solo nei propri orari e per la durata del contratto, l'Ospite esterno un accesso a poche porte e per un tempo limitato.
La modale di creazione di un nuovo utente e la pagina Utenti.
Punti d'accesso
La sezione da cui l'Admin registra ogni punto d'accesso con il dispositivo che lo comanda, così che esista nel sistema. Vede tutte le porte e sa quali hanno già una chiave associata, e può modificarle, eliminarle o aprirle da remoto. L'apertura da remoto funziona solo se alla porta è stata associata una chiave.
QR Code
La sezione da cui l'Admin crea una nuova chiave e la collega a un punto d'accesso. Vede tutte le chiavi già create con il loro stato e le può scaricare, disattivare o eliminare. Quando una chiave viene disattivata o eliminata, l'accesso viene revocato subito.
Pagine: Punti d'accesso e QR Code.
Cronologia
La sezione che registra tutto ciò che accade sulla piattaforma, cioè gli accessi alle porte e le modifiche fatte dagli Admin. La lista si può filtrare per tipo e per periodo.
Dashboard
La panoramica che l'Admin vede appena entra. Riassume lo stato della struttura con tre indicatori sintetici (utenti, porte, chiavi attive), l'elenco delle ultime porte usate, le attività più recenti e un grafico dell'affluenza per fasce orarie.
Pagine: Cronologia e Dashboard.
04 — L'accesso dell'utente ai punti d'accesso
Prima operatori e ospiti dovevano scaricare un'app dedicata solo per aprire una porta, un attrito evitabile. Ho scelto una PWA: inquadrando il QR, il browser apre direttamente la web app e l'utente si autentica ed entra in pochi secondi, senza passare dallo store e usando la sola fotocamera del telefono. Per evitare che il QR aprisse la porta a chiunque ne fosse in possesso, ho legato l'accesso a un'identità autenticata: l'utente inserisce la propria email e, solo se è già registrata tra le utenze della piattaforma, riceve un codice usa e getta per confermare l'identità, con sessione persistente dopo il primo ingresso.
User flow di autenticazione e apertura.
05 — Design Library
Ho costruito la libreria di componenti come file separato da quello di progetto, così da modificare e pubblicare i componenti in modo controllato senza toccare i file di lavoro. Il colore è organizzato su due livelli, una palette primitiva e una semantica. La tipografia accosta due caratteri con un'intenzione precisa, Satoshi per l'interfaccia e JetBrains Mono per il dato tecnico. Ogni componente è costruito con proprietà e varianti, così da raccogliere in un unico elemento tutti i suoi stati e le sue configurazioni e restare coerente, semplice da riutilizzare e da mantenere.
Dashboard Design Library: token, tipografia e componenti della libreria.
✹ Risultati ✹
01 — Una piattaforma pronta per un mercato verticale
Il redesign ha trasformato uno strumento progettato per un solo cliente in un prodotto adottabile da un target definito: hotel e spazi gestiti. Il passaggio decisivo è stato architetturale: da tre applicazioni separate per ruolo a un unico prodotto in cui i ruoli vivono a livello di permessi.
02 — Un ingresso ai punti d'accesso più semplice
Per aprire un punto d'accesso non serve più scaricare nulla: si inquadra il QR, la PWA si apre nel browser e l'utente si autentica ed entra in pochi secondi, con la sola fotocamera del telefono. L'ingresso passa da un flusso con installazione a un'azione immediata.
03 — Un design coerente e scalabile
La design library, con token semantici e componenti costruiti con proprietà e varianti, dà al prodotto un'identità unica e riutilizzabile. Ogni nuova schermata parte da elementi già decisi, così il sistema cresce senza perdere coerenza.
✹ Cosa ho imparato ✹
I problemi di esperienza più fastidiosi raramente vivono nell'interfaccia: nascono dall'architettura e dai flussi. Le funzioni fuori posto, le tre piattaforme separate e la terminologia incoerente erano sintomi di una struttura progettata su un solo cliente, non difetti di interfaccia. Il vero lavoro non era ridisegnare le schermate, ma rifondare l'architettura e i flussi prima dell'interfaccia.