Hoe April Zero is gemaakt

Hoe April Zero is gemaakt

Deel 1

Dit is het eerste hoofdstuk over hoe ik de oorspronkelijke April Zero-website heb ontworpen. Ik deel een paar schetsen, geschrapte concepten en oude prototypes, en leg uit hoe het onderweg is geëvolueerd.

Wil je het zelf gebruiken, dan kun je je nu aanmelden voor Gyroscope.

Maart 2014 – Inspiratie

Get your move on

Ik zou naar Parijs gaan met mijn huisgenoot. Hij is een fanatiek fotograaf en als we ergens heen gaan bouwt hij meestal een minisite over onze reis, vol mooie fullscreen foto's en video's. De vorige ging over ons avontuur in Japan.

Het was altijd leuk om er een paar maanden later op terug te kijken en die gedetailleerde kroniek van wat we hadden gedaan te zien, met prachtige foto's en video's van elke stap onderweg.

Voor deze reis besloten we de Moves-app te gebruiken om bij te houden waar we allemaal kwamen. Ik installeerde hem in de rij bij de security op SFO, zonder te beseffen dat dit het begin was van wat al snel een obsessie zou worden.

Sommige mensen hebben Moves of vergelijkbare apps in het verleden geprobeerd en liepen tegen de batterij aan. Alle apps met GPS of bewegingsdetectie (Nike, Find My Friends, Highlight enzovoort) waren lange tijd verschrikkelijk, omdat ze je batterij in no time leegtrokken. Toen kwam de iPhone 5S. Maar terwijl de geruchtenmolen op volle toeren draaide over hun aanstaande iWatch, ging de baanbrekende M7-processor van Apple vrijwel iedereen voorbij, mijzelf incluis.

Ineens kon je zoveel dingen doen met minimale impact op de batterij. Ineens was er zoveel rijke content in realtime beschikbaar. Ineens was een hele generatie fitnessapparaten overbodig. Hardwareproblemen werden simpele softwareproblemen. Moves was een van de weinigen die er echt gebruik van maakte.

Hartslagen

Rond diezelfde tijd vertelde iemand me over een app die Cardiio heette en die je hartslag kon meten met de camera van de iPhone. Ik downloadde hem vooral omdat ik niet geloofde dat het zou werken. Het kon me werkelijk niets schelen hoe vaak mijn hart sloeg.

Maar na een paar dagen spelen was ik verslaafd. Het mooie eraan was dat een meting maar zo'n 15 seconden kostte, misschien 30 als je de tijd meetelt om je telefoon uit je zak te halen, te ontgrendelen en de app te openen.

Wat me echt te pakken kreeg, was de ontdekking dat goed getrainde sporters meestal een lagere rusthartslag hebben. Lager was beter. Dit was een heel makkelijke manier om objectief te meten hoe ik ervoor stond. En het was leuk.

Op een week zag ik dat mijn hartslag abnormaal hoog was, rond de 80 of 90 terwijl hij normaal dichter bij de 60 lag. Zat ik ergens over in? Ik ging voor een lange run en checkte het de volgende dag opnieuw. Terug op 60. Fascinerend…

Het was alsof ik New Relic in mijn lichaam had geïnstalleerd. Ik was gewend om naar grafieken te kijken en dingen te repareren. Alleen was het deze keer geen server, maar mijn lichaam.

Run for your life

Mijn vorige hobby was indoor klimmen. Ik woonde een paar straten van Mission Cliffs en daar boulderen werd mijn avondritueel. Maar het is een behoorlijk zware sport en al snel liep ik allerlei schouderblessures op.

Ik ging in plaats daarvan hardlopen. Ik was net een grote breuk aan het verwerken en het was een prima manier om ermee om te gaan. Ik had de Nike-hardloopapp in het verleden af en toe gebruikt, hier en daar een mijl, maar nooit serieuze afstanden. Die app met GPS sloopte mijn batterij, dus hij was niet erg leuk om te gebruiken.

