De Gyroscope-app bouwen met React Native
Hoe ik 20 pond afviel terwijl ik onze iPhone-app bouwde
We hebben onlangs onze nieuwe iPhone-app uitgebracht, Health Tracking by Gyroscope. De app synchroniseert je HealthKit-data naar Gyroscope en geeft je een dashboard waarmee je alles over je leven bijhoudt.
Terwijl we de nieuwe app testten en verbeterden, viel ik ruim 20 pond af. Ik hield mijn data al meer dan twee jaar bij en synchroniseerde alles, maar pas toen ik mijn data in realtime kon zien, lukte het me om mijn gedrag te veranderen en elke dag gezonder te worden. De droom van de quantified self.
Ons doel was een app bouwen die mensen hielp hun data te gebruiken voor praktische doelen: afvallen, productiever zijn en belangrijke momenten delen.
Niemand had een app gemaakt die die ambitieuze doelen haalde, maar er bestonden al mooie ontwerpelementen in andere producten die ons een goed vertrekpunt gaven.
Inspiratie
Het Feltron Annual Report
Nicholas Felton maakte de afgelopen 10 jaar een prachtig jaarverslag van zijn leven. Hij hield zijn data het hele jaar nauwgezet bij en analyseerde en vormgaf die daarna rond verschillende onderwerpen. De eerdere jaren kun je zien op feltron.com of in het SF MOMA.
De rapporten waren een fascinerend kijkje in andermans leven. Wij hadden veel vergelijkbare data die elke dag automatisch binnenkwam, en ik was heel benieuwd wat voor rapporten ik over mezelf zou krijgen: voor de lol, maar ook om nuttige patronen te vinden en mijn gezondheid te verbeteren.
Webanalytics
Voor mijn werk gebruik ik dagelijks een hoop dashboards en diensten. Voor alles wat bedrijfskritisch is of geld oplevert, bouwen waarschijnlijk tientallen bedrijven dashboards om het te begrijpen en te optimaliseren.
Al onze servers zijn goed uitgerust met meetpunten, zodat we weten dat ze doen wat ze moeten doen en meteen een seintje krijgen als er iets misgaat. Op een (niet zo verre) dag in de toekomst bestaan er zulke dashboards ook voor je lichaam.
Andere analysetools zoals Google Analytics en Fabric helpen ons om verkeer en andere ingewikkelde cijfers te begrijpen. Grote getallen, sparklines, uitgelichte uitschieters en andere ontwerpelementen maken het makkelijk om grote hoeveelheden data snel te lezen.
Videogames
Videogames doen iets leukers met analytics, en hebben vaak een virtueel personage met eigenschappen als levels, health en ervaringspunten.
Op de juiste manier gepresenteerd is dat een heel leuke en intuïtieve manier om te begrijpen hoe je ervoor staat en je op de juiste dingen te richten: in leven blijven, levelen, een health potion drinken enzovoort.
Mensen steken honderden uren in het verbeteren van die virtuele getallen, maar voor het echte leven bestaat zoiets niet. Nog niet…
Codenaam Magneto
Al onze projecten krijgen een codenaam van een X-Men-personage, en deze app werd “Magneto.”
Begin 2015 bracht Facebook een gave nieuwe technologie uit: React Native. Eric was een grote fan van React en begon te experimenteren met een simpel React Native-project, waarin hij live data uit onze API haalde en op een scherm zette.
De app draaide via XCode, maar de applicatiecode was grotendeels JavaScript die ik kon bewerken in Sublime Text of een andere teksteditor. Binnen een paar uur kon ik elementen op de pagina aanpassen en ze stylen met een syntax die op Flexbox/CSS lijkt. Het was magisch.
Wearables
Rond diezelfde tijd kwam de Apple Watch uit, met veel enthousiasme en verwarring. Meestal ging het over de apps en meldingen op de Watch, maar wij waren het meest enthousiast over de gezondheidsfuncties.
Zodra ik er een droeg, hield hij op de achtergrond mijn hartslag en mijn stappen bij. Ik wilde dat combineren met andere data die ook belangrijk was voor mijn gezondheid: mijn gewicht en lichaamsvet van mijn Fitbit-weegschaal, de muziek die ik op Spotify luisterde, hoeveel tijd ik elke dag werkte.
De Health-app stond bij iedereen op de telefoon en mat wat basisdata zoals stappen. Er waren een paar simpele dingen die ik wilde kunnen doen, maar die met de bestaande Health-app onmogelijk of heel omslachtig waren.
- De hartslaggrafiek van een recente workout zien
- Een overzicht van vandaag zien zonder te scrollen of te klikken
- Makkelijk zien wat ik gisteren deed in plaats van alleen vandaag
Mahdi, een van onze eerste gebruikers die net fulltime bij het team was gekomen als engineer, begon deze HealthKit-synchronisatie te bouwen in Objective-C.
De hardloopapp
Terwijl Mahdi aan de HealthKit-synchronisatie werkte, begon ik aan een andere simpele app waarmee je je hardlooprondjes kon aankleden en delen met allerlei filters en layouts.
Toen we die hardloopapp uitbrachten, gingen duizenden mensen er creatieve beelden van hun workouts mee posten. Maar veel anderen klaagden dat ze geen hardloper waren en dus niets hadden aan de kaarten van hun workouts of aan het aantal donuts dat ze hadden verbrand.
We moesten uitzoeken hoe we datzelfde gevoel van creativiteit en motivatie naar alle Gyroscope-gebruikers konden brengen, niet alleen naar de sporters. Onze oplossing: soortgelijke ervaringen bouwen voor dingen die iedereen doet, zoals muziek, hartslag, slaap, computergebruik, stappen en reizen.
Een paar vroege mockups van de app
We begonnen mobiele dashboards te ontwerpen om alle informatie in de app samen te brengen. Voor de details besloten we alles in een vierkante kaart te zetten, met daaronder een hoop opties om aan te passen.
Delen kreeg ook een prominentere plek onderaan de pagina, want een groot deel van de ervaring zou zijn dat je je grootste prestaties op Instagram post of met vrienden deelt.
Omdat deze weergaven zo sterk door data werden bepaald, waren de eerste mockups alleen een ruw vertrekpunt. De meeste definitieve ontwerpen ontstonden met de echte app, boven op live data en grafieken van onze servers.
Weekrapporten
De dagkaarten draaiden om één datapunt, maar de weekrapporten hadden veel meer informatie en konden een overzicht geven en patronen uitlichten.
En ondertussen, op de site…
Met nieuwe functies zoals onze Fitbit-integratie en de HealthKit-synchronisatie kwam er veel nieuwe gezondheidsdata binnen, hartslag, stappen, bloeddruk, vetpercentage, maar de oorspronkelijke site draaide vooral om locaties en foto’s. We moesten de webervaring verbeteren zodat mensen hun nieuwe data makkelijk konden lezen, en begonnen aan een nieuw thema voor het webprofiel met een van mijn favoriete ontwerpers, Shane Mielke.
Dit nieuwe thema moest een serieuzer dashboard van al je cijfers worden, en Shane maakte een stuk of twaalf mockups voordat we hier echt enthousiast van werden.
Een van de kantelpunten was de inhoud opdelen in intuïtieve secties, per deel van het menselijk lichaam. Eerst wist ik niet of die metafoor zou werken, maar hij paste behoorlijk goed bij alle data die we hadden, en gaf ons ruimte om te groeien.
Met een 3D-weergave van het menselijk lichaam (Shane maakte een simpele mannelijke en vrouwelijke versie) konden we het lichaam als navigatie gebruiken en elk deel oplichten als je het opende.
Mentale cijfers zoals slaap, productiviteit en tijd achter de computer kwamen bij het brein. Later konden we daar dingen als stemming of meditatie aan toevoegen.
Cardiovasculaire cijfers zoals hartslag en bloeddruk werden bij de borst ondergebracht, terwijl fitnessactiviteiten zoals stappen, hardlopen en andere workouts rond de benen konden komen.
Elk deel was een belangrijk begrip dat later met meer details kon worden ingevuld. Als we ooit het bijhouden van eten zouden toevoegen, kon dat bijvoorbeeld naar de romp zonder dat we alles opnieuw hoefden te ontwerpen.
De datastructuur werkte verrassend goed, dus besloten we hem ook in de app te proberen. Shane en ik begonnen te spelen met de mobiele homepage en propten een paar kaarten voor elk deel op het scherm.
Tot dan toe waren de meeste mockups gemaakt met verzonnen data. Bijna allemaal hadden ze een grote, goed leesbare titel en een beeld met details uit de data. De volgende stap was het echt bouwen en kijken hoe nuttig het in het echt was met mijn eigen data.
Kleurcodes voor je status
Ons doel met dit dashboard was dat je in één oogopslag de relevante informatie kon begrijpen. Grote getallen en kaarten met kleurcodes gaven snel aan of een onderdeel die dag “goed” was.
Was het aantal stappen bijvoorbeeld minder dan een paar duizend, dan werd de fitnesskaart rood of oranje om je eraan te herinneren dat je meer moest bewegen. Haalde je je doel of kwam je net terug van de sportschool, dan werd hij groen en kon je door met andere dingen. Losse onderdelen op groen krijgen is niet zo moeilijk, maar de uitdaging werd de juiste balans vinden tussen alle onderdelen.
Het startscherm
Voor het eerste startscherm wilde ik iets futuristisch dat toch menselijk bleef. Ik had deze foto een paar jaar eerder in Japan gemaakt en de sfeer klopte precies.
Ik zette het Gyroscope-logo en wat tekst erover en we hadden ons eerste inlogscherm.
Bèta testen
Half september hadden we een werkend prototype van de app dat mensen konden gaan gebruiken. We hadden het op onszelf getest, maar de grote uitdaging was dat het net zo nuttig moest zijn voor miljoenen mensen over de hele wereld, en niet alleen op ons was toegesneden.
We besloten hem naar wat vrienden en Pro-gebruikers te sturen als start van ons bètaprogramma. Daarbij startten we een Facebook-groep om aankondigingen te posten en makkelijk feedback te krijgen.
Als we updates plaatsten, stuurden gebruikers feedback en hielpen ze ons snel bugs te vinden. Dat gebeurde allemaal binnen uren of minuten, waardoor we snel konden bijschaven. Omdat het een besloten bèta was, konden we bijna meteen nieuwe versies uitbrengen zonder te wachten op een review in de App Store.
Tot dan toe hadden we ontworpen op basis van onze eigen aannames en de feedback van een handjevol mensen, maar nu konden we meer cijfers en feedback van onze gebruikers gebruiken om keuzes te maken.
Het was ontzettend leuk om de ervaringen van een paar van onze eerste bètatesters te horen.
“Gyroscope is het enige product dat het bijhouden van mijn leven makkelijk maakt. Met één blik zie ik waar ik in uitblink en waar ik aan moet werken. Er gaat geen dag voorbij dat ik de app niet open.”
– Brandon Littell
Het testen was veel meer samenwerken dan alleen crashes en bugs vinden. Veel mensen hadden wensen en suggesties die ons hielpen te focussen op functies die mensen echt regelmatig zouden gebruiken.
Je leven in kaart
Een van de leukste datapunten die we hebben, is locatiedata, bijgehouden via Swarm of Moves. Hardlopen, fietsen en andere activiteiten vullen ook punten op de kaart in.
We gebruikten Mapbox met veel plezier op onze site en besloten dezelfde kaarttechnologie in de app te gebruiken. Eerst experimenteerden we met kaarten waarop je kon zoomen en schuiven, maar al snel besloten we het simpel te houden en de kaarten als een statische achtergrond te gebruiken. Wij zouden het rekenwerk doen en het beste zoomniveau en de beste compositie zoeken om alles te tonen wat ertoe deed.
Wie Moves gebruikte om beweging bij te houden, kon een heatmap zien van overal waar hij was geweest en hoe zijn tijd verdeeld was. Vanuit gezondheid is het interessant om te zien hoeveel tijd je lopend doorbrengt tegenover in de auto. Ik ging eerder van huis en liep naar meer afspraken.
Sommige weergaven gaven inzicht in je fitheid, andere gingen meer over je reizen of wat voor restaurants je bezocht.
Pushmeldingen
Een van de manieren om het leven van mensen makkelijker te maken, was elke dag een simpele pushmelding met wat inzichten sturen.
Er ging veel discussie en testwerk zitten in de timing en de formulering van dat bericht. Eerst wilde ik het aan het eind van de dag sturen als terugblik. Maar data kwam soms wat later binnen en dan bestond het risico dat we een half verhaal meldden. We kozen voor 9 uur de volgende ochtend.
Onze prioriteit is het leven van de gebruiker makkelijker maken, ook als dat ten koste gaat van omzet of van de cijfers die we zelf willen halen. In plaats van iets vaags waardoor mensen wel de app moesten openen, zetten we alle relevante info erin, zodat je er ook iets aan had zonder de app te openen.
“Ik gebruik Gyroscope al een hele tijd, maar pas toen ik mijn dochter kreeg werd het echt belangrijk voor me. Ik vind het heerlijk hoe mijn data om fit te blijven is geordend en hoe gedetailleerd de uitsplitsing is die ik krijg. En dan heb ik het nog niet eens over het gevoel dat er altijd wel iets nieuws is dat mijn ervaring beter maakt. Het team geeft echt om zijn gebruikers.
Naast een overzicht van mijn algehele gezondheid hou ik ook goed in de gaten hoe fit ik mentaal ben, door naar mijn productiviteit te kijken. Ik werk gemiddeld 38–42 uur per week aan Iris (mijn startup) en ben fulltime moeder. Gyroscope heeft me geholpen die uren zo in te delen dat er een solide “balans” ontstond, en daar ben ik enorm dankbaar voor. Het resultaat? Extreme productiviteit. Vroeger ging 40 uur werk op aan gelul. En nu? Met een baby weet je nooit hoe de dag loopt, dus ik haal echt alles uit mijn tijd…”
– Cat Noone
Maandrapportage
Eens per maand kwam er een nieuw maandrapport, en die tijd wilden we gebruiken om terug te kijken op de voortgang en wat meer bij onszelf naar binnen te kijken. Er waren een paar simpele vragen die we met deze data hoopten te beantwoorden.
Ben je actief genoeg geweest?
Heb je genoeg geslapen?
Hoe productief was je?
“Als student is een gezonde balans houden de sleutel tot succes. Gyroscope brengt de data in mijn leven in beeld, zodat ik slaap, sport en productiviteit in evenwicht kan houden. Prachtige visualisaties en een supernuttige app!”
– Victoria Spiegel
Afvallen
Sinds ik ruim een jaar eerder met Gyroscope was begonnen, was ik langzaam flink aangekomen. Geen groot raadsel: de combinatie van stress, weinig slaap en veel late avonden werken en snacken deed het beetje sporten dat ik nog wel deed ruimschoots teniet.
Een van mijn doelen met de app was dat hij me zou helpen afvallen. Elke ochtend ga ik op mijn Fitbit Aria-weegschaal staan om mijn gewicht en mijn vetpercentage te zien.
De hele dag door herinnerde Gyroscope me aan die cijfers. Ik bouwde een paar layouts die me eerlijk hielden en mijn recente geschiedenis in context lieten zien. Het snel opmerken en zelf bijsturen was de sleutel.
Tot dan toe was het makkelijk om dat weg te duwen tot de weekrapporten of tot ik af en toe op de site keek. Ondertussen kon ik een hoop ongezonde keuzes maken, een Uber nemen in plaats van ergens heen lopen, een toetje bestellen of een extra koekje bij de koffie, en dat telde na verloop van tijd op. Er constant bij stilstaan hielp tegen de neiging om elke dag lekkere zoete dingen te eten.
Zes maanden later, toen de app bijna uitkwam, zag ik tot mijn plezier dat ik ongeveer 20 pond en 5% lichaamsvet kwijt was. Ik had niets heel anders gedaan, maar een hoop kleine veranderingen en keuzes per dag hadden me een stuk gezonder gemaakt. Mijn dagelijkse stappen lagen hoger omdat ik overal naartoe probeerde te lopen, en elke keer dat ik de app opende en mijn voortgang zag, wilde ik dat ritme nog liever vasthouden.
Veel van onze andere bètatesters hadden vergelijkbare verhalen. We willen nog van alles toevoegen en verbeteren, maar we hebben hem in de App Store gezet zodat iedereen de app kan gaan gebruiken om zijn leven beter te maken.