Dieser Beitrag handelt von unserer früheren, inzwischen eingestellten Lauf-App.
Wie Gyroscope Running entstand
Codename Quicksilver: unsere erste iPhone-App mit React Native
Wir haben vor Kurzem eine neue experimentelle iPhone-App veröffentlicht: Running by Gyroscope. Damit machst du schöne Bilder, um deinen letzten Lauf zu teilen. Das ist die Geschichte, wie wir die App gestaltet haben, mit welchen Werkzeugen wir sie gebaut haben und was wir dabei gelernt haben.
Die App läuft mit zwei unserer beliebtesten Integrationen, Runkeeper und Strava. Die beiden tracken deine Aktivität hervorragend. Nach einem Lauf synchronisiert Gyroscope die Rohdaten automatisch. Danach kommt der Spaß: Du wählst die Geschichte, die du erzählen willst.
Eine Satellitenkarte deiner schönen Route? Vielleicht ein Foto vom atemberaubenden Sonnenuntergang? Oder die Tatsache, dass der Lauf 7 Donuts entsprach? Vielleicht war dein Puls richtig hoch und genau das willst du zeigen. Du entscheidest.
Kapitel 1
März 2015
Wir hatten gerade die Gyroscope-Website gestartet. Das System lief prima. Meine Läufe wurden sofort synchronisiert und tauchten auf aprilzero.com auf, mit allen Werten und sogar Infos wie der Musik, die ich auf Spotify gehört hatte.
Wir hatten ein schönes Dashboard gebaut, aber teilen konnte man nur, indem man jemandem das Ganze schickte.
Unsere nächsten großen Aufgaben waren Mobile und Teilen.
An einem Nachmittag im März bin ich auf die Twin Peaks gelaufen. Es war ein klarer, schöner Tag, beide Brücken in der Ferne zu sehen.
Als ich über die Stadt schaute, wollte ich diesen Moment irgendwie teilen. Ich hatte alles getrackt und in Zahlen: die Höhenmeter, meinen Puls, die Route dorthin, die Musik, die ich hörte, und was ich sah (als Foto), aber es gab keine Möglichkeit, das alles wieder zu meinem Erlebnis zusammenzusetzen.
Ich stellte mir eine Augmented-Reality-Ansicht meiner Route den Berg hinauf vor. Mir kam die Idee einer teilbaren Karte, die meine Vitalwerte und meinen Standort über das Foto legt, das ich gemacht hatte. All diese Infos steckten schon in Gyroscope, sie mussten nur ordentlich gestaltet werden.
Ich beschloss, dass daraus ein schönes Instagram-Foto würde, und rannte den ganzen Weg nach Hause, gespannt darauf, es auszuprobieren.
Kapitel 2
Erst mal so tun, bis es echt ist
Kaum zu Hause, öffnete ich Photoshop und zog ein paar meiner Fotos hinein. Ich ergänzte die Kartendaten von meinem Lauf und kombinierte sie mit ein paar Werten zu einer einfachen Infografik. Irgendwann würden wir vielleicht ein schönes automatisches Werkzeug haben, aber vorerst ging es schneller, alles von Hand zu bauen.
Die Basisdaten wie Stadt und Distanz setzte ich in die Ecke. Die Textfarbe (Türkis) nahm ich aus dem Foto auf und markierte, wo das Foto entstanden war. Ein paar Stunden später bekam das gepostete Foto jede Menge Likes. Die Leute fragten, wie es gemacht war.
Ich beschloss, dieses Experiment weiterzuführen, nach jedem Lauf Bilder von Hand zu bauen und neue Designs zu probieren.
In den nächsten Wochen machte ich nach jedem Lauf weiter neue Bilder zum Teilen. Ich spielte mit verschiedenen Kartenstilen und ergänzte Details wie Musik, Wetter oder Puls. Diese kleinen Extras gaben dem Lauf mehr Tiefe und mehr Dimensionen, und den Leuten schien es zu gefallen.
Ich freute mich richtig auf die kreative Übung, nach jedem Lauf eine Karte zu bauen und zu teilen. Zusammen mit den Endorphinen wurde das ziemlich süchtig machend. Es kamen viele neue Ebenen von Kreativität und Erzählung dazu: die Fotos durchsehen, verschiedene Ansichten meiner Route betrachten, schöne Akzentfarben wählen und so weiter.
Es verband gleich mehrere meiner Lieblingssachen: Fotografie, Laufen und Aufmerksamkeit bekommen.
Ein paar Werte und ein Logo auf dem Foto verwandelten es aus einem bloßen Foto in Grafikdesign oder sogar Kunst. Komposition und Form aller Elemente konnten zusammen etwas ergeben, das viel mehr war als die Summe seiner Teile.
Auch unterwegs machte mir das Spaß. Die Karten waren eine schöne Art, die verschiedenen Orte festzuhalten, an denen ich war, ein bisschen wie Postkarten.
Verschiedene Datenpunkte wie Musik oder Karten an- und auszuschalten erzählte aus demselben Material eine andere Geschichte. Bei einem harten Lauf nahm ich zum Beispiel meinen Puls dazu. War es ein besonders heißer oder kalter Tag, war das Wetter ein interessanter Wert. Gab es einen schönen Sonnenuntergang oder Ausblick, gab das meist einen guten Hintergrund ab. War die Landschaft spannend, hob eine Satellitenansicht sie hervor.
Nach ein paar Monaten mit diesem Experiment war mir klar, dass daraus ein ziemlich großartiges Produkt werden könnte. Ich wollte es selbst haben, und viele andere hatten Interesse angemeldet, es ebenfalls zu nutzen.
Ich fing an, Konzepte zu skizzieren und meine Experimente auf ein paar der besten Layouts einzudampfen.
Kapitel 3
Die App gestalten
Wenn ich mit einem neuen Design anfange, schreibe ich gern die Ziele auf. Die richtigen Ziele zu wählen ist oft wichtiger und schwerer, als etwas schön aussehen zu lassen. Für Quicksilver gab es ein paar Leitlinien, die mir wichtig waren. Sie würden jeden Pixel und jede Zeile Code bestimmen, die wir schreiben.
- So viele Likes wie möglich bekommen
- Deinen letzten Lauf sofort sehen
- Das Anpassen soll Spaß machen
Design für maximale Resonanz
Um möglichst viele Likes zu bekommen, brauchten wir den richtigen visuellen Pfiff, den richtigen Fokus und den richtigen Kontext, damit es bei anderen ankommt. Zu erkennen, wer unsere Zielgruppe ist, die breite Öffentlichkeit und nicht nur andere Sportler, hat vieles geprägt und uns stark von allen anderen unterschieden.
Die meisten Apps hatten detaillierte Werte, um die Leistung zu verbessern. Für eine Freundin, die nicht läuft, ist das aber viel weniger spannend. Sie sieht wahrscheinlich lieber, dass es 5 Donuts entsprach, und gibt dir einen Daumen hoch. Oder ein schönes Foto vom Gipfel des Bergs, den du mühsam erklommen hast.
Wir haben versucht, jede Layout-Option als eigene Marke zu bauen, mit eigenem Namen und Icon. Das war das Kernstück der App und musste extrem naheliegend sein und Spaß machen.
Nach ein paar verschiedenen Ideen landeten wir bei den Layouts in einer langen Liste unten. Es machte richtig Freude, durch die Layouts zu blättern und eines auszuwählen.
Es fühlte sich an wie Instagram-Filter fürs Laufen
Startbildschirm
Weil Fotografie und Inhalte der Nutzer ein großer Teil der App waren, wollte ich, dass sich das gleich beim Öffnen zeigt.
Ich suchte nach schönen Fotos für den Hintergrund. Mein Freund Adam, einer der besten Fotografen, die ich kenne, ließ uns freundlicherweise eine seiner Aufnahmen vom Mt. Tam verwenden.
Als ich es in die App gesetzt hatte, war ich sofort verliebt. Es war genau das Gefühl von Ruhe und Natur, das den richtigen Ton für den Rest der App setzte.
Eigenständige App
Eine der größten Designentscheidungen war, daraus eine eigene App nur fürs Laufen zu machen. Ich wollte das Wort „Running“ auf meinem Homescreen sehen und sofort an meine Inhalte kommen.
Wenn wir später mehr könnten, etwa Radfahren oder Schwimmen, sollten Leute nur das installieren, was sie wollen. Ich wollte vermeiden, dass alles zuwuchert und unter Navigationsebenen verschwindet.
Aktivitäts-Feed
Die meisten anderen Lauf-Apps brauchen das Aufzeichnen an prominenter Stelle, aber da wir das nicht hatten, konnten wir dafür sorgen, dass die Inhalte immer im Vordergrund stehen. Alles außer den letzten Läufen verschwand in einer Seitenleiste.
Wir haben mit verschiedenen Stilen und Bildern für jeden Lauf gespielt. Gestapelte Karten oder ein Haufen Kacheln. Nach Experimenten mit unterschiedlicher Informationsdichte brauchten die großen Varianten am Ende zu viel Platz. Nach ein paar Minuten in der App merkte ich, dass ich zu weit hineingezoomt war und den Überblick nicht bekam, den ich wollte. Auf der Website funktionierte die Ansicht ziemlich gut, also haben wir dieselben Balken wiederverwendet, farblich nach Tempo.
Ich habe den schnellsten & den längsten Lauf in den Kopfbereich gesetzt, damit sie ohne Scrollen immer greifbar sind. Das war eine freundliche Herausforderung: Jedes Mal beim Öffnen der App hatte ich die Chance, meinen eigenen Rekord zu schlagen. Wenn jemand einen Marathon gelaufen ist oder etwas richtig Beeindruckendes geschafft hat, sollte er es immer griffbereit haben.
Der ständig weiterlaufende Alterszähler von der Seite war sehr beliebt, deshalb haben wir hier einen ähnlichen Zähler ergänzt, der die Zeit seit deinem letzten Lauf zeigt. Je höher die Zahl, desto motivierter, so die Hoffnung.
Kapitel 4
Der Donut-Zähler
In diesem Sommer arbeiteten wir im Büro von True Ventures in San Francisco. Eines Tages brachte jemand ein paar Schachteln Donuts mit. Nach dem Mittagessen schnitt sie jemand, Phil Black, wenn ich mich richtig erinnere, in Achtel und sagte, kleine Stücke zählen nicht. Mir war klar, dass das wissenschaftlich nicht stimmt, aber ich fing an, die verschiedenen Sorten zu probieren.
Während ich da saß, an einer Lauf-App arbeitete und ein Viertel eines glasierten Buttermilch-Donuts aß, fragte ich mich, wie weit ich abends laufen müsste, um den Snack wieder auszugleichen. Nach etwas Googeln fand ich heraus, dass ein durchschnittlicher Donut etwa 200 Kalorien hat und die Kalorien eines Laufs sich ungefähr so berechnen: (Gewicht × 0,75 × Distanz).
Läufe ohne Kartendaten, etwa auf dem Laufband oder von Fitbit getrackt, machten uns viel Ärger. Die App stützte sich bei allen Ansichten auf Karten, wir brauchten also eine flexiblere Alternative.
Während ich da saß und für meine verschiedenen Läufe rechnete, wurde mir zweierlei klar: Ich hatte keine Ahnung, wie viele Donuts in den meisten meiner Läufe steckten, und es machte ziemlich Spaß, das herauszufinden.
Und so war der Donut-Zähler geboren.
Wir würden ein bisschen rechnen, um eine ungefähre Donut-Zahl zu bekommen, ob ein kurzer Lauf für nur 1 Donut oder ein richtig langer. Den Rest des Tages verbrachte ich damit, Stockfotos von schönen Donuts in allen Mengen von 1 bis 6 zu suchen.
Kapitel 5
Beta-Test
Als eine erste Version der App lief, schickte ich Einladungen an die stärksten Läufer auf der Seite, Leute mit über hundert aufgezeichneten Läufen. Ich war baff und beeindruckt, dass einige viele tausend Läufe in ihrem Account hatten.
Ich lief gern, war aber weit von ihrem Niveau entfernt. Ihr Feedback und ihre Vorschläge waren genau das, was wir brauchten, um daraus ein großartiges Produkt zu machen.
Anfangs schrieb ich einfach von Hand E-Mails. Die Leute antworteten mit Fehlern oder Vorschlägen, und ich versuchte, im Kopf zu behalten, wer was gesagt hatte.
Dann schlug jemand vor, eine Facebook-Gruppe einzurichten, so wie er es bei anderen Beta-Tests gemacht und als sehr nützlich erlebt hatte. Ich richtete eine neue private Gruppe ein und schickte den Link an ein paar unserer besten Tester. Mit der Zeit wuchs sie auf über hundert Leute, viele davon liefen täglich und nutzten die App.
Wir bekamen nicht nur jede Menge Fehlermeldungen und Vorschläge, manche fingen sogar an, Entwürfe für das zu bauen, was sie sich wünschten.
Wir konnten neue Features gemeinsam durchdenken, sie an alle in der Gruppe ausliefern und sie schnell mit echten Inhalten sehen.
Kapitel 6
Werkzeuge & Kniffe
Wir haben bei Gyroscope ein großartiges Team, das sich für diese App richtig ins Zeug gelegt hat (danke Mahdi, Eric, Robbie!), aber wir hatten auch viel Hilfe von außen. Hier ein paar tolle Werkzeuge und Produkte, die für uns unbezahlbar waren und uns viel Entwicklungszeit gespart haben.
React Native
Ich komme vom Web, deshalb fühlte sich Javascript mit einem Layout-System im Stil von CSS und Flexbox sehr vertraut an. Ich hatte vorher iPhone-Apps gestaltet, aber nie für eine Code geschrieben. Ohne React Native hätte ich warten müssen, bis jemand anderes die Entwicklung übernimmt. Ein Nebenprojekt wie dieses wäre wahrscheinlich nie losgegangen.
Brent Vatne, einer unserer ersten Beta-Tester, hat auch an React Native mitgearbeitet und uns enorm geholfen, wenn wir feststeckten oder Fragen hatten, die noch nicht in der Doku standen. Danke, Brent!
Seit unserem Start hat sich React stark verbessert. Jede neue Version, von etwa 0.3 bis 0.12 zum Launch, hat die Performance gesteigert und Probleme behoben, mit denen wir zu kämpfen hatten.
Es braucht noch Arbeit (ich hätte gern eine bessere Animations-Performance), wird aber sehr schnell besser. Zumindest für unsere sehr einfache Anwendung hat es die Aufgabe erledigt und uns viel schneller vorankommen lassen, als es sonst möglich gewesen wäre.
Das Live-Reloading von React Native übers Netzwerk machte es möglich, neue Ideen im Minutentakt auszuprobieren oder Kleinigkeiten nachzujustieren. Heute kann ich mir nicht mehr vorstellen, jedes Mal neu kompilieren und auf Änderungen warten zu müssen.
Mapbox
Mapbox macht fantastische Kartenwerkzeuge, die wir überall auf unserer Seite nutzen. Im Editor lassen sich Stil und Farbe anpassen. Damit haben wir verschiedene Stile gebaut, unter anderem dieses dunkle, minimale Kartenset.
Zuerst haben wir mit ihrer iOS-GL-Umsetzung gespielt, dann aber gemerkt, dass wir gar nicht wollen, dass Leute die Karte verschieben oder zoomen. Um es einfach zu halten, haben wir unsere bestehende Web-Umsetzung in einer Webview wiederverwendet und so den Code behalten, den wir monatelang getestet und verbessert hatten.
Imgix
Eine der Besonderheiten unserer App ist, dass sich der Stil der Karte nach dem Foto richtet. Imgix hilft uns, die Farbpalette zu analysieren, damit wir Text und andere Elemente in passenden und ergänzenden Farben setzen können.
Wir nutzen Imgix auch für Effekte, etwa um das Bild aufzuhellen oder weichzuzeichnen. Fotos in der Cloud zu verarbeiten heißt, dass es am Anfang etwas Zeit kostet, die Nutzerin muss das Foto hochladen, statt alles lokal auf dem Handy zu machen, und manchmal dauert es eine Minute, es hochzuladen und das bearbeitete Foto wieder herunterzuladen, aber dieser Kompromiss war es wert, für die Zeit, die es uns spart, und die zusätzlichen Möglichkeiten.
Fabric von Twitter
Wir haben angefangen, Fabric/Crashlytics zu nutzen, um Abstürze zu verfolgen. In den frühen Tagen der App stürzte sie oft ab. Mit der Zeit haben wir alle Abstürze behoben, aber ich habe das Dashboard trotzdem weiter für unsere Nutzungszahlen verwendet.
Ich hatte vor, Analytics einzurichten, aber es stellte sich heraus, dass fast alles, was wir brauchten, schon in diesem Dashboard steckte. Am liebsten sah ich, wer gerade aktiv ist, aber auch andere Zahlen wie monatlich aktive Nutzer (MAU), das Verhältnis DAU/MAU und die Bindungsraten waren sehr aufschlussreich.
Wenn wir während der Beta etwas an der App änderten, sahen wir tatsächlich, wie sich Zeit pro Session, Bindungsraten und so weiter veränderten. Push-Benachrichtigungen mit Parse haben viel gebracht, um Leute zurückzuholen und sie zur richtigen Zeit wiederkommen zu lassen.
Parse
In den frühen Versionen mussten die Leute die App selbst öffnen und nachsehen, ob ihr letzter Lauf geladen war. Als wir anfingen, mit Parse eine Push-Benachrichtigung für neue Läufe zu schicken, ging unsere Bindung steil nach oben.
Kapitel 7
77 Donuts
Eines Tages scrollte ich durch unsere Erwähnungen auf Instagram. Da waren ein paar Fotos von Sonnenuntergängen, und dann sah ich jemanden, der offenbar einen Lauf über 77 Donuts gemacht hatte.
Sicher war da ein Fehler in meiner Kalorienrechnung, oder jemand hatte falsche Daten hochgeladen. Vielleicht war eine Radtour versehentlich als Lauf markiert?
Ich klickte und googelte den „Fat Dog“, den Nate erwähnt hatte. Offenbar ist das ein Ultramarathon über 120 Meilen in Kanada, angeblich einer der härtesten der Welt. Wow!
Ich habe seinen Post in unserer Beta-Gruppe geteilt. Nates großartiger Lauf brachte mich auf den Wunsch, solche besonderen Läufe für alle sichtbar zu machen.
Wir haben ein paar Sachen in der Seitenleiste ergänzt: einen Feed mit ausgewählten Läufen und eine Liste von Freunden, die kürzlich gelaufen sind.
Nates Rekord steht bis heute, 77 ist immer noch die höchste Donut-Zahl, die jemand auf Gyroscope getrackt hat. Seit diesem Projekt habe ich allerdings gelernt, Menschen nie zu unterschätzen. Die nächste Version unterstützt sicherheitshalber dreistellige Zahlen.
Kapitel 11
Was kommt als Nächstes?
Wir haben die App im App Store veröffentlicht & viele Leute nutzen sie, um ihr Leben zu tracken und zu teilen.
Tatiana hat fast 40 Pfund abgenommen, indem sie all ihre Schritte getrackt und geteilt hat.
Dan Grant fährt kreuz und quer durch England Rad, um sich nach einem Herzinfarkt zu erholen und gesund zu bleiben.
Was wir mit Running gelernt haben, ist in die neue Gyroscope-App eingeflossen, die die ganze Geschichte deines Lebens zeigt. Auch sie steckt in React Native, du kannst nachlesen, wie wir sie gebaut haben, oder dir die App im App Store holen.