Progetto Wireframing — JojobRT

Contesto

JojobRT è il servizio italiano di carpooling casa-lavoro che connette pendolari, aziende e territori.
Il Wireframing è il terzo capitolo della serie che ho dedicato a questo servizio durante il Master in UX/UI Design di start2impact, dopo la Discovery del 2025 e il Progetto Accessibilità del 2026.
Qui le evidenze di quelle due fasi diventano struttura: pagine, gerarchie, flussi.

Problema

La Discovery aveva lasciato sei criticità precise.
Il valore del servizio non era chiaro e non si capiva se fosse per privati, aziende o territori.
Mancavano elementi di fiducia: recensioni visibili, profili verificati, una sezione dedicata ai viaggi tra sole donne.
Il sito informava ma non guidava all’uso diretto, soprattutto da desktop.
I dati ambientali (CO₂ risparmiata, chilometri condivisi) erano poco visibili, e la gerarchia dei contenuti confondeva la navigazione.
A questo si aggiungeva un’esperienza non fluida tra sito e app, con account e gestione viaggi non disponibili su entrambe.

Processo

Punto di partenza

Sono partito dalle tre personas già costruite: Laura, che vuole vedere i propri dati di risparmio; Emily, che cerca sicurezza e una modalità dedicata alle donne; Logan, che ha bisogno di percorsi brevi.
Come riferimento esterno ho analizzato BlaBlaCar in un esercizio preliminare, su homepage e pagina “Pubblica un passaggio”, in versione desktop e mobile.
Ne ho ricavato un principio: un buon sito mette al centro l’azione dell’utente e costruisce tutto intorno a essa.

Design system

Ho poi definito le fondamenta: scala tipografica in Inter e griglia a 12 colonne (margine 80, gutter 24).
I wireframe sono in mid-fidelity su Figma, in scala di grigi con un unico accento, il blu #1463BF, riservato agli elementi interattivi: CTA, link, campi attivi, toggle, filtri selezionati.
Icone, immagini e video sono placeholder, così la lettura resta sulla struttura e sulla gerarchia.

Desktop

Ho progettato cinque pagine: Homepage, Carpooler Privati, Solo Donne, Registrazione, Area personale.
Ogni elemento è annotato con il motivo della scelta e con il bisogno di persona a cui risponde.

Mobile

Ho ridisegnato le stesse cinque pagine con griglia a 4 colonne (margine e gutter da 16 px) e scala tipografica ricalibrata, dai 28 px dell’H1 ai 12 px di note e tag.
Ho documentato i percorsi con i wireflow e la struttura informativa con una sitemap prima e dopo il redesign.

Soluzione

Homepage

La homepage separa i tre target in card distinte e porta chi conosce il servizio subito alla ricerca.
Introduce numeri d’impatto, tre step su come funziona, una sezione Sicurezza e fiducia e una rassegna stampa.
La CTA “Registrati” è sempre visibile nella navbar.

Carpooler Privati

Chi cerca e chi offre un passaggio hanno due percorsi paralleli da tre step.
Un simulatore calcola il risparmio personale in euro, CO₂ e alberi.
Le testimonianze di utenti verificati precedono la CTA finale.

Solo Donne

La pagina chiarisce che non è un servizio separato: stessa app, stessi costi, cambia solo il filtro di genere.
Spiega l’attivazione in tre step, con testimonianze, FAQ in accordion e una CTA diretta.

Registrazione

Navbar e footer sono minimali, con benefit a sinistra e form a destra, login con Google e LinkedIn.
Il wireframe mostra tutti gli stati del form (neutro, focus, errore, valido), un indicatore di forza della password a tre livelli e la conferma finale con accesso all’Area personale.

Area personale

Una sidebar a quattro tab riunisce viaggi, profilo, risparmi e impostazioni.
Il profilo verificato è in evidenza, la modalità Solo Donne si attiva dal profilo, i risparmi sono personali e non medie della community.
Su mobile la sidebar diventa una barra di tab raggiungibile col pollice, con aree di tocco da almeno 44 px e stati vuoti progettati per chi si è appena registrato.

Flussi e sitemap

Tre wireflow desktop seguono Laura, Emily e Logan e convergono sull’Area personale, dopo la conferma “Account creato con successo!”.
Sulla versione mobile li ho riverificati, con due varianti alternative di registrazione.
La sitemap documenta due rinomine (“Carpooling Aziendale” diventa “Aziende”, “Contatti” diventa “Aiuto”), l’accorpamento dell’assistenza in FAQ, lo spostamento di “Scarica l’app” nel footer e due aggiunte: l’Area personale e la sottopagina Solo Donne.
Il documento completo, 68 pagine con wireframe desktop e mobile, wireflow, sitemap e riepiloghi, si apre dalla copertina qui sopra.

Impatto e risultati

Il progetto non ha metriche di mercato né test di usabilità, perché si ferma al wireframe.
Quelle che seguono sono ipotesi di progetto, legate ai flussi di business di JojobRT.
Separare i target in homepage dovrebbe ridurre lo smarrimento di chi non sa se il servizio fa al caso suo e portare più persone al percorso giusto.
Sicurezza, recensioni, profili verificati e pagina Solo Donne sono pensati per rispondere alla diffidenza che nella Discovery faceva abbandonare: fiducia che dovrebbe tradursi in registrazioni.
Il simulatore è pensato per trasformare un beneficio generico in un numero personale, un motivo concreto per iscriversi.
Una registrazione senza distrazioni, con feedback immediato e login sociale, dovrebbe ridurre i punti in cui si perdono gli utenti.
Il sito passa da strumento informativo a servizio utilizzabile direttamente dal browser, con le azioni chiave a pochi passaggi su entrambi i dispositivi.
Ognuna di queste ipotesi andrebbe verificata con test di usabilità sui wireframe.

Riflessioni

Annotare ogni elemento con il bisogno della persona a cui risponde è stata la scelta più utile: ogni decisione si può difendere, e ogni elemento superfluo emerge subito.
Limitare il colore al solo blu interattivo ha costretto a ottenere la gerarchia dalla struttura, non dalla decorazione, e a rimandare la grafica alla fase di User Interface.
Il passaggio a mobile mi ha insegnato che non basta restringere il layout: tab per ruolo, filtri a chip, stati vuoti e CTA a tutta larghezza sono decisioni di progetto a sé.
Il passo successivo è la fase di User Interface, dove i placeholder diventano icone, immagini e video definitivi.