Wie die Gyroscope App mit React Native entstand
Wie ich 20 Pfund abgenommen habe, während wir unsere iPhone-App gebaut haben
Wir haben vor Kurzem unsere neue iPhone-App veröffentlicht, Health Tracking by Gyroscope. Die App synchronisiert deine HealthKit-Daten mit Gyroscope und gibt dir ein Dashboard, mit dem du alles in deinem Leben im Blick behältst.
Während wir die neue App getestet und verbessert haben, habe ich über 20 Pfund abgenommen. Ich habe meine Daten über zwei Jahre lang getrackt und synchronisiert, aber erst durch den Blick auf meine Daten in Echtzeit konnte ich mein Verhalten ändern und jeden Tag ein bisschen gesünder werden. Der Quantified-Self-Traum.
Unser Ziel war eine App, die Menschen hilft, ihre Daten für ganz praktische Ziele zu nutzen: abnehmen, produktiver sein, wichtige Momente teilen.
Eine App, die das alles schafft, hatte noch niemand gebaut, aber es gab schon großartige Gestaltungsideen an anderer Stelle, die uns einen guten Ausgangspunkt gaben.
Inspiration
Der Feltron Annual Report
Zehn Jahre lang hat Nicholas Felton einen wunderschönen Jahresbericht über sein Leben gemacht. Die Daten hat er das Jahr über penibel erfasst und danach nach verschiedenen Themen ausgewertet und gestaltet. Die früheren Jahrgänge findest du auf feltron.com oder im SF MOMA.
Die Berichte waren ein faszinierendes Fenster in das Leben eines anderen Menschen. Bei uns kamen jeden Tag automatisch sehr ähnliche Daten rein, und ich war schwer gespannt, was für Berichte ich über mich selbst bekommen könnte. Zur Unterhaltung genauso wie um nützliche Muster zu finden und meine Gesundheit zu verbessern.
Web-Analytics
Bei der Arbeit gibt es eine Menge Dashboards und Dienste, auf die ich mich täglich verlasse. Für alles, was geschäftskritisch ist oder Geld bringt, bauen vermutlich Dutzende Firmen Dashboards, mit denen man es verstehen und optimieren kann.
Alle unsere Server sind gut überwacht, damit sie laufen wie gedacht und uns sofort Bescheid geben, wenn etwas schiefgeht. Irgendwann in der (gar nicht so fernen) Zukunft wird es solche Dashboards auch für deinen Körper geben.
Andere Analyse-Werkzeuge wie Google Analytics und Fabric helfen uns, Traffic und andere komplexe Kennzahlen zu verstehen. Große Zahlen, Sparklines, hervorgehobene Ausreißer und ähnliche Gestaltungsmittel machen es leicht, schnell große Datenmengen zu erfassen.
Videospiele
Videospiele setzen Analytics deutlich unterhaltsamer ein und haben oft eine Spielfigur mit Werten wie Level, Gesundheit und Erfahrungspunkten.
Richtig dargestellt ist das ein sehr unterhaltsamer und eingängiger Weg, zu verstehen, wie es dir geht, und dich auf das Richtige zu konzentrieren: am Leben bleiben, aufsteigen, einen Heiltrank nehmen und so weiter.
Menschen stecken Hunderte Stunden hinein, diese virtuellen Zahlen zu verbessern, aber fürs echte Leben gibt es nichts Vergleichbares. Noch nicht…
Codename Magneto
Alle unsere Projekte haben Codenamen von X-Men-Figuren, und diese App hieß „Magneto“.
Anfang 2015 hat Facebook eine coole neue Technologie namens React Native veröffentlicht. Eric war großer React-Fan und hat mit einem einfachen React-Native-Projekt herumprobiert, das Live-Daten aus unserer API geholt und auf einem Screen angezeigt hat.
Die App lief zwar über XCode, aber der Code war größtenteils JavaScript, das ich in Sublime Text oder jedem anderen Editor bearbeiten konnte. Innerhalb weniger Stunden konnte ich Elemente auf der Seite ändern und sie mit einer Flexbox- und CSS-artigen Syntax gestalten. Es war magisch.
Wearables
Ungefähr zur selben Zeit kam die Apple Watch heraus, und es gab viel Begeisterung und viel Verwirrung darum. Am meisten wurde über Apps und Benachrichtigungen auf der Watch geredet, uns haben aber die Gesundheitsfunktionen am meisten begeistert.
Als ich eine getragen habe, hat sie im Hintergrund meinen Puls und meine Schritte gemessen. Ich wollte das mit anderen Daten verbinden, die für meine Gesundheit genauso wichtig waren: Gewicht und Körperfett von meiner Fitbit-Waage, die Musik, die ich auf Spotify gehört habe, und wie viel Zeit ich jeden Tag gearbeitet habe.
Die Health App war auf jedem Handy installiert und hat Basisdaten wie Schritte gemessen. Es gab ein paar einfache Dinge, die ich machen wollte und die mit der bestehenden Health App unmöglich oder sehr umständlich waren.
- Die Pulskurve eines der letzten Workouts sehen
- Eine Übersicht über heute sehen, ohne zu scrollen oder zu klicken
- Leicht sehen, was ich gestern gemacht habe, nicht nur heute
Mahdi, einer unserer ersten Nutzer, der gerade als Vollzeit-Entwickler ins Team gekommen war, hat angefangen, diese HealthKit-Synchronisierung in Objective-C zu bauen.
Die Running App
Während Mahdi die HealthKit-Synchronisierung gebaut hat, habe ich an einer anderen einfachen App gearbeitet, mit der du deine Läufe über verschiedene Filter und Layouts gestalten und teilen konntest.
Als wir diese Lauf-App veröffentlicht haben, haben Tausende Leute damit kreative Bilder ihrer Workouts gepostet. Viele andere haben sich aber beschwert, dass sie keine Läufer sind und deshalb weder etwas von den Karten ihrer Workouts hatten noch sahen, wie viele Donuts an Kalorien sie verbrannt haben.
Wir mussten herausfinden, wie wir dieses Gefühl von Kreativität und Motivation zu allen Gyroscope Nutzern bringen, nicht nur zu den Sportlern. Unsere Lösung: ähnliche Erlebnisse für Dinge bauen, die alle machen. Musik, Herzschläge, Schlaf, Computerzeit, Schritte, Reisen und so weiter.
Ein paar frühe App-Entwürfe
Wir haben angefangen, mobile Dashboards zu gestalten, um all die Informationen in der App zu verdichten. Für die Details haben wir entschieden, alles als quadratische Karte zu bauen, mit einer Reihe anpassbarer Optionen darunter.
Auch das Teilen haben wir ausgebaut und weiter unten auf der Seite prominenter platziert, denn ein großer Teil des Erlebnisses sollte sein, deine größten Erfolge auf Instagram zu posten oder mit Freunden zu teilen.
Weil diese Ansichten so stark von den Daten abhingen, waren die ersten Entwürfe nur ein grober Ausgangspunkt. Das meiste am fertigen Design ist in der echten App entstanden, auf Live-Daten und Grafiken von unseren Servern.
Wochenberichte
Die Tageskarten drehten sich um einen einzelnen Datenpunkt, die Wochenberichte hatten dagegen viel mehr Informationen, konnten einen Überblick geben und Muster hervorheben.
Und währenddessen auf der Website…
Mit neuen Features wie unserer Fitbit-Integration und der HealthKit-Synchronisierung kamen viele neue Gesundheitsdaten rein: Puls, Schritte, Blutdruck, Körperfettanteil. Die ursprüngliche Website drehte sich aber eher um Orte und Fotos. Wir mussten das Web-Erlebnis verbessern, damit die Leute ihre neuen Daten leicht aufnehmen konnten, und haben mit einem meiner Lieblingsdesigner an einem neuen Profil-Theme gearbeitet, Shane Mielke.
Dieses neue Theme sollte ein ernsthafteres Dashboard über all deine Werte sein, und Shane hat ein Dutzend Entwürfe gemacht, bevor uns dieser hier wirklich begeistert hat.
Ein Wendepunkt war, die Inhalte in eingängige Bereiche zu teilen, nach Teilen des menschlichen Körpers. Zuerst war ich nicht sicher, ob das Bild funktioniert, aber es passte ziemlich gut zu allen Daten, die wir hatten, und ließ uns Platz zum Wachsen.
Mit einem 3D-Modell des menschlichen Körpers (Shane hat eine einfache männliche und weibliche Variante gemacht) konnten wir den Körper als Navigation nutzen und jeden Bereich beim Öffnen hervorheben.
Werte zur mentalen Gesundheit wie Schlaf, Produktivität und Computerzeit kamen in den Bereich Gehirn. Später konnten wir Dinge wie Stimmung oder Meditation ergänzen.
Herz-Kreislauf-Werte wie Puls und Blutdruck saßen im Brustbereich, während Fitness-Aktivitäten wie Schritte, Laufen und andere Workouts rund um die Beine kamen.
Jeder Bereich war ein wichtiges Konzept, das sich später mit mehr Details füllen ließ. Wenn wir zum Beispiel irgendwann Food-Tracking ergänzen würden, käme das in die Körpermitte, ohne dass wir alles neu gestalten müssten.
Die Datenstruktur hat überraschend gut funktioniert, also haben wir sie auch in der App weitergeführt. Shane und ich haben mit der mobilen Startseite herumgespielt und für jeden Bereich ein paar Karten auf den Screen gequetscht.
Bis dahin waren die meisten Entwürfe mit erfundenen Daten gemacht. Fast überall gab es einen großen, gut lesbaren Titel und eine Grafik mit den Details. Der nächste Schritt war, es tatsächlich zu bauen und zu sehen, wie nützlich es im echten Leben mit meinen echten Daten ist.
Farben nach Status
Unser Ziel für dieses Dashboard war, dass ein Blick reicht, um die wichtigen Informationen zu erfassen. Große Zahlen und farbige Karten sollten schnell zeigen, ob ein Bereich an diesem Tag „gut“ war.
Wenn die Schritte zum Beispiel unter ein paar Tausend lagen, wurde die Fitness-Karte rot oder orange und erinnerte dich daran, aktiver zu sein. Wenn du dein Ziel erreicht hattest oder gerade aus dem Gym kamst, war sie grün und du konntest dich anderen Dingen widmen. Einen einzelnen Bereich grün zu bekommen ist nicht schwer, die eigentliche Herausforderung war die Balance über alle Bereiche hinweg.
Startbildschirm
Für den ersten Startbildschirm wollte ich etwas Futuristisches, das trotzdem menschlich ist. Dieses Foto hatte ich ein paar Jahre zuvor in Japan gemacht, und es schien das richtige Gefühl zu haben.
Ich habe das Gyroscope Logo und etwas Text daraufgelegt, und damit hatten wir unseren ersten Login-Screen.
Betatests
Mitte September hatten wir einen funktionierenden Prototyp, den Leute nutzen konnten. Wir hatten ihn an uns selbst getestet, aber die große Aufgabe war, dass er für Millionen Menschen weltweit genauso nützlich ist und nicht nur auf uns zugeschnitten.
Wir haben ihn an ein paar Freunde und Pro Nutzer geschickt, als Start unseres Beta-Programms. Dazu gab es eine Facebook-Gruppe für Ankündigungen und schnelles Feedback.
Wenn wir Updates gepostet haben, kam Feedback zurück und half uns, Fehler schnell zu finden. Das alles passierte innerhalb von Stunden oder Minuten und ließ uns schnell weiterarbeiten. Da es eine private Beta war, konnten wir neue Versionen fast sofort ausliefern, ohne auf eine App-Store-Prüfung zu warten.
Bis dahin hatten wir nach eigenem Bauchgefühl und dem Feedback von ein paar wenigen Leuten gestaltet. Jetzt konnten wir Zahlen und Rückmeldungen unserer Nutzer für Entscheidungen nutzen.
Es war unglaublich spannend, von den Erfahrungen einiger unserer ersten Betatester zu hören.
„Gyroscope ist das einzige Produkt, mit dem es leicht ist, mein Leben zu tracken. Ein Blick genügt, und ich weiß, worin ich gerade gut bin und woran ich arbeiten muss. Es vergeht kein Tag, an dem ich nicht in die App schaue.“
– Brandon Littell
Das Testen war viel gemeinsamer, als nur Abstürze und Fehler zu finden. Viele hatten Wünsche und Vorschläge, die uns geholfen haben, uns auf Features zu konzentrieren, die regelmäßig genutzt werden.
Dein Leben auf der Karte
Einer der spannendsten Datenpunkte, die wir haben, sind Standortdaten, entweder über Swarm oder Moves erfasst. Laufen, Radfahren und andere Aktivitäten füllen die Karte mit weiteren Punkten.
Wir haben Mapbox auf unserer Website geliebt und dieselbe Kartentechnik in die App geholt. Zuerst haben wir mit Karten experimentiert, die man zoomen und verschieben kann, uns dann aber schnell für die einfachere Variante entschieden: die Karte als festes Hintergrundbild. Wir rechnen und versuchen, den besten Zoom und den besten Bildausschnitt zu finden, damit alles Wichtige zu sehen ist.
Wer seine Bewegung mit Moves getrackt hat, konnte eine Heatmap aller Wege sehen und wie sich die Zeit verteilt hat. Aus Gesundheitssicht ist es interessant zu sehen, wie viel Zeit man geht und wie viel man fährt. Ich bin danach früher losgegangen und zu mehr Terminen gelaufen.
Manche Ansichten brachten Erkenntnisse zur Fitness, bei anderen ging es eher darum, Reisen zu verstehen oder welche Restaurants man besucht hat.
Push-Benachrichtigungen
Ein Weg, den Alltag der Leute leichter zu machen, war eine einfache Push-Benachrichtigung pro Tag mit ein paar Erkenntnissen.
In den Zeitpunkt und die Sprache dieser Nachricht ist viel Diskussion und Testen geflossen. Zuerst wollte ich sie am Ende des Tages als Rückblick schicken. Aber die Daten brauchten manchmal, bis sie synchronisiert waren, und es bestand die Gefahr, Unvollständiges zu melden. Wir haben uns für 9 Uhr am nächsten Morgen entschieden.
Unsere Priorität ist, das Leben der Nutzer leichter zu machen, auch wenn das Geld kostet oder unsere Wunschzahlen verfehlt. Statt einer geheimnisvollen Nachricht, die zum Öffnen der App zwingt, haben wir alle wichtigen Infos hineingeschrieben, damit die Leute etwas davon haben, ohne die App überhaupt zu öffnen.
„Ich nutze Gyroscope schon eine ganze Weile, aber wirklich wichtig wurde es erst, als ich meine Tochter bekommen habe. Ich liebe, wie meine Daten fürs Fitbleiben geordnet sind und wie detailliert die Auswertung ist. Ganz zu schweigen davon, dass sich für mich immer wieder etwas verbessert. Dem Team liegen seine Nutzer wirklich am Herzen.
Neben dem Überblick über meine allgemeine Gesundheit behalte ich über meine Produktivität auch im Auge, wie fit ich mental bin. Ich arbeite im Schnitt 38–42 Stunden pro Woche an Iris (meinem Startup) und bin Vollzeitmutter. Gyroscope hat mir geholfen, diese Arbeitsstunden so zu steuern, dass eine echte „Balance“ entsteht, und dafür bin ich sehr dankbar. Das Ergebnis? Extreme Produktivität. Früher gingen 40 Stunden Arbeit mit Rumtrödeln drauf. Und heute? Mit einem Baby weißt du nie, wie der Tag läuft, also hole ich wirklich alles aus meiner Zeit heraus…“
– Cat Noone
Monatsberichte
Einmal im Monat gab es einen neuen Monatsbericht, und wir wollten diesen Moment nutzen, um den Fortschritt anzusehen und in sich zu gehen. Ein paar einfache Fragen wollten wir mit diesen Daten beantworten.
Warst du aktiv genug?
Hast du genug geschlafen?
Wie produktiv warst du?
„Als Studentin ist eine gesunde Balance der Schlüssel zum Erfolg. Gyroscope macht die Daten in meinem Leben sichtbar, damit ich Schlaf, Fitness und Produktivität ausbalancieren kann. Wunderschöne Darstellungen und eine super nützliche App!“
– Victoria Spiegel
Abnehmen
Seit dem Start von Gyroscope gut ein Jahr zuvor hatte ich nach und nach ordentlich zugenommen. Ein großes Rätsel war das nicht: Stress, wenig Schlaf und viele lange Nächte mit Arbeit und Snacks haben das bisschen Bewegung, das ich hatte, mehr als aufgehoben.
Eines meiner Ziele mit der App war, dass sie mir beim Abnehmen hilft. Jeden Morgen stelle ich mich auf meine Fitbit Aria Waage und sehe mein Gewicht und meinen Körperfettanteil.
Über den Tag hat Gyroscope mich an diese Werte erinnert. Ich habe ein paar Layouts gebaut, die mich ehrlich halten und meinen Verlauf im Zusammenhang zeigen. Schnell merken und selbst gegensteuern, das war der Schlüssel.
Bis dahin war es leicht, das bis zum Wochenbericht oder bis zum nächsten Blick auf die Website zu verdrängen. In der Zwischenzeit konnte ich jede Menge ungesunde Entscheidungen treffen: ein Uber statt zu Fuß, ein Nachtisch oder ein Keks extra zum Kaffee und so weiter. Mit der Zeit summiert sich das. Es ständig vor Augen zu haben, hat gegen die Lust auf leckere Süßigkeiten jeden Tag geholfen.
Sechs Monate später, kurz vor dem Release der App, habe ich mich gefreut zu sehen, dass ich rund 20 Pfund und 5% Körperfett verloren hatte. Ich hatte nichts groß anders gemacht, aber viele kleine Änderungen und Entscheidungen pro Tag haben zu deutlich mehr Gesundheit geführt. Meine täglichen Schritte waren höher, weil ich überallhin zu Fuß wollte, und jedes Mal, wenn ich die App geöffnet und meinen Fortschritt gesehen habe, war ich motivierter, dranzubleiben.
Viele unserer anderen Betatester haben Ähnliches erlebt. Wir wollen noch vieles ergänzen und verbessern, haben die App aber trotzdem in den App Store gebracht, damit alle damit anfangen können, ihr Leben besser zu machen.