Progetto personale · app mobile

Volée

La combo giusta, al livello giusto, quando serve. Una libreria per l'acrobatica aerea, progettata dall'architettura al marchio e portata a un prototipo navigabile.

Quattro delle trenta schermate: il feed, lo studio del video sull’attrezzo, i preferiti scaricati, la pubblicazione.

La decisione

Il livello dipende dall'attrezzo. Ho collegato ricerca e filtri, e progettato messaggi diversi quando mancano i video o sono i filtri a nasconderli: chi cerca una figura capisce come proseguire.

La prova

Trenta schermate, quattro flussi, 152 punti attivi. Contrasto, aree di tocco e destinazioni controllati su tutte le schermate. Il pilota in palestra è il passo successivo.

Prima di leggere

Provala.

Trenta schermate vere e 152 punti attivi: si apre, si filtra, si cerca, si carica un video. Il racconto di come ci sono arrivata comincia sotto, ma la cosa da guardare è questa, ed è meglio guardarla prima.

A schermo intero: volee-prototipo.netlify.app

La landing, con la ricerca animata: khaki-trust-307513.framer.app

01

Da dove nasce

Mi alleno quasi ogni giorno. Volée nasce da una cosa che mi succedeva tornando a casa: ricordavo metà di una combo e passavo la sera a cercare il video giusto.

Un video salvato che non ritrovi più, uno mandato nel gruppo del corso mesi prima, una figura che sai fare ma di cui non ricordi il nome. I video non mancano: manca un ordine che segua il modo in cui ci si allena, per attrezzo e livello. Un video che non puoi ancora fare non ti serve; uno che potresti fare ma che non trovi è come se non esistesse.

La palestra da cui nasce il progetto. Sotto gli attrezzi non ci sono reti ma tappetoni: si vola a pochi metri da terra, e proprio per questo sbagliare livello non è una delusione, è un infortunio.
02

Il problema

Fra luglio e agosto mi sono confrontata in palestra con una decina di persone dei corsi e con un'istruttrice. Erano conversazioni nei momenti fra un giro e l'altro. Ho osservato anche dove finivano i video: social, gruppi chiusi, galleria del telefono. Le piattaforme dei singoli insegnanti offrivano già un ordine per livello, ma dentro il catalogo di una persona sola.

Due frasi, dette a distanza di giorni da due persone diverse, dicono lo stesso problema da due lati.

«Cerco su Instagram le combo per i vari corsi, ma a volte non capisco nemmeno io alcuni dei passaggi.»Chi insegna
«Su Instagram mi compaiono nel feed delle combo fighissime, che però non so se rientrano nelle mie capacità.»Chi frequenta il corso

Chi insegna fatica a leggere i passaggi; chi impara fatica a capire la difficoltà. Sono due problemi che chiedono lo stesso ordine. Il progetto doveva rispondere alla domanda che il feed dei social lascia aperta: «cosa posso fare io, oggi, e come è fatto dentro?».

Da lì escono le tre condizioni che il progetto deve rispettare. Il momento in cui il video serve non è sul divano, è in palestra, sotto l’attrezzo, con la lezione che va avanti. Lì la rete non prende. E nessuno cerca un video: si cerca una figura con un nome, e quel nome cambia da palestra a palestra.

Il feed di apertura: niente follow e niente classifiche. L’attrezzo in alto funziona da interruttore, e sotto c’è tutto quello che la community ha caricato, dal più recente.
Mappa dell'architettura dell'informazione
Quattro zone e mai oltre il terzo livello di profondità: da qualunque punto, il video è a due tocchi.
03

Le cinque decisioni

Le cinque volte in cui il progetto poteva prendere due strade. Per ognuna: la domanda, cosa ho provato, cosa ho scelto, perché.

Un livello per video, o due?

provato«Da L1 a L2», per i video che iniziano facili e finiscono difficili.

sceltoUn livello solo, quello del pezzo più difficile. E il livello è per attrezzo: un L2 al cerchio non è un L2 ai tessuti.

perchéUn video «da L1 a L2» compare in due caselle e non è vero in nessuna delle due. Il livello per attrezzo ha poi una conseguenza che non avevo previsto: se non hai scelto l’attrezzo, filtrare per livello non significa niente. Per questo il livello non sta nel pannello dei filtri, ma compare in una riga rapida solo dopo che l’attrezzo è stato scelto.

La riga dei livelli esiste solo qui, sotto l’attrezzo scelto.

Like e commenti: dentro o fuori?

provatoIl pacchetto standard: cuore, commenti, conteggi in vista.

sceltoFuori. Restano i salvataggi, e non si vedono: servono a ordinare il feed, non a fare classifica.

perchéChi carica qui è chi frequenta il corso, col telefono in mano, non un creator. Un conteggio pubblico sotto il video decide chi carica il secondo. Togliendo il numero resta il segnale, cioè che quel video qualcuno lo sta usando, senza il costo di esporsi.

