Playmoove
Rendere chiara la complessità di una piattaforma per la mobilità.
Playmoove è una piattaforma software configurabile per la gestione di servizi di mobilità condivisa, flotte aziendali, noleggio automatizzato e trasporto on-demand.
La varietà delle funzionalità, dei modelli operativi e degli ambiti di applicazione rendeva difficile raccontare il prodotto attraverso una struttura digitale semplice e immediata.
Il progetto ha quindi richiesto di organizzare contenuti e percorsi differenti all’interno di un unico sistema, rendendo la piattaforma comprensibile senza ridurne la complessità e il valore tecnologico.
La nuova esperienza costruisce un racconto progressivo della piattaforma, combinando contenuti, movimento e componenti interattivi.
Un sistema digitale capace di orientare, spiegare e coinvolgere.
La nuova struttura è stata progettata per accompagnare pubblici differenti nella comprensione della piattaforma, dalle aziende agli operatori della mobilità fino agli enti pubblici.
Soluzioni, settori, funzionalità e contenuti editoriali sono stati organizzati come parti di uno stesso ecosistema, costruendo percorsi di navigazione chiari senza appiattire la ricchezza dell’offerta.
Il linguaggio visivo estende l’identità di Playmoove nell’ambiente digitale attraverso tipografia, movimento, elementi tridimensionali e visualizzazioni ispirate a reti, connessioni e flussi di mobilità.
Un sistema digitale, non una semplice sequenza di pagine.
Il progetto è stato costruito a partire dall’architettura dei contenuti, individuando le relazioni tra piattaforma, soluzioni, settori e casi d’uso.
Ogni area risponde a una diversa esigenza informativa, ma appartiene allo stesso racconto: mostrare come Playmoove possa adattarsi a modelli operativi, organizzazioni e contesti differenti.
La navigazione, i template e i componenti dell’interfaccia sono stati quindi progettati come parti di un sistema modulare e coerente, capace di accompagnare l’utente dalla visione generale della piattaforma fino agli aspetti più specifici dell’offerta.
Organizzare
Architettura dei contenuti
Soluzioni, settori, funzionalità e approfondimenti sono stati riorganizzati in percorsi distinti ma interconnessi, rendendo più semplice esplorare la piattaforma in base alle esigenze dell’utente.
Uniformare
Un linguaggio visivo coerente
Tipografia, colori, forme, griglie e componenti costruiscono un’identità digitale riconoscibile, capace di mantenere continuità tra pagine istituzionali, contenuti tecnici e sezioni editoriali.
Rendere scalabile
Una struttura pronta a evolvere
Il sistema è stato progettato per accogliere nuove soluzioni, settori, lingue e contenuti senza perdere coerenza visiva o richiedere ogni volta una riprogettazione completa.
Percorsi diversi, all’interno dello stesso ecosistema.
Playmoove si rivolge a interlocutori differenti: aziende, operatori della mobilità, enti pubblici, università e strutture ricettive. Ognuno accede al sito con esigenze, competenze e obiettivi diversi.
L’architettura è stata quindi organizzata attorno a due principali modalità di esplorazione: le soluzioni, che raccontano ciò che la piattaforma permette di fare, e i settori, che mostrano come queste funzionalità si applicano a contesti operativi specifici.
Questa struttura consente di raggiungere gli stessi contenuti da prospettive differenti, mantenendo sempre chiara la relazione tra bisogni, funzionalità e ambiti di utilizzo.
Orientare senza semplificare eccessivamente.
La navigazione è stata progettata per rendere accessibile una grande quantità di contenuti senza nascondere la complessità reale della piattaforma.
Menu, collegamenti contestuali e componenti interattivi aiutano l’utente a passare dalla visione generale agli approfondimenti, mantenendo sempre visibile il rapporto tra le diverse aree del sito.
Navigazione globale
Un menu che restituisce la struttura del progetto
Il menu fullscreen presenta le principali aree del sito all’interno di un’unica vista, facilitando il passaggio tra soluzioni, settori, piattaforma, approfondimenti e contenuti istituzionali.
Percorsi contestuali
Contenuti collegati tra loro
Ogni pagina propone relazioni con altre aree del sito, permettendo di esplorare la piattaforma attraverso funzionalità, esigenze operative e settori di applicazione.
Sintesi → Dettaglio
Diversi livelli di approfondimento
Le informazioni sono distribuite progressivamente: una prima lettura sintetica introduce il tema, mentre diagrammi, contenuti tecnici e pagine dedicate permettono di approfondire senza sovraccaricare l’esperienza iniziale.
Contenuti visuali e interattivi aiutano a rappresentare le relazioni tra modelli operativi, funzionalità e configurazioni della piattaforma.
Dare movimento al progetto senza compromettere l’esperienza.
A partire dalla direzione visiva e dai layout del progetto, ho sviluppato un sistema di animazioni e interazioni capace di estenderne il linguaggio nell’ambiente digitale.
Transizioni, elementi grafici dinamici e comportamenti legati allo scroll accompagnano la navigazione e mettono in relazione le diverse parti dell’interfaccia, senza ostacolare la lettura dei contenuti.
Le animazioni sono state sviluppate su misura attraverso JavaScript, GSAP e SVG, lavorando sull’equilibrio tra impatto visivo, fluidità e prestazioni sui diversi dispositivi.
Animazioni su misura
Interazioni integrate nell’interfaccia
Le animazioni sono state costruite in funzione dei singoli componenti, evitando effetti generici o sovrapposti al progetto.
Visualizzazioni dinamiche
Rappresentare connessioni e movimento
SVG e diagrammi traducono visivamente concetti legati a reti, mobilità e infrastrutture digitali.
Esperienza responsive
Movimento adattato a ogni dispositivo
Tempi, intensità e comportamenti delle animazioni sono stati ricalibrati per garantire un’esperienza leggibile e fluida anche su tablet e smartphone.
Tradurre un progetto articolato in un sistema solido e gestibile.
Il sito è stato sviluppato in WordPress ed Elementor, integrando componenti personalizzati in HTML, CSS e JavaScript per superare i limiti delle funzionalità standard e riprodurre con precisione layout, comportamenti e interazioni previsti dal progetto.
La struttura è stata costruita in modo modulare, così da permettere al team di gestire e ampliare nel tempo soluzioni, settori, approfondimenti e contenuti multilingua senza intervenire ogni volta sul codice.
Particolare attenzione è stata dedicata alla coerenza tra le diverse tipologie di pagina, alla qualità del front-end e alla stabilità del sistema su dispositivi, lingue e dimensioni dello schermo differenti.
Componenti personalizzati
Oltre le funzionalità standard di Elementor
Sezioni, menu, moduli, carousel e comportamenti interattivi sono stati sviluppati o estesi attraverso codice custom, mantenendo il controllo sul risultato visivo e funzionale.
Contenuti dinamici
Una struttura modulare e scalabile
Soluzioni, settori e approfondimenti sono gestiti come contenuti strutturati e collegati tra loro, così da alimentare automaticamente archivi, pagine interne e sezioni correlate.
Gestione editoriale
Autonomia senza perdere coerenza
Il sistema permette di aggiornare testi, immagini e contenuti attraverso WordPress, preservando le regole visive e la struttura definita per il progetto.
Un’esperienza coerente tra dispositivi, contenuti e lingue.
Il sito è stato progettato per funzionare come un unico sistema anche quando cambiano dimensioni dello schermo, quantità dei contenuti e direzione di lettura.
Layout, navigazione e componenti interattivi sono stati adattati per desktop, tablet e smartphone, intervenendo dove necessario su gerarchie, spaziature e comportamento delle animazioni.
L’integrazione con WPML consente inoltre di gestire le versioni inglese, italiana e araba. L’implementazione della lingua araba ha richiesto un lavoro specifico sull’interfaccia RTL, sulla direzione dei contenuti e sui componenti che non potevano essere semplicemente ribaltati in modo automatico.
Ridurre il peso senza perdere la ricchezza dell’esperienza.
La presenza di animazioni, contenuti multimediali, visualizzazioni SVG e numerose tipologie di pagina richiedeva un lavoro specifico sulle prestazioni.
Ho ottimizzato immagini, risorse front-end, caricamento degli script e comportamento delle animazioni, intervenendo anche sulla generazione dei file CSS e sulla gestione della cache di WordPress ed Elementor.
L’obiettivo non era eliminare gli elementi più caratterizzanti del progetto, ma trovare un equilibrio tra qualità visiva, fluidità e tempi di caricamento, soprattutto su smartphone e connessioni mobili.
Asset e immagini
Risorse più leggere e adatte ai diversi dispositivi
Le immagini sono state convertite e dimensionate in funzione del loro utilizzo, riducendo il peso delle pagine senza compromettere la qualità visiva.
Script e animazioni
Movimento attivato solo quando necessario
Script, animazioni e componenti interattivi sono stati organizzati per limitare elaborazioni inutili e ridurre il carico sulle pagine e sui dispositivi meno potenti.
CSS e caricamento
Un front-end più ordinato e controllabile
Gli stili globali sono stati razionalizzati e separati dalle singole pagine, migliorando manutenzione, coerenza e gestione delle risorse generate da Elementor.
Una piattaforma digitale pronta a crescere insieme al prodotto.
Il risultato è un sito articolato ma coerente, capace di raccontare Playmoove a interlocutori differenti e di accompagnarli dalla comprensione generale della piattaforma fino alle singole soluzioni e applicazioni.
La combinazione tra WordPress, componenti dinamici e sviluppo front-end personalizzato ha permesso di costruire un sistema gestibile e scalabile, senza rinunciare alla precisione del progetto visivo e alla qualità delle interazioni.
Il sito può oggi evolvere attraverso nuovi contenuti, lingue, settori e funzionalità, mantenendo una struttura riconoscibile e un’esperienza uniforme su tutti i dispositivi.