Dit blogbericht gaat over onze vorige, inmiddels gestopte hardloop-app.
Hoe Gyroscope Running is gemaakt
Codenaam Quicksilver: onze eerste React Native iPhone-app
We hebben onlangs een nieuwe experimentele iPhone-app uitgebracht, Running by Gyroscope. Daarmee maak je mooie beelden om je laatste run te delen. Dit is het verhaal van hoe we de app hebben ontworpen, welk gereedschap we gebruikten en wat we onderweg hebben geleerd.
De app draait op twee van onze populairste integraties, Runkeeper en Strava. Die houden je activiteit fantastisch bij. Na een run synchroniseert Gyroscope automatisch de ruwe data. Daarna wordt het leuk en kies jij het verhaal dat je wilt delen.
Een satellietkaart van je mooie route? Of misschien de foto die je van die adembenemende zonsondergang maakte? Of het feit dat het gelijk stond aan 7 donuts? Misschien was je hartslag flink hoog en wil je dat uitlichten. De keuze is aan jou.
Hoofdstuk 1
Maart 2015
We hadden net de website van Gyroscope gelanceerd. Het systeem werkte prima. Mijn runs synchroniseerden meteen en verschenen op aprilzero.com, met al mijn cijfers en zelfs dingen als de muziek waar ik op Spotify naar had geluisterd.
We hadden een prachtig dashboard gebouwd, maar de enige manier om iets te delen was door iemand het hele ding te sturen.
Onze volgende grote uitdagingen waren mobiel en delen.
Op een middag in maart ging ik hardlopen naar Twin Peaks. Het was een heldere, mooie dag, met allebei de bruggen zichtbaar in de verte.
Terwijl ik over de stad uitkeek, wilde ik dit moment kunnen delen. Ik had alles bijgehouden en in cijfers gevangen: de hoogtemeters, mijn hartslag, de route die ik had gelopen, de muziek waar ik naar luisterde en wat ik zag (met een foto), maar er was geen manier om dat allemaal weer samen te brengen tot mijn ervaring.
Ik zag een augmented reality-beeld van mijn route de berg op voor me. Er schoot me een idee te binnen voor een deelbare kaart, waarbij mijn waarden en locatie over de foto heen zouden liggen die ik had gemaakt. Al die informatie zat al in Gyroscope, hij moest alleen goed vormgegeven worden.
Ik bedacht dat dit een mooie Instagram-foto zou opleveren, en rende enthousiast helemaal naar huis om het te proberen.
Hoofdstuk 2
Doen alsof tot het echt is
Zodra ik thuis was opende ik Photoshop en sleepte ik er een paar van de foto's in die ik had gemaakt. Ik voegde de kaartdata van mijn run toe en combineerde die met wat cijfers tot een simpele infographic. Ooit hebben we misschien een mooi automatisch hulpmiddel, maar op dat moment was het sneller om het gewoon vanaf nul te maken.
De basisgegevens zoals de stad en de afstand zette ik in de hoek. De tekstkleur (turquoise) pikte ik uit de foto, en ik zette er een markering bij waar de foto was gemaakt. Een paar uur later kreeg de foto die ik had gepost een enorme berg likes. Mensen vroegen hoe hij was gemaakt.
Ik besloot dat ik met dit experiment door zou gaan: na elke run met de hand een beeld maken en nieuwe ontwerpen uitproberen.
De weken daarna bleef ik na elke run nieuwe beelden maken om te delen. Ik speelde met verschillende kaartstijlen en voegde details toe als muziek, weer of hartslag. Die kleine toevoegingen gaven de run meer inzicht en meer dimensies, en mensen leken het mooi te vinden.
Ik begon echt uit te kijken naar de creatieve oefening om na een run een kaart te maken en te delen. Samen met de endorfine werd het behoorlijk verslavend. Er zaten allerlei nieuwe lagen van creativiteit en verhalen in: de foto's doornemen die ik had gemaakt, verschillende weergaves van mijn route bekijken, mooie accentkleuren kiezen enzovoort.
Het bracht een stel van mijn favoriete dingen samen: fotografie, hardlopen en aandacht krijgen.
Er was iets aan het toevoegen van een paar cijfers en een logo waardoor een foto niet langer alleen een foto was, maar grafisch ontwerp of zelfs kunst. De compositie en de vorm van alle elementen konden samen iets opleveren dat veel meer was dan de som der delen.
Zelfs onderweg vond ik het leuk om hieraan te werken. De kaarten waren een mooie manier om de verschillende plekken die ik bezocht vast te leggen, een soort ansichtkaart.
Door verschillende gegevens aan of uit te zetten, zoals muziek of kaarten, vertelde dezelfde run een ander verhaal. Bij een zwaardere run zette ik er bijvoorbeeld mijn hartslag bij. Was het een erg warme of koude dag, dan was het weer misschien een interessant cijfer. Was er een prachtige zonsondergang of een mooi uitzicht, dan leverde dat meestal een fijne achtergrond op. Was het landschap interessant, dan lichtte een satellietweergave dat uit.
Nadat ik dit een paar maanden had gedaan, besefte ik dat dit een behoorlijk geweldig product zou zijn. Ik wilde het zelf heel graag, en een hoop anderen hadden laten weten dat ze het ook wilden gebruiken.
Ik begon wat ideeën te schetsen en bracht mijn experimenten terug tot een paar van de beste indelingen.
Hoofdstuk 3
De app ontwerpen
Als ik aan een nieuw ontwerp begin, zet ik graag de doelen op een rij. De juiste doelen kiezen is vaak belangrijker en moeilijker dan iets er mooi uit laten zien. Voor Quicksilver waren er een paar leidende principes die ik belangrijk vond. Die zouden elke pixel en elke regel code bepalen die we zouden maken.
- Zoveel mogelijk likes krijgen
- Je laatste run meteen zien
- Het aanpassen leuk maken
Ontwerpen voor maximale betrokkenheid
Om zoveel mogelijk likes te krijgen, moesten we de juiste visuele flair, focus en context toevoegen zodat het bij anderen zou aankomen. Beseffen wie onze doelgroep was, het brede publiek en niet alleen medesporters, hielp om de boel vorm te geven en onderscheidde ons sterk van wat de rest deed.
De meeste apps hadden gedetailleerde cijfers om je prestaties te verbeteren. Maar voor een vriend die niet hardloopt is dat een stuk minder spannend. Die ziet waarschijnlijk veel liever dat het gelijkstond aan 5 donuts en geeft je een duim omhoog. Of misschien een mooie foto vanaf de top van de berg waar je met moeite op bent geklommen.
We probeerden elke indeling als een eigen merk te bouwen, met een eigen naam en icoon. Dit was de kernfunctie van de app, en die moest supervanzelfsprekend en leuk in gebruik zijn.
Na een paar verschillende ideeën kwamen we uit op de indelingen in een lange lijst onderaan. Het was echt bevredigend om door de verschillende indelingen te bladeren en er een te kiezen.
Het voelde als Instagram-filters voor hardlopen
Startscherm
Omdat fotografie en het werk van gebruikers een groot deel van de app waren, wilde ik dat je dat meteen zag bij het openen.
Ik ging op zoek naar mooie foto's voor de achtergrond. Mijn vriend Adam, een van de beste fotografen die ik ken, liet ons welwillend een van zijn opnames van Mt. Tam gebruiken.
Zodra ik hem in de app zette, was ik verkocht. Het was precies dat gevoel van rust en natuur dat de juiste toon zette voor de rest van de app.
Een aparte app
Een van de grootste ontwerpbeslissingen was om hier een aparte app voor hardlopen van te maken. Ik wilde het woord “Running” op mijn beginscherm zien staan en meteen bij mijn eigen materiaal kunnen.
Als we later meer mogelijkheden zouden toevoegen, zoals fietsen of zwemmen, konden mensen alleen installeren wat ze wilden. Ik wilde voorkomen dat het rommelig werd en bedolven raakte onder lagen navigatie.
Activiteitenfeed
Bij de meeste andere hardloop-apps moet het vastleggen prominent zijn, maar omdat wij dat niet hadden konden we ervoor zorgen dat de inhoud altijd voorop stond. Alles behalve de recente runs verdween in een zijbalk.
We speelden met verschillende stijlen en beelden voor elke run. Het konden gestapelde kaarten zijn, of een reeks tegels. Na wat experimenteren met de hoeveelheid informatie bleken de grotere te veel ruimte in te nemen. Na een paar minuten in de app besefte ik dat ik te ver was ingezoomd en het overzicht miste dat ik wilde. De weergave op de website werkte prima, dus uiteindelijk gebruikten we diezelfde balken opnieuw, met een kleurcode voor het tempo.
Ik probeerde de snelste & langste run in de kop te zetten, zodat je er altijd bij kon zonder te hoeven scrollen. Het zou een vriendelijke uitdaging zijn: elke keer dat ik de app opende, had ik de kans om mijn eigen record te breken. Als iemand een marathon liep of iets indrukwekkends deed, kon diegene er altijd makkelijk bij.
De teller die op de site je leeftijd steeds verder liet oplopen was een erg populaire vondst, dus we zetten hier een vergelijkbare timer neer voor de tijd sinds je laatste run. Als dat getal opliep, zouden mensen hopelijk gemotiveerder raken.
Hoofdstuk 4
De donutteller
Deze zomer werkten we vanuit het kantoor van True Ventures in San Francisco. Op een dag nam iemand een paar dozen donuts mee. Na de lunch sneed iemand, Phil Black als ik het me goed herinner, ze in achtjes, met de mededeling dat het niet telde als je alleen kleine stukjes at. Ik wist wel dat dat wetenschappelijk niet klopte, maar ik begon toch de verschillende smaken te proeven.
Terwijl ik daar zat, werkend aan een hardloop-app en met een kwart glazed buttermilk donut in mijn hand, vroeg ik me af hoe ver ik die avond zou moeten rennen om mijn tussendoortje te compenseren. Na wat googelen ontdekte ik dat een gemiddelde donut ongeveer 200 calorieën heeft, en dat de calorieën in een run ongeveer (gewicht × 0,75 × afstand).
Runs zonder kaartdata, op een loopband of bijgehouden via Fitbit, bezorgden ons een hoop hoofdbrekens. De app leunde voor alle weergaves op kaarten, maar we hadden iets nodig dat flexibeler was.
Terwijl ik daar zat te rekenen aan mijn verschillende runs, besefte ik 2 dingen: ik had geen idee hoeveel donuts er in de meeste van mijn runs zaten, en het was best leuk om daarachter te komen.
En zo werd de donutteller geboren.
We zouden wat rekenwerk doen om een benadering van het aantal donuts te vinden, of dat nu een korte run van 1 donut was of een hele lange. De rest van de dag ging ik op zoek naar stockfoto's van mooie donuts in aantallen van 1 tot 6.
Hoofdstuk 5
Beta testen
Toen we een basisversie van de app draaiend hadden, stuurde ik uitnodigingen naar de fanatiekste hardlopers op de site, mensen met meer dan honderd runs. Ik was verrast en onder de indruk toen ik zag dat een aantal mensen vele duizenden runs in hun account had staan.
Ik hield van hardlopen, maar zat bij lange na niet op hun niveau. Hun feedback en suggesties zouden zijn wat we nodig hadden om hier een goed product van te maken.
In het begin stuurde ik gewoon met de hand e-mails. Mensen kwamen terug met bugs of ideeën en ik probeerde bij te houden wat iedereen zei.
Toen stelde iemand voor om een Facebook-groep te maken, iets wat ze bij andere betatests hadden gedaan en heel nuttig vonden. Ik zette een nieuwe besloten groep op en stuurde de link naar een paar van onze beste testers. Hij groeide na verloop van tijd naar meer dan honderd mensen, van wie er veel dagelijks hardliepen en de app gebruikten.
We kregen niet alleen een hoop bugmeldingen en suggesties, sommigen begonnen zelfs schetsen te maken van wat ze wilden.
We konden nieuwe functies bedenken, ze naar iedereen in de groep sturen en ze meteen met echte inhoud zien.
Hoofdstuk 6
Gereedschap & trucs
We hebben een geweldig team bij Gyroscope dat keihard heeft gewerkt om deze app voor elkaar te krijgen (bedankt Mahdi, Eric, Robbie!), maar we kregen ook veel hulp van buiten. Hier zijn een paar prima hulpmiddelen en producten die voor ons onmisbaar bleken en ons veel ontwikkeltijd hebben bespaard.
React Native
Met een achtergrond in het web voelden Javascript en een indelingssysteem in de stijl van CSS en Flexbox heel vanzelfsprekend. Ik had eerder iPhone-apps ontworpen, maar er nooit echt code voor geschreven. Als React Native niet had bestaan, had ik moeten wachten tot iemand anders het bouwde. Aan een bijproject als dit was dan waarschijnlijk nooit begonnen.
Brent Vatne, een van onze eerste betatesters, droeg ook bij aan React Native en heeft ons enorm geholpen als we vastliepen of vragen hadden die nog niet in de documentatie stonden. Bedankt Brent!
Sinds wij begonnen is React flink verbeterd. Elke nieuwe release, van ongeveer 0.3 tot 0.12 toen we uitkwamen, maakte het sneller en loste problemen op waar we tegenaan liepen.
Er is nog werk aan de winkel (ik wou dat de animaties soepeler liepen), maar het gaat razendsnel vooruit. In elk geval voor onze heel eenvoudige toepassing deed het zijn werk en konden we veel sneller vooruit dan anders mogelijk was geweest.
Doordat React Native over het netwerk live herlaadt, konden we in een paar minuten nieuwe ideeën uitproberen of piepkleine aanpassingen doen. Ik kan me nu niet meer voorstellen dat je opnieuw moet compileren en wachten om je wijzigingen te zien.
Mapbox
Mapbox maakt fantastisch kaartgereedschap dat we overal op onze site gebruiken. In hun editor kun je de stijl en de kleur aanpassen. Wij gebruikten hem om allerlei stijlen te maken, waaronder deze donkere, minimale tileset.
Eerst speelden we met hun iOS GL-implementatie, maar we kwamen erachter dat we eigenlijk helemaal niet wilden dat mensen konden schuiven of zoomen. Om het simpel te houden gebruikten we onze bestaande webimplementatie in een webview opnieuw, zodat we de code konden houden waar we al maanden aan hadden getest en gesleuteld.
Imgix
Een van de bijzondere dingen aan onze app is dat de stijl van de kaart zich aanpast aan de foto. Imgix helpt ons het kleurenpalet te analyseren, zodat we de tekst en andere elementen bijpassende en aanvullende kleuren kunnen geven.
We gebruiken Imgix ook voor effecten, zoals het versterken en vervagen van het beeld. Foto's in de cloud verwerken betekent dat er wat opstarttijd is, de gebruiker moet de foto uploaden in plaats van alles lokaal op de telefoon te doen, en het kan soms een minuut duren om de foto te uploaden en de bewerkte versie weer op te halen, maar die afweging was het waard gezien de tijd die het ons bespaart en de extra mogelijkheden die we ervoor terugkrijgen.
Fabric van Twitter
We begonnen Fabric/Crashlytics te gebruiken om onze crashes bij te houden. In de begindagen crashte onze app veel. Na verloop van tijd hadden we alle crashes opgelost, maar ik merkte dat ik het dashboard nog steeds gebruikte om te zien hoeveel de app werd gebruikt.
Ik was van plan geweest om analytics op te zetten, maar bijna alles wat we nodig hadden bleek al in dit dashboard te zitten. Het leukst vond ik om te zien wie er op dat moment actief was, maar andere cijfers als maandelijkse actieve gebruikers (MAU), de verhouding DAU/MAU en hoeveel mensen terugkwamen waren ook heel inzichtelijk.
Terwijl we tijdens de beta dingen aan de app veranderden, zagen we de tijd per sessie, hoeveel mensen terugkwamen enzovoort ook echt veranderen. Pushmeldingen toevoegen met Parse maakte een groot verschil om mensen weer te betrekken en ze op het juiste moment terug te laten komen.
Parse
In de eerste versies van de app moesten mensen hem zelf openen om te zien of hun laatste run was geladen. Zodra we Parse gingen gebruiken om een pushmelding te sturen bij nieuwe runs, schoot het aantal terugkerende gebruikers omhoog.
Hoofdstuk 7
77 donuts
Op een dag scrolde ik door onze vermeldingen op Instagram. Er zaten wat foto's van zonsondergangen tussen, en toen zag ik iemand die een run van 77 donuts leek te hebben gedaan.
Er zat vast een fout in mijn calorieberekening, of iemand had nepdata geüpload. Misschien was een fietstocht per ongeluk als run gemarkeerd?
Ik klikte door en googelde de “Fat Dog” die Nate had genoemd. Dat bleek een ultramarathon van 120 mile in Canada te zijn, die tot de zwaarste ter wereld wordt gerekend. Wow!
Ik deelde zijn bericht met onze groep betatesters. Nate's geweldige run zien maakte dat ik een manier wilde om dit soort bijzondere runs aan iedereen te laten zien.
We voegden een paar dingen toe aan de zijbalk van de app: een feed met uitgelichte runs, en een lijst van vrienden die onlangs hadden gelopen.
Nate's record staat nog steeds: 77 is nog altijd het hoogste aantal donuts dat iemand op Gyroscope heeft vastgelegd. Maar sinds ik aan dit project begon heb ik geleerd om mensen nooit te onderschatten. De volgende versie ondersteunt voor de zekerheid drie cijfers.
Hoofdstuk 11
Wat komt er nu?
We hebben deze app in de App Store uitgebracht & een hoop mensen gebruiken hem om hun leven bij te houden en te delen.
Tatiana viel bijna 40 pounds af door al haar stappen bij te houden en te delen.
Dan Grant fietst heel Engeland door om te herstellen en gezond te blijven na een hartaanval.
We hebben wat we bij Running leerden gebruikt & daarmee de nieuwe Gyroscope-app gebouwd, die het complete verhaal van je leven laat zien. Ook een React Native-app: je kunt lezen hoe we hem hebben gebouwd of de app in de App Store halen.