Nel dettaglio non c’è un solo numero: il video, i dati che servono, e chi l’ha caricato.

Che si fa con chi filma in orizzontale?

provatoAccettare entrambi i formati, con le bande nere sui video orizzontali.

sceltoSolo verticale, dichiarato prima di scegliere il file, con il taglio a 9:16 nello stesso passo del trim.

perchéCon due formati il feed va a due velocità e le anteprime smettono di essere confrontabili. Ma respingere chi ha già girato è il modo più rapido per non farlo tornare: così il vincolo si dice all’inizio e si risolve subito dopo, nella stessa schermata.

Il vincolo è scritto, e sotto c’è già il riquadro per ritagliare invece di un messaggio d’errore.

La ricerca è un posto, o è uno stato?

provatoUna schermata di ricerca a sé, coi suoi risultati, staccata dal feed.

sceltoLa ricerca è un filtro sul feed: la parola cercata diventa un chip che si somma ad attrezzo e livello.

perchéNella schermata separata la ricerca perdeva i filtri già attivi, e chi cercava «chiave d’anca» dopo aver scelto Tessuti e livello 2 doveva rifare tutto. Come stato, invece, le due cose si sommano, che era la promessa fatta all’inizio.

Prima · un posto

Dopo · uno stato

A destra la parola cercata è diventata un chip in fila con gli altri filtri: «Tessuti» resta acceso e l’ordinamento passa a rilevanza.

Cosa dice una schermata vuota?

provatoUn messaggio unico e gentile per tutti i casi: «Nessun risultato».

sceltoUn componente, tre testi. Il testo nomina la causa e offre di togliere l’ultimo vincolo messo.

perchéC’è un caso in cui il messaggio unico è una bugia: i video per quella parola esistono, sono i filtri a tagliarli. Dire «niente per chiave d’anca» manderebbe via una persona che era a un tocco dal risultato.

Stesso componente, tre cause diverse: la casella è ancora vuota, la parola non esiste nemmeno con gli alias, i video ci sono ma li stanno tagliando i filtri.
04

Il marchio

Il marchio doveva farsi riconoscere a 34 pixel e raccontare il movimento dei tessuti. Ho esplorato tre strade: figure stilizzate, figure più definite e una posa ricalcata dal vero.

Alla misura dell'app, tutte finivano per leggere «omino», come un cartello stradale. Migliorare la fedeltà della posa non risolveva il problema: doveva cambiare il tipo di segno.

Il pezzo che mancava non era il soggetto, era il tratto. I riferimenti che mi attiravano avevano tutti la stessa qualità: una linea continua a spessore variabile, che si ingrossa dove porta il peso e si assottiglia dove è solo aria. Rifatto così, il segno ha smesso di essere una figura ed è diventato un movimento. Due linee che nascono insieme, si scambiano di posto una volta e scendono: il tessuto attorcigliato, senza il corpo.

Prima tavola: dodici segni
La tavola con cui è ricominciato dopo le figure: dodici segni in tre famiglie. Due coincidevano con segni già riconoscibili, il bemolle e la corona musicale: li ho scartati perché il marchio avesse una propria identità.
Terza tavola: il tratto calligrafico
Il passaggio in cui cambia il tratto e non il soggetto: contorni calcolati con un profilo di larghezza, non linee di spessore fisso.
Marchio finale
Il segno scelto. Compare in un punto solo dell’app, lo splash: montato sopra la foto d’ingresso, a 30 pixel, cadeva sul corpo e spariva.
05

L’ingresso

La schermata d’ingresso è una foto con del testo sopra, e il testo deve restare leggibile. La strada breve, cioè scurire la foto o metterci sopra un pannello, l’ho provata e l’ho buttata: cancella l’immagine per cui l’hai messa.

Il problema vero non era il trattamento, era la foto. Ne ho passate in rassegna 91 e non ce n’era una con una zona di riposo nel terzo basso, dove va il testo. Poi ho capito perché, ed è una proprietà dell’attrezzo: il tessuto per gravità arriva sempre a terra, quindi c’è sempre una colonna scura dove serve il vuoto, in qualunque posa e con qualunque ritaglio. Il cerchio invece ha una sola cima sottile che sale, e sotto non scende niente.

Ne ho generate altre 84 e, invece di sceglierle guardandole, ho misurato la fascia bassa di ognuna: luminosità media, deviazione, energia dei bordi dal 58 al 100 per cento dell’altezza. Le migliori otto le ho montate davvero dentro la schermata, poi altre trentaquattro. Ed è lì che è nata la regola del capitolo: si giudica solo montato. Sul foglio a contatto due immagini sembravano perfette, ma montate i capelli cadevano dentro la parola «Volée».

