Come abbiamo costruito l’app Gyroscope con React Native
Come ho perso 20 libbre mentre costruivamo la nostra app per iPhone
Poco tempo fa abbiamo rilasciato la nostra nuova app per iPhone, Health Tracking by Gyroscope. L’app sincronizza i tuoi dati HealthKit con Gyroscope e ti dà una dashboard per tenere sotto controllo tutto quello che riguarda la tua vita.
Mentre provavamo e miglioravamo la nuova app, io ho perso più di 20 libbre. Registravo e sincronizzavo tutti i miei dati da oltre due anni, ma solo avendo una vista in tempo reale sono riuscito a cambiare il mio comportamento e a diventare più sano ogni giorno: il sogno del quantified self.
Il nostro obiettivo era costruire un’app che aiutasse le persone a usare i loro dati per raggiungere obiettivi concreti: perdere peso, essere più produttivi, condividere i momenti importanti.
Nessuno aveva ancora fatto un’app capace di centrare obiettivi così ambiziosi, ma in altre esperienze esistevano già ottimi elementi di design che ci hanno dato un buon punto di partenza.
Ispirazioni
Il Feltron Annual Report
Per dieci anni Nicholas Felton ha prodotto un bellissimo report annuale della sua vita. I dati venivano registrati con cura per tutto l’anno e poi analizzati e progettati intorno a vari temi. Puoi vedere gli anni precedenti su feltron.com o all’SF MOMA.
Quei report erano una finestra affascinante sulla vita di un’altra persona. Noi avevamo tanti dati simili che arrivavano in automatico ogni giorno, ed ero curiosissimo di vedere che tipo di report potevo ottenere su me stesso, sia per divertimento sia per trovare schemi utili e migliorare la mia salute.
Le analisi del web
Per lavoro ci sono un mucchio di dashboard e servizi su cui conto ogni giorno. Qualsiasi cosa sia critica o produca soldi ha probabilmente decine di aziende che costruiscono dashboard per aiutarti a capirla e a ottimizzarla.
Tutti i nostri server sono monitorati bene, per essere sicuri che facciano quello che devono e per avvisarci subito se qualcosa va storto. Un giorno, in un futuro non troppo lontano, dashboard simili esisteranno anche per il tuo corpo.
Altri strumenti di analisi come Google Analytics e Fabric ci aiutano a capire il traffico e altre metriche complesse. Numeri grandi, sparkline, valori anomali evidenziati e altri elementi di design rendono facile leggere in fretta grandi quantità di dati.
I videogiochi
I videogiochi usano le statistiche in modo più divertente, e spesso hanno un personaggio virtuale con attributi come livelli, salute e punti esperienza.
Presentato nel modo giusto, è un modo divertente e immediato per capire come stai andando e per concentrarti sulle cose giuste: resta vivo, sali di livello, usa una pozione e così via.
Le persone passano centinaia di ore a migliorare quei numeri virtuali, ma per la vita reale non esiste niente di simile. Per ora…
Nome in codice: Magneto
Tutti i nostri progetti hanno nomi in codice presi dagli X-Men, e questa app è stata battezzata “Magneto”.
All’inizio del 2015 Facebook ha rilasciato una tecnologia nuova e interessante, React Native. Eric era un grande fan di React e ha iniziato a sperimentare con un progetto React Native di base, prendendo dati in tempo reale dalle nostre API e mostrandoli su una schermata.
Anche se l’app girava tramite XCode, il codice dell’applicazione era quasi tutto JavaScript che potevo modificare in Sublime Text o in qualsiasi altro editor di testo. Nel giro di poche ore riuscivo a modificare gli elementi della pagina e a dargli uno stile con una sintassi simile a Flexbox e ai CSS. Era magia.
Dispositivi indossabili
Più o meno nello stesso periodo è uscito l’Apple Watch e intorno a lui c’era tanto entusiasmo e tanta confusione. Si parlava soprattutto delle app e delle notifiche sul Watch, ma noi eravamo entusiasti soprattutto delle funzioni per la salute.
Da quando ho iniziato a portarlo, misurava il mio battito e i miei passi in background. Volevo unirli agli altri dati che erano una parte importante della mia salute: il peso e il grasso corporeo dalla bilancia Fitbit, la musica che ascoltavo su Spotify, quanto tempo passavo a lavorare ogni giorno.
L’app Salute era installata sul telefono di tutti e misurava qualche dato di base, come i passi. C’erano alcune cose semplici che volevo poter fare e che con l’app Salute erano impossibili o molto complicate.
- Vedere il grafico del battito di un allenamento recente
- Vedere una panoramica dei dati di oggi senza scorrere e senza cliccare
- Vedere facilmente cosa ho fatto ieri, e non solo oggi
Mahdi, che era uno dei nostri primi utenti e si era appena unito al team come ingegnere a tempo pieno, ha iniziato a lavorare su questa sincronizzazione con HealthKit in Objective-C.
L’app per la corsa
Mentre Mahdi costruiva la sincronizzazione con HealthKit, io ho iniziato a lavorare a un’altra app semplice che ti permetteva di personalizzare e condividere le tue corse con filtri e layout diversi.
Quando abbiamo rilasciato quell’app per la corsa, migliaia di persone hanno iniziato a usarla per pubblicare immagini creative dei loro allenamenti. Molti altri però si lamentavano perché non erano corridori e non potevano godersi le mappe dei loro allenamenti o vedere quante ciambelle di calorie avevano bruciato.
Dovevamo capire come portare quella stessa creatività e quella stessa motivazione a tutti gli utenti di Gyroscope, non solo agli atleti. La nostra risposta è stata costruire esperienze simili per le cose che fanno tutti: la musica, il battito, il sonno, l’attività al computer, i passi, i viaggi e così via.
Alcuni primi mockup dell’app
Abbiamo iniziato a disegnare qualche dashboard per mobile per condensare tutte le informazioni dentro l’app. Per i dettagli abbiamo deciso di rendere ogni cosa una card quadrata, con sotto una serie di opzioni da personalizzare.
Anche la condivisione è diventata più visibile, in fondo alla pagina, perché una parte importante dell’esperienza sarebbe stata pubblicare i tuoi risultati migliori su Instagram o condividerli con gli amici.
Siccome queste viste dipendevano tantissimo dai dati, i primi mockup erano solo un punto di partenza approssimativo. Quasi tutto il design finale è stato messo a punto con l’app vera, sopra dati e grafici reali che arrivavano dai nostri server.
I report settimanali
Le card giornaliere si concentravano su un solo dato, mentre i report settimanali avevano molte più informazioni e potevano dare una panoramica ed evidenziare gli schemi.
Intanto, sul sito…
Con le nuove funzioni come l’integrazione con Fitbit e la sincronizzazione con HealthKit arrivavano tanti dati nuovi sulla salute, battito, passi, pressione, percentuale di grasso corporeo, mentre il sito originale era più concentrato sui luoghi e sulle foto. Dovevamo migliorare l’esperienza web per far leggere facilmente questi nuovi dati, e abbiamo iniziato a lavorare a un nuovo tema per il profilo con uno dei miei designer preferiti, Shane Mielke.
Questo nuovo tema doveva essere una dashboard più seria di tutti i tuoi numeri, e Shane ha fatto una dozzina di mockup prima che ci innamorassimo di questo.
Uno dei momenti di svolta è stato dividere i contenuti in sezioni intuitive, seguendo le parti del corpo umano. All’inizio non ero sicuro che la metafora funzionasse, ma sembrava calzare bene con tutti i dati che avevamo e ci lasciava spazio per crescere.
Con un rendering 3D del corpo umano (Shane ha fatto una versione maschile e una femminile) potevamo usare il corpo come struttura di navigazione ed evidenziare ogni sezione quando veniva aperta.
I dati sulla salute mentale come sonno, produttività e tempo al computer sarebbero finiti nella sezione del cervello. In futuro potevamo aggiungerci cose come l’umore o la meditazione.
I dati cardiovascolari come battito e pressione sarebbero stati organizzati nella zona del petto, mentre le attività fisiche come passi, corsa e altri allenamenti potevano stare intorno alle gambe.
Ogni sezione era un concetto importante che si poteva riempire di dettagli più avanti. Per esempio, se un giorno avessimo aggiunto il monitoraggio del cibo, sarebbe finito nella zona centrale senza dover ridisegnare tutto.
La struttura dei dati ha funzionato sorprendentemente bene, così abbiamo deciso di portarla anche nell’app. Io e Shane abbiamo iniziato a giocare con la schermata principale su mobile, incastrando nello schermo alcune card per ogni sezione.
Fino a quel momento quasi tutti questi mockup erano fatti con dati ipotetici. Quasi tutti avevano un titolo grande e leggibile e una grafica che mostrava i dettagli dei dati. Il passo successivo era costruirlo davvero e vedere quanto fosse utile nella vita reale, con i miei dati veri.
Colori in base allo stato
L’obiettivo di questa dashboard era rendere facilissimo capire con un’occhiata le informazioni che contano. Numeri grandi e card colorate danno subito l’idea se una sezione oggi è “a posto”.
Per esempio, se i passi erano meno di qualche migliaio, la card del fitness diventava rossa o arancione per ricordarti di muoverti di più. Se avevi raggiunto l’obiettivo o eri appena tornato dalla palestra, diventava verde e potevi pensare ad altro. Far diventare verde una singola sezione non è difficilissimo, la sfida è trovare il giusto equilibrio tra tutte le sezioni.
La schermata di avvio
Per la prima schermata di avvio volevo qualcosa di futuristico ma comunque umano. Avevo scattato questa foto in Giappone un paio di anni prima e mi sembrava avere l’emozione giusta.
Ci ho messo sopra il logo di Gyroscope e un po’ di testo, ed eccoci con la nostra prima schermata di login.
La beta
Verso metà settembre avevamo un prototipo funzionante dell’app che le persone potevano iniziare a usare. L’avevamo provato su di noi, ma la sfida vera era renderlo utile allo stesso modo per milioni di persone in giro per il mondo, e non solo cucito addosso a noi.
Abbiamo deciso di mandarlo a qualche amico e ad alcuni utenti Pro, come inizio del nostro programma beta. Abbiamo anche aperto un gruppo Facebook per pubblicare gli annunci e raccogliere facilmente i riscontri.
A ogni aggiornamento che pubblicavamo, gli utenti ci scrivevano e ci aiutavano a trovare i bug in fretta. Tutto questo succedeva nel giro di ore o di minuti, e ci permetteva di iterare velocemente. Trattandosi di una beta privata, potevamo rilasciare nuove versioni quasi all’istante, senza aspettare la revisione dell’App Store.
Fino a quel momento avevamo progettato basandoci sulle nostre intuizioni e sui riscontri di poche persone, ma ora potevamo usare più dati e più opinioni degli utenti per decidere.
Sentire le esperienze dei nostri primi beta tester è stato entusiasmante.
“Gyroscope è l’unico prodotto che rende semplice tenere traccia della mia vita. Con un’occhiata capisco in cosa vado forte e su cosa devo lavorare. Non passa un giorno senza che apra l’app.”
– Brandon Littell
Il test è stato molto più collaborativo del semplice trovare crash e bug. Tante persone avevano richieste e suggerimenti che ci hanno aiutato a concentrarci sulle funzioni che sarebbero state usate davvero.
La mappa della tua vita
Uno dei dati più affascinanti che abbiamo è la posizione, registrata con Swarm o con Moves. Anche la corsa, la bici e altre attività riempiono la mappa di altri punti.
Ci piaceva molto usare Mapbox sul nostro sito e abbiamo deciso di adottare la stessa tecnologia per le mappe nell’app. All’inizio abbiamo provato mappe con zoom e spostamento, ma abbiamo deciso in fretta di semplificare e usarle come sfondo statico. Ci saremmo occupati noi dei calcoli, cercando lo zoom e la composizione migliori per far vedere tutto quello che conta.
Chi usava Moves per registrare i propri spostamenti poteva vedere una mappa di calore di tutti i posti dove era stato e come aveva diviso il suo tempo. Dal punto di vista della salute è interessante vedere quanto tempo si passa camminando rispetto a quanto se ne passa in auto. Io ho iniziato a uscire prima e a raggiungere a piedi più riunioni.
Alcune viste davano spunti sul fitness, altre servivano più a capire i viaggi o che tipo di ristoranti si frequentavano.
Le notifiche push
Uno dei modi in cui potevamo rendere più semplice la vita delle persone era mandare ogni giorno una notifica push con qualche spunto.
Abbiamo discusso e testato parecchio l’orario e le parole del messaggio. All’inizio volevo mandarlo a fine giornata, come riepilogo. Solo che a volte i dati ci mettevano un po’ ad arrivare e si rischiava di raccontare numeri incompleti. Abbiamo scelto le 9 del mattino dopo.
La nostra priorità è rendere più semplice la vita dell’utente, anche a costo di guadagnare meno o di non centrare le metriche che ci eravamo posti. Invece di qualcosa di misterioso che costringesse ad aprire l’app, abbiamo messo dentro tutte le informazioni utili, così le persone ne ricavano valore anche senza aprirla.
“Ho iniziato a usare Gyroscope parecchio tempo fa, ma è diventato importante per me solo quando è nata mia figlia. Adoro come sono organizzati i miei dati per restare in forma e il livello di dettaglio che ricevo. Senza contare che ho sempre la sensazione che qualcosa stia migliorando nella mia esperienza. Al team importa davvero dei suoi utenti.
Oltre ad avere una panoramica della mia salute in generale, tengo d’occhio anche quanto sto bene mentalmente, guardando il mio livello di produttività. Lavoro in media 38–42 ore a settimana su Iris (la mia startup) e sono mamma a tempo pieno. Gyroscope mi ha aiutato a gestire quelle ore di lavoro per trovare un “equilibrio” solido e gliene sono grata. Il risultato? Una produttività altissima. Prima 40 ore di lavoro se ne andavano in cose inutili. Adesso? Con una neonata non sai mai come andrà la giornata, quindi sfrutto davvero al massimo il mio tempo…”
– Cat Noone
I report mensili
Una volta al mese arrivava un nuovo report mensile e volevamo usare quel momento per rivedere i progressi e ragionare un po’ di più su noi stessi. C’erano alcune domande semplici a cui speravamo di rispondere con questi dati.
Ti sei mosso abbastanza?
Hai dormito abbastanza?
Quanto sei stato produttivo?
“Da studente universitario, tenere un buon equilibrio è la chiave del successo. Gyroscope mi aiuta a vedere i dati della mia vita, così posso bilanciare sonno, attività fisica e produttività. Visualizzazioni bellissime e un’app utilissima!”
– Victoria Spiegel
Perdere peso
Da quando avevo iniziato Gyroscope, più di un anno prima, avevo messo su parecchio peso. Non era un gran mistero: la somma di stress, poco sonno e tante nottate passate a lavorare e a sgranocchiare annullava e superava il poco esercizio che facevo.
Uno dei miei obiettivi con l’app era che mi aiutasse a perdere peso. Ogni mattina salgo sulla mia bilancia Fitbit Aria per vedere peso e grasso corporeo.
Durante la giornata, Gyroscope me li ricordava. Ho costruito qualche layout per tenermi onesto e per mostrare il mio storico recente nel contesto. La chiave era accorgersene subito e correggere il tiro.
Fino a quel momento era facile togliermelo dalla testa fino al report settimanale o alle rare volte in cui aprivo il sito. Nel frattempo potevo prendere un sacco di decisioni poco sane, chiamare un Uber invece di andare a piedi, ordinare un dolce o un biscotto in più con il caffè, e tutto questo si sommava nel tempo. Averlo sempre presente mi ha aiutato a resistere alla voglia di dolci ogni giorno.
Sei mesi dopo, mentre l’app stava per uscire, ho scoperto con piacere di aver perso circa 20 libbre e il 5% di grasso corporeo. Non avevo fatto niente di molto diverso, ma una serie di piccoli cambiamenti e di scelte quotidiane mi aveva reso molto più in salute. I miei passi erano di più, perché cercavo di andare ovunque a piedi, e ogni volta che aprivo l’app e vedevo i progressi ero più motivato a non fermarmi.
Molti altri nostri beta tester hanno storie simili. Anche se vogliamo ancora aggiungere e migliorare tante cose, l’abbiamo pubblicata sull’App Store perché tutti possano iniziare a usare l’app per migliorare la propria vita.