Questo post parla della nostra precedente & ormai dismessa app per la corsa.
Come è nata Gyroscope Running
Nome in codice Quicksilver: la nostra prima app per iPhone in React Native
Abbiamo appena pubblicato una nuova app sperimentale per iPhone, che si chiama Running by Gyroscope. Ti permette di creare immagini bellissime per condividere la tua ultima corsa. Questa è la storia di come abbiamo progettato l’app, degli strumenti che abbiamo usato per costruirla e di quello che abbiamo imparato strada facendo.
L’app funziona grazie a due delle nostre integrazioni più usate, Runkeeper e Strava. Fanno un lavoro fantastico nel registrare la tua attività. Dopo una corsa, Gyroscope sincronizza in automatico i dati grezzi. Poi tocca a te divertirti e scegliere la storia che vuoi raccontare.
Una mappa satellitare del tuo percorso panoramico? Magari la foto che hai scattato al tramonto che ti ha tolto il fiato? Oppure il fatto che equivaleva a 7 ciambelle? Forse avevi il battito cardiaco altissimo e vuoi mettere in evidenza quello. La scelta è tua.
Capitolo 1
Marzo 2015
Avevamo appena lanciato il sito di Gyroscope. Il sistema funzionava benissimo. Le mie corse si sincronizzavano all’istante e comparivano su aprilzero.com, con tutti i miei numeri e perfino con informazioni come la musica che avevo ascoltato su Spotify.
Avevamo costruito una dashboard bellissima, ma l’unico modo di condividerla era mandare a qualcuno l’intera pagina.
Le nostre sfide successive erano il mobile e la condivisione.
Un pomeriggio di marzo sono andato a correre su per Twin Peaks. Era una giornata limpida e bellissima, con tutti e due i ponti visibili in lontananza.
Mentre guardavo la città dall’alto, volevo un modo per condividere quel momento. Avevo registrato e misurato tutto: il dislivello, il battito cardiaco, il percorso che avevo fatto per arrivare lassù, la musica che stavo ascoltando e quello che vedevo (con una foto), ma non c’era modo di rimettere insieme tutto questo nella mia esperienza.
Mi sono immaginato una vista in realtà aumentata del mio percorso su per la collina. Mi è venuta in mente l’idea di una card da condividere, con i miei parametri vitali e la posizione sovrapposti alla foto che avevo scattato. Tutte quelle informazioni erano già dentro Gyroscope: bastava progettarle come si deve.
Ho deciso che ne sarebbe uscita una bella foto per Instagram e sono tornato a casa di corsa, con la voglia di provarci.
Capitolo 2
Fingi finché non ce la fai
Appena arrivato a casa ho aperto Photoshop e ci ho trascinato dentro alcune delle foto che avevo scattato. Ho aggiunto i dati della mappa della mia corsa e li ho uniti a qualche numero per creare un’infografica semplice. Un giorno magari avremo un bel sistema automatico, ma per ora era più veloce farla da zero.
Ho messo i dati principali, come la città e la distanza, in un angolo. Ho preso il colore del testo (un verde acqua) dalla foto e ho aggiunto un segnaposto nel punto in cui l’avevo scattata. Qualche ora dopo, la foto che avevo pubblicato stava ricevendo un sacco di like. La gente chiedeva come l’avessi fatta.
Ho deciso di andare avanti con l’esperimento, creando a mano un’immagine dopo ogni corsa e provando design nuovi.
Nelle settimane successive ho continuato a creare immagini nuove da condividere dopo ogni corsa. Ho giocato con stili di mappa diversi e ho aggiunto dettagli come la musica, il meteo o il battito cardiaco. Questi piccoli tocchi davano più profondità e più dimensioni alla corsa, e alla gente sembrava piacere.
Ho iniziato ad aspettare con piacere l’esercizio creativo di comporre e condividere una card dopo ogni corsa. Insieme alle endorfine, è diventata una cosa piuttosto dipendente. C’erano tanti livelli nuovi di creatività e di racconto: scorrere le foto che avevo scattato, guardare viste diverse del percorso sulla mappa, scegliere dei bei colori di accento e così via.
Metteva insieme un po’ delle mie cose preferite: la fotografia, la corsa e l’attirare attenzione.
C’era qualcosa, nell’aggiungere qualche numero e un logo alla foto, che la trasformava: da semplice foto diventava grafica, o perfino arte. La composizione e la forma di tutti gli elementi potevano lavorare insieme e creare qualcosa di molto più grande della somma delle parti.
Anche in viaggio mi piaceva lavorarci. Le card erano un bel modo per fissare i posti che visitavo, una specie di cartolina.
Accendere e spegnere dati come la musica o le mappe raccontava una storia diversa a partire dallo stesso contenuto. Per esempio, su una corsa più intensa potevo aggiungere il battito cardiaco. Se era una giornata molto calda o molto fredda, il meteo diventava un dato interessante. Se c’era un bel tramonto o un bel panorama, di solito ne usciva un ottimo sfondo. Se il territorio era interessante, una vista satellitare lo metteva in risalto.
Dopo qualche mese di esperimenti ho capito che ne sarebbe potuto uscire un prodotto davvero notevole. Lo volevo per me, e anche molti altri avevano detto che gli sarebbe piaciuto usarlo.
Ho iniziato a buttare giù qualche concept e a condensare i miei esperimenti in un paio dei layout migliori.
Capitolo 3
Progettare l’app
Quando inizio un nuovo progetto mi piace elencare gli obiettivi. Scegliere gli obiettivi giusti spesso conta di più, ed è più difficile, che far venire belle le cose. Per Quicksilver c’erano alcuni principi guida che per me erano importanti. Avrebbero definito ogni pixel e ogni riga di codice che avremmo scritto.
- Ricevere più like possibile
- Vedere all’istante la tua ultima corsa
- Rendere divertente la personalizzazione
Progettare per il massimo coinvolgimento
Per ricevere più like possibile ci servivano il tocco visivo, il fuoco e il contesto giusti perché la cosa parlasse anche agli altri. Capire chi era il nostro pubblico, il pubblico generale e non solo altri atleti, ha dato forma a tante scelte ed è stata una bella differenza rispetto a quello che facevano tutti gli altri.
Quasi tutte le app avevano numeri dettagliati per aiutarti a migliorare la performance. Ma per un amico che non corre quelle informazioni sono molto meno emozionanti. Probabilmente preferirebbe di gran lunga vedere che equivaleva a 5 ciambelle e farti un pollice in su. O magari una bella foto dalla cima della montagna che hai scalato con tanta fatica.
Abbiamo provato a costruire ogni layout come un marchio a sé, con un nome e un’icona propri. Era la funzione centrale dell’app e doveva essere intuitiva e divertente da usare.
Dopo aver provato qualche idea diversa, siamo arrivati ai layout messi in una lunga lista in basso. Sfogliare i vari layout e sceglierne uno dava una bella soddisfazione.
Sembravano i filtri di Instagram per la corsa
La schermata di avvio
Visto che la fotografia e i contenuti delle persone erano una parte importante dell’app, volevo che si vedesse fin dal primo momento in cui la aprivi.
Ho iniziato a cercare qualche bella foto da usare come sfondo. Il mio amico Adam, uno dei fotografi più bravi che conosco, ci ha gentilmente lasciato usare uno dei suoi scatti dal Mt. Tam.
Appena l’ho messa nell’app me ne sono innamorato all’istante. Era esattamente la sensazione di calma e di natura che dava il tono giusto a tutto il resto dell’app.
Un’app a sé
Una delle scelte di design più grosse è stata farne un’app separata, dedicata alla corsa. Volevo vedere la parola “Running” sulla mia schermata home e arrivare ai miei contenuti all’istante.
Man mano che in futuro avremmo aggiunto altre attività, come il ciclismo o il nuoto, ognuno avrebbe potuto installare solo quelle che gli interessavano. Volevo evitare di riempire tutto e di seppellire le cose sotto livelli di navigazione.
Il feed delle attività
Quasi tutte le altre app per la corsa devono mettere in primo piano la registrazione, ma noi non ce l’avevamo, quindi potevamo far sì che il contenuto restasse il re. Tutto il resto, a parte le corse recenti, sarebbe finito in una barra laterale.
Abbiamo giocato con stili e metafore diverse per ogni corsa. Potevano essere card impilate, o un mucchio di riquadri. Dopo aver provato vari livelli di densità di informazione, quelli più grandi occupavano troppo spazio. Dopo qualche minuto di uso dell’app ho capito che ero troppo dentro al dettaglio e non avevo la visione d’insieme che volevo. La vista sul sito funzionava piuttosto bene, così alla fine abbiamo riusato quelle stesse barre, colorate in base al ritmo.
Ho provato a mettere la corsa più veloce & quella più lunga nell’intestazione, così sarebbero state sempre a portata di mano senza dover scorrere. Sarebbe stata una sfida amichevole: ogni volta che aprivo l’app avevo l’occasione di battere il mio record. E se qualcuno correva una maratona o faceva qualcosa di davvero notevole, l’avrebbe sempre avuto lì a portata di mano.
Il contatore dell’età che saliva di continuo sul sito era una funzione molto amata, quindi qui abbiamo aggiunto un timer simile per segnare il tempo passato dall’ultima corsa. Man mano che quel numero cresceva, si spera che la gente si sentisse più motivata.
Capitolo 4
Il contatore delle ciambelle
Quest’estate lavoravamo dagli uffici di True Ventures a San Francisco. Un giorno qualcuno ha portato un paio di scatole di ciambelle. Dopo pranzo qualcuno, Phil Black se ricordo bene, le ha tagliate in otto e ha detto che non contava se ne mangiavi solo un pezzettino. Pur sapendo che scientificamente non era vero, ho iniziato ad assaggiare i vari gusti.
Mentre stavo lì, a lavorare a un’app per la corsa mangiando un quarto di ciambella glassata al latticello, mi è venuta la curiosità di sapere quanto avrei dovuto correre quella sera per annullare lo spuntino. Dopo qualche ricerca ho scoperto che una ciambella generica fa circa 200 calorie, e che le calorie di una corsa sono all’incirca (peso × 0,75 × distanza).
Le corse senza dati di mappa, per esempio sul tapis roulant o registrate con Fitbit, ci stavano dando parecchi grattacapi. L’app si appoggiava alle mappe per tutte le viste, ma ci serviva un’alternativa più flessibile.
Mentre stavo lì a fare i conti per le mie varie corse, ho capito 2 cose: non avevo idea di quante ciambelle valessero quasi tutte le mie corse, ed era piuttosto divertente scoprirlo.
E così è nato il contatore delle ciambelle.
Facevamo qualche conto per arrivare a un numero approssimativo di ciambelle, che fosse una corsa breve da 1 sola ciambella o una lunghissima. Ho passato il resto della giornata a cercare foto stock di belle ciambelle in vari numeri, da 1 a 6.
Capitolo 5
I test in beta
Appena abbiamo avuto una versione base funzionante dell’app, ho mandato qualche invito ai migliori corridori del sito, persone con oltre cento corse registrate. Sono rimasto sbalordito e colpito nel vedere che parecchie avevano accumulato migliaia di corse nel proprio account.
A me piaceva correre, ma ero lontanissimo dal loro livello. I loro commenti e i loro suggerimenti sarebbero stati quello che ci serviva per farne un gran prodotto.
All’inizio mandavo email a mano. Le persone rispondevano con bug o suggerimenti e io cercavo di tenere il conto di quello che diceva ognuno.
Poi qualcuno ha proposto di aprire un gruppo su Facebook, una cosa che aveva già fatto per altre beta e che aveva trovato molto utile. Ho creato un gruppo privato e ho mandato il link ad alcuni dei nostri tester migliori. Col tempo è cresciuto fino a oltre cento persone, molte delle quali correvano ogni giorno e usavano l’app.
Non solo ci sono arrivate un mucchio di segnalazioni di bug e di proposte: qualcuno ha perfino iniziato a disegnare i mockup delle cose che voleva.
Potevamo pensare a nuove funzioni, rilasciarle a tutto il gruppo e vederle subito con contenuti veri.
Capitolo 6
Strumenti & trucchi
Da Gyroscope abbiamo un gran bel team che ha lavorato tantissimo per far esistere questa app (grazie Mahdi, Eric, Robbie!), ma abbiamo avuto anche molto aiuto da fuori. Ecco un po’ di risorse e prodotti che ci sono stati preziosissimi e ci hanno fatto risparmiare un sacco di tempo di sviluppo.
React Native
Venendo dal mondo web, usare Javascript e un sistema di layout in stile CSS/Flexbox è stato molto intuitivo. Avevo già progettato app per iPhone, ma non ne avevo mai scritto davvero il codice. Se React Native non fosse esistito, avrei dovuto aspettare che qualcun altro si occupasse dello sviluppo. Un progetto parallelo come questo probabilmente non sarebbe mai partito.
Brent Vatne, che è stato uno dei nostri primi beta tester, contribuiva anche a React Native e ci ha aiutato tantissimo quando ci bloccavamo o avevamo domande a cui la documentazione non rispondeva ancora. Grazie Brent!
Da quando abbiamo iniziato, React è migliorato parecchio. Ogni nuova versione, dalla 0.3 circa fino alla 0.12 di quando abbiamo lanciato, ha migliorato le prestazioni e risolto problemi con cui avevamo a che fare.
C’è ancora da lavorarci (vorrei che le animazioni andassero meglio) ma sta migliorando molto in fretta. Almeno per la nostra applicazione, che è molto semplice, ha fatto il suo lavoro e ci ha permesso di andare molto più veloci di quanto avremmo potuto altrimenti.
Il live reload via rete di React Native ci ha permesso di provare idee nuove in fretta o di fare micro aggiustamenti in pochi minuti. Ora non riesco più a immaginare di dover ricompilare e aspettare per vedere una modifica.
Mapbox
Mapbox fa strumenti di mappatura straordinari che usiamo in tutto il nostro sito. Il loro editor permette di personalizzare stile e colore. Lo abbiamo usato per creare stili diversi, tra cui questo set di tile scuro e minimale.
All’inizio abbiamo provato la loro implementazione iOS GL, ma abbiamo capito che in realtà non volevamo che le persone potessero spostarsi o zoomare sulla mappa. Per tenere le cose semplici abbiamo deciso di riusare la nostra implementazione web dentro una webview, così abbiamo potuto tenere il codice su cui avevamo già passato mesi a testare e migliorare.
Imgix
Una delle particolarità della nostra app è la personalizzazione dello stile della card in base alla foto. Imgix ci aiuta ad analizzare la palette dei colori, così possiamo impostare il testo e gli altri elementi su colori abbinati e complementari.
Usiamo Imgix anche per effetti speciali, come migliorare o sfocare l’immagine. Usare una soluzione in cloud per le foto vuol dire un po’ di tempo di preparazione iniziale, perché l’utente deve caricare la foto invece di fare tutto in locale sul telefono, e a volte serve un minuto per caricarla e poi riscaricare la foto elaborata, ma il compromesso valeva il tempo che ci fa risparmiare e le funzioni in più che ci dà.
Fabric di Twitter
Abbiamo iniziato a usare Fabric/Crashlytics per tenere traccia dei crash. Ai primi tempi la nostra app crashava spesso. Col tempo li abbiamo risolti tutti, ma mi ritrovavo comunque a usare la dashboard per guardare i dati di utilizzo.
Avevo in programma di configurare un sistema di analytics, ma è venuto fuori che quasi tutto quello che ci serviva era già dentro questa dashboard. La cosa che mi piaceva di più era vedere gli utenti attivi in quel momento, ma anche altri numeri come gli utenti attivi mensili (MAU), il rapporto DAU/MAU e i tassi di ritorno erano molto istruttivi.
Man mano che cambiavamo l’app durante la beta, vedevamo davvero cambiare il tempo per sessione, i tassi di ritorno e così via. Aggiungere le notifiche push con Parse ha migliorato molto il coinvolgimento e ha fatto tornare le persone al momento giusto.
Parse
Nelle prime versioni dell’app le persone dovevano aprirla a mano per vedere se l’ultima corsa era stata caricata. Da quando abbiamo iniziato a usare Parse per mandare una notifica push a ogni nuova corsa, i tassi di ritorno sono saliti tantissimo.
Capitolo 7
77 ciambelle
Un giorno stavo scorrendo le nostre menzioni su Instagram. C’erano qualche foto di tramonti, e poi ho visto una persona che sembrava aver fatto una corsa da 77 ciambelle.
Di sicuro c’era un bug nei miei calcoli delle calorie, o qualcuno aveva caricato dati falsi. Magari un giro in bici era stato segnato per sbaglio come una corsa?
Ho cliccato e ho cercato su Google la “Fat Dog” che Nate aveva citato. A quanto pare era una ultramaratona di 120 miglia in Canada, considerata una delle più dure al mondo. Wow!
Ho condiviso il suo post con il nostro gruppo di beta tester. Vedere quella corsa pazzesca di Nate mi ha fatto venire voglia di un modo per mettere in mostra le corse speciali sotto gli occhi di tutti.
Abbiamo aggiunto un paio di cose nella barra laterale dell’app: un feed delle corse in evidenza e un elenco degli amici che avevano corso da poco.
Il record di Nate è ancora imbattuto: 77 resta il numero più alto di ciambelle mai registrato su Gyroscope. Da quando ho iniziato questo progetto, però, ho imparato a non sottovalutare mai le persone. La prossima versione supporterà i numeri a tre cifre, non si sa mai.
Capitolo 11
E adesso?
Abbiamo pubblicato questa app sull’App Store & tante persone la usano per registrare e condividere la propria vita.
Tatiana ha perso quasi 40 libbre registrando tutti i suoi passi e condividendoli.
Dan Grant va in bici in giro per l’Inghilterra per recuperare e restare in salute dopo un infarto.
Abbiamo preso quello che abbiamo imparato con Running & lo abbiamo usato per costruire la nuova app Gyroscope, quella che racconta tutta la storia della tua vita. Anche questa è in React Native: puoi leggere come l’abbiamo costruita oppure scaricare l’app dall’App Store.