Otto finaliste montate
Le otto finaliste, montate. Il criterio non è quale foto è più bella, è dove cade la parola.

Scelto · ingresso chiaro

Scartato · ingresso scuro

Il chiaro distingue l'ingresso dalle schermate interne e racconta il passaggio: fuori la luce, dentro la palestra. Dopo il login l'app torna scura.
06

Il sistema

Il colore l’ho scelto in due giri, e mai su un campione astratto: ogni verde montato sullo stesso frammento di interfaccia. Il chartreuse cade troppo vicino al bianco del testo, ed è irreparabile. La menta legge «wellness», non «prodotto». Il verde chiaro sparisce nella barra di navigazione, che è il posto dove deve funzionare per forza. Resta un verde medio, abbastanza freddo da non litigare con gli incarnati nelle anteprime dei video.

Poi una regola sola, che tiene insieme tutto il resto: l’accento marca solo stato o azione, cioè attivo, livello, azione primaria. Mai decorazione. Da lì discende anche il rosso, un rosso desaturato caldo che resta nella stessa famiglia e si usa soltanto per le azioni che distruggono.

La stessa regola ha deciso il segno della verificata. Il verde pieno vuol dire «questo si tocca», ma una verificata non è un’azione, è una fiducia che c’è già. Su cinque involucri confrontati alla misura vera, 15 pixel accanto al nome, il disco pieno competeva con i pulsanti, il contorno spariva, la spunta nuda non si leggeva. Ha vinto il disco smorzato: si distingue dalle azioni proprio perché è più quieto.

I verdi confrontati in contesto
Da sinistra i tre scartati, poi quello scelto. Guarda la riga della navigazione e non il campione grande: è lì che il verde chiaro si perde.
Cinque involucri per la spunta della verificata
Sopra il segno ingrandito, sotto la misura in cui vive davvero. L’ultimo a destra è quello scelto.
07

La verifica misurata

Alla fine ho controllato tutte e trenta le schermate in automatico invece che a occhio: contrasto di ogni testo calcolato ricostruendo cosa ha dietro, area di tocco di ogni elemento premibile, immagini rotte, destinazioni morte.

Il controllo ha trovato quattro problemi: due voci delle Impostazioni scambiate, chip larghi 36 pixel rispetto alla soglia di 44 × 44 che avevo scelto, una maniglia alta quattro pixel e cinque schede che usavano la stessa foto per video diversi. Ho corretto bersagli e collegamenti e reso coerente il catalogo.

Da lì è uscita la regola che mi porto dietro: in un prototipo il catalogo è un dato, e va verificato come tale. Una foto, un video, ovunque compaia.

Bersagli di tocco e contrasti misurati
Il tratteggio è l’area da toccare, non il segno che si vede: si allarga il bersaglio senza ingrossare il disegno. Sotto, lo stesso testo prima e dopo il grigio corretto.
08

Cosa ho tagliato

La striscia «In evidenza». Era la mia curatela a mano, e mi piaceva. L’ho tolta perché era arbitraria: scegliere io i video buoni non è una struttura, è un gusto, e la struttura c’era già.

Il suggerimento automatico del livello. Nel flusso di caricamento c’era un chip che diceva «sembra L2». Nel pilota quel modello non esiste, e mostrarlo attivo sarebbe stato raccontare una funzione che non c’è. È rimasto nel case study come funzione da costruire, non nell’app.

I marcatori obbligatori. Segnare i pezzi della combo è la cosa più utile dell’app, ed è la risposta diretta alla prima delle due frasi qui sopra: se chi insegna non capisce un passaggio, il passaggio va segnato. Proprio per questo li avevo messi obbligatori. Ma la barriera d’ingresso era già di quattro campi, quindi sono diventati facoltativi, con uno schermo dedicato che si può saltare.

Lo schermo dei marcatori, quello che si può saltare. La funzione più utile dell’app è anche quella che non si può imporre a chi sta caricando il suo primo video.
09

Dove sono ora

Trenta schermate collegate, quattro flussi navigabili, un prototipo che si tocca da qualunque telefono. Il passo dopo è una palestra pilota: le persone con cui mi alleno caricano i video veri, e si vede se il livello dichiarato tiene quando a dichiararlo non sono io.

Il rischio numero uno resta la densità. Due attrezzi per quattro livelli fanno otto caselle, e con una palestra sola alcune resteranno semi vuote per mesi. Per questo la schermata vuota dice la verità invece di nasconderla.

Lo splash, l’unico posto dell’app dove il simbolo compare. Dura meno di un secondo, e poi comincia la palestra.

Il prototipo

È ancora lì.

Trenta schermate, quattro flussi, 152 punti da toccare.

Apri il prototipo

volee-prototipo.netlify.app

Avanti
Avanti

Portarle in vita