Maar nu, met de M7, begaven mijn knieën het lang voor mijn telefoon. Dure Garmin-hardloophorloges of Fitbits waar ik over nadacht waren niet meer nodig. Het is makkelijk om excuses te verzinnen dat je een belangrijk hulpmiddel mist, maar alles wat ik nodig had zat al in mijn zak.

De foto's van mijn runs op Instagram posten hield me gemotiveerd om regelmatig te blijven lopen zodra ik eenmaal begonnen was. Ze hadden een simpel systeem om de kaart, de afstand en het Nike-logo over een foto te leggen. Met de hashtag #nikeplus op Instagram kreeg je gegarandeerd veel likes van andere hardlopers over de hele wereld.

Het combineerde drie van mijn passies: hardlopen, fotografie en aandacht krijgen. Briljant. Het was een mooie tijd om hardloper te zijn: tussen Runkeeper, Strava, Nike enzovoort waren er veel goede tools en communities.

Al mijn cijfers per run zien gaf me iets om te optimaliseren en beter in te worden. Ik kon mezelf nu uitdagingen en doelen stellen.

Maar bijna niets anders had zo'n ecosysteem. Ik wilde dit soort informatie en motivatie voor elk deel van mijn leven, niet alleen voor het hardlopen. Dit was gewoon analytics. Ik had eerder analytics gebouwd. Het was tijd om te gaan schetsen.

Bloedwaarden

Ik was te laat met mijn jaarlijkse keuring. Ik liet alle standaardtests doen en vroeg ook om een kopie van mijn bloedwaarden per mail, voor mijn eigen administratie.

De week erop kreeg ik een heel uitgebreide PDF. Daar stonden niet alleen mijn huidige waarden in, maar ook een uitleg van de ideale bereiken per waarde en een analyse van mijn situatie. Ik schrok van hoe laag mijn vitamine D was, en een paar andere dingen zaten in niet-ideale bereiken. Dit was werkelijk fantastische data, maar hij zat vast in een PDF-bijlage vol tekst in mijn inbox. Hij verdiende veel meer.

Sindsdien laat ik elke maand mijn bloed prikken en houd ik de veranderingen scherp in de gaten. Ze in een dashboard zetten zou me constant herinneren aan wat ik moest verbeteren. Ik rekende op mijn theorie dat ik dingen zou verbeteren door ze alleen al bij te houden. En als dat niet werkte, wist ik het tenminste en kon ik harder mijn best doen.

Vetpercentage

In The 4 Hour Body vertelt Tim Ferriss over allerlei apparaten en tests waarmee hij zichzelf bijhield. Een daarvan was een draagbare USB-echo om het vetpercentage nauwkeurig te meten. Ik woog mezelf al, maar mijn vetpercentage kennen zou me nog beter laten begrijpen wat er veranderde.

Zo'n echo is een beetje onhandig, het kost een paar minuten en je hebt speciale gel nodig, maar ik vond de data die eruit kwam heel nauwkeurig en fascinerend om elke dag te zien. Je kon letterlijk in je eigen lichaam kijken, tot op de millimeter vet, spier en het bot eronder.

Ik zag mijn vetpercentage in het weekend omhoogschieten na epische cheatdagen, en de week erna nog verder zakken. De data die ik kreeg was geweldig, maar de app en de presentatie niet.

Ik wilde zien hoe dit samenhing met al het andere dat ik deed.

Ik geloofde ook in het idee dat je iets al gaat verbeteren door het alleen maar bij te houden. Als je weet hoe het er nu voor staat en hoe snel het verandert, kun je betere beslissingen nemen, sneller bijsturen en begrijpen wat wel en niet werkt. Zonder alles te meten waar je om geeft, vlieg je in feite blind.

Ik besefte dat ik de juiste balans moest vinden tussen makkelijke, frequente metingen als hartslag en gewicht, en vervelendere maar veelzeggende datapunten als mijn vetpercentage en bloedwaarden. Samen zouden ze een heel goed dashboard vormen en een compleet verhaal vertellen. Ik gok er ook op dat de techniek snel beter wordt, zeker als dit populairder wordt en de vraag stijgt. Als de versie met een microchip-implantaat op Kickstarter komt, of als Apple het met de Apple Watch gaat meten, hoef ik alleen een paar regels code aan te passen.

April 2014 – Eerste schetsen

Een raster van datapunten

Het idee en de eenvoud van dit ontwerp met pods beviel me, met een net raster en modulaire elementen die later konden worden opgewaardeerd. De meeste konden 100% automatisch via API's, en de handmatige zoals mijn laatste klimsessie zouden maar een paar minuten kosten.

Zelfs als ik lui of heel druk werd, zou de site niet verouderen. Ik zou toch wel hardlopen of muziek luisteren of nieuwe foto's op Instagram zetten!

Het belang van schetsen

In de vroege fase van een project ben ik vooral bezig met schetsen en nadenken. Of ik nu ontwerp of code schrijf, ik merk dat dingen eerst uitschetsen me helderder laat denken.

Met schetsen op papier werken is krachtig omdat je er snel mee gaat. Het is waarschijnlijk het enige medium waarin je ideeën kunt vastleggen zo snel als ze komen. Je legt jezelf visuele opties voor in plaats van alleen dingen in je hoofd, en neemt daardoor beter onderbouwde ontwerpbeslissingen. Twee opties op papier zetten, hoe ruw ook, maakt vaak al duidelijk welke beter is.

Wacom-tablet

Na het papier schetste ik dit idee snel uit in Photoshop, om te controleren of het ook digitaal nog klopte. Veel ontwerpen zien er als klein duimnageltje op papier goed uit maar werken niet zodra ze gedigitaliseerd zijn. Iets in de stijl van een schets kan zelfs een slecht idee chic en verfijnd laten lijken. Op een whiteboard of op papier is het heel makkelijk om te sjoemelen met de schaal en tekst te laten passen waar het niet past, of elementen veel meer ruimte te geven dan ze echt innemen.

Soms houd ik voor de eerste mockups graag een schetsmatige stijl aan. Zo blijf je denken alsof je op papier zit, en werk je aan één variabele tegelijk. De indeling en de inhoud stonden net vast, dus nu kon ik kleur toevoegen en controleren of het contrast en de schaal nog klopten. Textuur, typografie, achtergrondbeelden en andere tijdrovende details kwamen later, als dit groen licht kreeg.

Deze versie leek me best aardig, dus ik stuurde hem naar een paar vrienden. Zij waren er enthousiast over, dus ik bleef in Photoshop werken aan realistischere mockups. Dit had potentie.

Ik werkte nog een paar dagen aan de details en experimenteerde met varianten. Ik was heel enthousiast over de inhoud en de informatiearchitectuur, altijd het belangrijkste, maar de stijl en de indeling sloegen me niet elke keer omver.

Het was een degelijk en bruikbaar ontwerp, maar niet het beste ter wereld.

De April Zero-styleguide

Dit was de toekomst. De mogelijkheid om als bij toverslag alles over jezelf te analyseren en te delen is ongeveer net zo fantastisch als vliegen of elektriciteit. Ik wilde dat het net zo futuristisch zou voelen als het werkelijk was.

Als ik een merk bouw, maak ik meestal een moodboard om snel verschillende stijlen te proberen en te bepalen welke elementen de sfeer overbrengen. Dat kan van alles zijn: fragmenten uit films, foto's, billboards, screenshots van andere apps. Ik haal veel inspiratie uit motion design en reclame, waar grote budgetten en fantastische makers achter zitten. Op Dribbble en Behance is ook veel moois te vinden.

Er zijn talloze voorbeelden van mooie holografische interfaces en dingen die futuristisch aanvoelen, maar ik moest het terugbrengen tot een specifiekere selectie. Zoals bij de meeste beslissingen in mijn leven vroeg ik me af: wat zou Tony Stark doen?

Een paar elementen kwamen steeds terug: holografische lagen, concentrische cirkels, isometrisch perspectief en dunne lijnen. Die in een product verwerken zonder de bruikbaarheid op te offeren zou lastig worden, maar het was een prima startpunt.

Nu ik zowel de inhoud als de stijl had afgebakend, was het tijd om terug naar de tekentafel te gaan…

Versie 2

Ik wilde de modulariteit en de opbouw van eerder behouden, maar zonder die saaie indeling. Ik besloot alles op te splitsen in “mini-apps” die de data rond specifieke thema's presenteerden. De eerste twee zou je “Sport” en “Explorer” kunnen noemen.

Elke sectie terugbrengen tot één context zou een samenhangend verhaal opleveren, in plaats van een berg cijfers en getallen naar de bezoeker te gooien.

En in de toekomst kon ik nieuwe secties uitrollen zonder de bestaande te hoeven verbouwen. Een paar voorbeelden van dingen waar ik enthousiast over was:

“Aviation”, elke vlucht bijhouden terwijl ik aan mijn vliegbrevet werkte

“Underwater”, duiken bijhouden terwijl ik mijn duikbrevet haalde

“Digital”, wat ik deed als ik achter mijn computer zat (design, code, screencasten enzovoort)

“Finance” , uitgavenpatronen, een voortgangsbalk richting miljardair worden

“Love”, mijn datingleven in cijfers, enzovoort

Sommige dingen zouden misschien achter een wachtwoord moeten…

Ontwerpen voor Sport

De sectie Sport zou alles bevatten rond fitness en gezondheid, met de actuele bloedwaarden en verbeteringen in prestaties door de tijd heen.

De eerste versie was een feed met verschillende soorten activiteit. De weergave van de bloedwaarden vond ik echt mooi, maar de feed was in mijn ogen te lastig om snel te lezen. Ik zag alleen de laatste paar gebeurtenissen, wat geen goed overzicht gaf.

Ik wilde een jaar aan data in één oogopslag kunnen zien. Daarvoor had ik meer geaggregeerde data nodig, en moest alles compacter.

Dit was een betere indeling, maar hij voelde niet erg geavanceerd. Dat probleem kon ik tijdens het bouwen oplossen, met een paar subtiele animaties en subtiele details.

Dit was de statische versie in code. De donkerdere zijkolommen geven wat meer contrast en verbinden hem met de homepage doordat de contentkolom opzij schuift.

Ik wilde dat alles te verkennen en interactief was. Als je ergens overheen ging, kreeg je meer details te zien, er zat veel data onder de motorkap die je in principe kon tonen.

De spinner

Een patroon dat me was opgevallen in de analytics van eerdere sites: de meeste mensen bekijken één of twee pagina's en zijn dan weg. Ook al ligt er een hele wereld aan mooie content achter, de meeste bezoekers komen er nooit. Ergens op klikken is nogal een verbintenis, en elke sectie grondig verkennen doet gewoon niemand.

Ik wilde een nieuw soort interface maken, waarin je je in eerste instantie nergens aan hoefde te verbinden maar gewoon met je muis kon rondbewegen en verkennen, met lichte micro-interacties die makkelijk en leuk waren.

En zo werd deze spinner geboren. Ik wilde iets maken dat net zo leuk in gebruik en net zo revolutionair was als de originele iPod.

Het maakte ook een breuk met saaie, rechthoekige layouts mogelijk. Op het moodboard stonden veel ronde, bewegende elementen, en zo konden die details vanzelf in de interface terechtkomen.

Toen ik een mockup had waar ik enthousiast genoeg over was, werd het tijd om te gaan coderen! Ik had al een basis in Jekyll liggen van een eerder blogexperiment. Ik maakte een nieuwe branch en begon aan de spinner.

Vroege prototypes in code

Dit is een goed voorbeeld van een situatie waarin het erg nuttig is om een probleem zowel te ontwerpen als te coderen. Dat de pagina er visueel goed uitzag was belangrijk, maar hoe hij aanvoelde en bewoog was net zo belangrijk om uit te zoeken. Daarvoor bouwde ik een simpel prototype met wat lichte Javascript, draaiend in de Jekyll-container die ik oorspronkelijk voor mijn blog wilde gebruiken.

De eerste versie zag er niet erg indrukwekkend uit. Versie 1 (hierboven) was heel basaal. Alles goed laten draaien en uitlijnen was best lastig, dus tijdens het bouwen en debuggen gebruikte ik felgekleurde cirkels.

Versie 3 (hieronder) voegde de ringen toe en javascript voor meer interactie, zoals de cirkel laten draaien als je over de tekst ging.

Versie 5 voegde een intro-animatie toe, wat lastiger was dan ik dacht omdat ik transities probeerde te draaien op elementen die zelf ook al animeerden.

Versie 8 introduceerde een exit-animatie met andere instellingen dan de intro, zodat ergens op klikken meer voldoening gaf.

Elke iteratie loste een specifiek probleem op of voegde iets toe waardoor het net iets beter werd. Ik was aangenaam verrast door hoe leuk het werd om te gebruiken. Het bevestigde mijn idee dat hier iets zat waar tijd in steken de moeite waard was. Met wat meer verbeteringen en ontwerpdetails kon dit een geweldige ervaring worden.

Dus ik bleef eraan werken, urenlang per dag de pagina verversen en proberen de animaties soepeler, interessanter en beter getimed te maken.

Ik had er lol in, maar ik had meer bevestiging nodig om zeker te weten dat er geen ontwerpproblemen waren. Ik werkte in die tijd vanuit allerlei koffiezaken, dus ik ronselde wat vreemden om met de site te spelen.

Ik gaf ze geen instructies behalve “probeer dit eens”, gaf ze mijn laptop en keek nauwlettend wat ze deden. Ik zag een paar problemen, vooral dat ze op delen van de interface klikten die helemaal geen link waren. Ik maakte de klikbare gebieden snel groter zodat de vaak misklikte plekken erin vielen, en voegde hover-effecten toe om te laten zien dat je erop kon klikken. Al snel hadden mijn testvrijwilligers geen moeite meer om de site te begrijpen of erdoorheen te navigeren.

Het bleek net zo intuïtief te zijn als ik had gehoopt. Belangrijker nog: ze leken echt te genieten van het rondbewegen en op secties klikken, een beetje verrast en enthousiast over alle animaties die ze uitlokten.

Tevreden over het kernontwerp van de homepage werd het tijd om het deel van de site aan te pakken waar ik het meest tegenop zag.

Explorer

Er kwamen nu allerlei technische problemen om de hoek kijken. De vorige secties waren vrij makkelijk te schetsen en in Photoshop uit te werken met wat basisdata, maar voor deze had ik echte content nodig. Ik regelde een API-sleutel en begon mijn data uit Moves te importeren.

Na een paar weken in San Francisco besefte ik dat ik een gevarieerdere set data nodig had. Dus ik pakte mijn Macbook en mijn paspoort en vertrok naar New York voor onderzoek. Ik moest echt in de stemming van verkennen en avontuur komen als ik dat gevoel in deze sectie wilde overbrengen.

Nu moest ik uitzoeken hoe ik vluchten, tijdzoneveranderingen, runs in Central Park en een telling van hoeveel pizza ik at zou weergeven. Het bleek maar goed dat ik was gegaan, want ik liep meteen tegen allerlei problemen aan met hoe Moves met tijdzones omging, waar ik rekening mee moest houden. Was ik in San Francisco gebleven en had ik voor internationale tests op die oude Parijs-data vertrouwd, dan was alles ontploft zodra ik weer door tijdzones reisde.

Op de terugvlucht begon ik alle data uit Moves te verwerken en in een simpele tijdlijn te zetten. Het was een tamelijk onleesbare bende, maar het werkte met de echte data van mijn reis!

Een van de grootste ontwerpbeslissingen was om de tijdlijnen horizontaal te maken, met de dagen boven elkaar gestapeld.

Bijna alle vergelijkbare ontwerpen zetten ze verticaal, waarmee ze het probleem van overlappende tekst waar ik mee zat handig omzeilden. Maar ik geloofde dat alle dagen naast elkaar kunnen zien essentieel was. Ik wilde dat elke dag een as werd die later veel rijke data kon dragen. Het probleem van de labels moest ik maar op een andere manier oplossen.

Ik begon te spelen met een algoritme dat de labels netjes over 4 niveaus verdeelde. Het analyseerde het tijdsverschil tussen plekken en zorgde dat er altijd genoeg ruimte was om de tekst te tonen.

Versie 9 stond op een lichte achtergrond, maar bij versie 10 stapte ik over op een donkere achtergrond zodat de locaties er beter uit sprongen en het beter bij de rest van de site paste.

Ik besloot in eerste instantie alleen belangrijke plekken te tonen, en dat je met hoveren meer details over de dag zag en de kleinere tekst tevoorschijn kwam. Ook zwakte ik de weergave af van terugkerende plekken als thuis of hotels, omdat die minder interessant waren dan andere plekken, ook al werd er veel meer tijd doorgebracht.

Toen besloot ik op een dag buiten in het park te werken. De sectie heette tenslotte Explorer.

En… ik kon niets lezen.

De oorspronkelijke versie met de witte achtergrond werkte prima, maar de nieuwe met het mooiere donkere kleurenschema was in de zon totaal onbruikbaar.

Daarom is je product in de praktijk gebruiken enorm belangrijk. Hoe verder je ervan af staat, ook op manieren die onbelangrijk lijken, hoe groter de kans dat je wordt verrast of ontwerpfouten maakt. Daarom werk ik graag in vliegtuigen, in koffiezaken, ondersteboven en op andere manieren waar mensen raar van opkijken. Het opent je blik voor andere perspectieven en legt problemen bloot die je anders zou missen.

Nu moest ik kiezen: hield ik het donker omdat dat er binnen voor 95% van de mensen beter uitzag, of was het logisch om het hele ding licht te maken? Als het mij kon overkomen, kon het iemand anders overkomen, of, belangrijker nog, mij nog een keer.

Soms moet je, als je vastloopt of een drempel raakt, gewoon doorgaan en erdoorheen beuken, uren tegen het probleem aan gooien tot het opgelost is. In andere gevallen kun je beter schakelen en het van een andere kant benaderen. Ik maakte voor het archief een donkere versie (11) en een lichte versie (12) en besloot verder te gaan met andere problemen.

Reizen weergeven

In de eerste versie stonden reizen en locaties op dezelfde lijn. Ik wilde het intuïtiever maken door reizen van punt naar punt als sprongen weer te geven.

Totaalcijfers

Ik wilde de wereldkaart bovenaan houden met mijn huidige locatie, maar ook algemene cijfers aan de pagina toevoegen, zodat je een snelle samenvatting kreeg zonder 30 tijdlijnen door te hoeven. Ik besloot nog een laag structuur toe te voegen en alles op te splitsen in maanden. Elke maand kreeg zijn eigen cijfers, zodat je ze met elkaar kon vergelijken.

Het was fascinerend om te zien hoe mijn gewoontes van maand tot maand veranderden. Sommige maanden zat ik vooral op reis en op vliegvelden, andere keren klom ik veel of zat ik het grootste deel van de dag in koffiezaken. Italiaanse restaurants zakten snel weg toen ik terug was uit New York, vervangen door burrito's.

Responsive worden

Toen ik aan de responsive versie begon, ging het bergafwaarts. De horizontale tijdlijn die op desktop prima werkte, paste niet op een klein scherm. Hij moest verticaal, maar ik wilde niet de functionaliteit van de hele site opofferen voor de mobiele versie. Ik begon de code te herschrijven zodat beide oriëntaties konden draaien en er soepel gewisseld werd als het scherm van formaat veranderde.

De code voor een aparte mobiele versie zonder de desktop te slopen werkte. Nu kon ik mobiel vanaf nul gaan ontwerpen, in plaats van de grote versie in een kleine ruimte te proppen.

Ik werd het zat om steeds met dezelfde oude data te spelen. Het ontwerp kwam er wel, maar er ontbrak nog iets. Ik had een andere omgeving en een nieuw perspectief nodig.

Ik zat te werken in een koffiezaak (Coffee Bar, op 6 mei) toen een vriend me een bericht stuurde.

Perfecte timing.