Construire l’app Gyroscope avec React Native
Comment j’ai perdu 20 livres en construisant notre app iPhone
Nous venons de sortir notre nouvelle app iPhone, Health Tracking by Gyroscope. Elle synchronise vos données HealthKit avec Gyroscope et offre un tableau de bord pour suivre tout ce qui se passe dans votre vie.
Pendant que nous testions et améliorions cette app, j’ai fini par perdre plus de 20 livres. Cela faisait plus de deux ans que je suivais et synchronisais toutes mes données, mais c’est seulement en les voyant en temps réel que j’ai commencé à changer mon comportement et à devenir un peu plus sain chaque jour, le rêve du quantified self.
Notre but était de construire une app qui aide les gens à se servir de leurs données pour atteindre des objectifs concrets : perdre du poids, être plus productif, partager les moments importants.
Personne n’avait encore créé une app qui atteignait ces objectifs ambitieux, mais de bons éléments de design existaient déjà ailleurs et nous donnaient un point de départ.
Inspirations
Le rapport annuel de Feltron
Pendant 10 ans, Nicholas Felton a produit un magnifique rapport annuel de sa vie. Les données étaient méticuleusement enregistrées toute l’année, puis analysées et mises en forme autour de différents thèmes. Vous pouvez voir les années précédentes sur feltron.com ou au SF MOMA.
Ces rapports étaient une fenêtre fascinante sur la vie de quelqu’un d’autre. Nous avions beaucoup de données similaires qui arrivaient automatiquement chaque jour, et j’avais très envie de voir quel genre de rapport je pouvais obtenir sur moi-même, à la fois pour le plaisir et pour repérer des motifs utiles et améliorer ma santé.
Les analytics web
Pour le travail, il y a une série de tableaux de bord et de services dont je me sers tous les jours. Tout ce qui est critique ou qui rapporte de l’argent a probablement des dizaines d’entreprises qui construisent des tableaux de bord pour aider à le comprendre et à l’optimiser.
Tous nos serveurs sont bien instrumentés pour vérifier qu’ils tournent comme prévu et nous prévenir tout de suite en cas de problème. Un jour, dans un futur pas si lointain, des tableaux de bord semblables existeront pour votre corps.
D’autres outils comme Google Analytics et Fabric nous aident à comprendre le trafic et d’autres métriques complexes. Grands chiffres, sparklines, valeurs aberrantes mises en évidence et autres éléments de design permettent de lire vite de grandes quantités de données.
Les jeux vidéo
Les jeux vidéo font un usage plus ludique des statistiques, avec souvent un personnage virtuel doté d’attributs comme le niveau, les points de vie et l’expérience.
Bien présenté, c’est une façon très amusante et très intuitive de comprendre où l’on en est et de se concentrer sur les bonnes choses : rester en vie, monter de niveau, boire une potion de soin, etc.
Les gens passent des centaines d’heures à améliorer ces chiffres virtuels, mais rien de tel n’existe pour la vraie vie. Pour l’instant…
Nom de code Magneto
Tous nos projets portent des noms de code de personnages de X-Men, et cette app a été baptisée « Magneto ».
Début 2015, Facebook a sorti une technologie très intéressante appelée React Native. Eric était un grand fan de React et a commencé à bidouiller un projet React Native basique, qui allait chercher des données en direct dans notre API pour les afficher à l’écran.
L’app tournait via XCode, mais le code applicatif était surtout du JavaScript que je pouvais éditer dans Sublime Text ou n’importe quel éditeur de texte. En quelques heures, je pouvais modifier des éléments de la page et les styler avec une syntaxe proche de Flexbox et du CSS. C’était magique.
Les objets connectés
À peu près au même moment, l’Apple Watch est sortie, dans beaucoup d’enthousiasme et de confusion. On parlait surtout des apps et des notifications sur la Watch, mais c’étaient les fonctions santé qui nous emballaient le plus.
Une fois que j’ai commencé à en porter une, elle suivait ma fréquence cardiaque et mes pas en arrière-plan. Je voulais combiner ça avec d’autres données tout aussi importantes pour ma santé : le poids et la masse grasse de ma balance Fitbit, la musique que j’écoutais sur Spotify, le temps que je passais à travailler chaque jour.
L’app Health était installée sur tous les téléphones et mesurait quelques données de base comme les pas. Il y avait quelques choses simples que je voulais pouvoir faire, impossibles ou très pénibles avec l’app Health de l’époque.
- Voir le graphique de fréquence cardiaque d’une séance récente
- Voir un aperçu des infos du jour sans faire défiler ni cliquer
- Voir facilement ce que j’avais fait hier, et pas seulement aujourd’hui
Mahdi, qui faisait partie de nos premiers utilisateurs et venait de rejoindre l’équipe comme ingénieur à plein temps, s’est mis à construire cette synchronisation HealthKit en Objective-C.
L’app de running
Pendant que Mahdi construisait la synchronisation HealthKit, je me suis mis à une autre petite app qui permettait de personnaliser et de partager ses courses avec différents filtres et mises en page.
Quand nous avons sorti cette app de running, des milliers de gens s’en sont servis pour publier des images créatives de leurs séances. Mais beaucoup d’autres se sont plaints : ils ne couraient pas, et ne pouvaient donc pas profiter des cartes de leurs séances ni voir combien de donuts de calories ils avaient brûlés.
Il fallait trouver comment apporter ce même sentiment de créativité et de motivation à tous les utilisateurs de Gyroscope, pas seulement aux sportifs. Notre solution : construire des expériences semblables autour de ce que tout le monde fait, la musique, les battements de cœur, le sommeil, l’activité sur l’ordinateur, les pas, les déplacements, etc.
Quelques maquettes des débuts
Nous avons commencé à dessiner des tableaux de bord mobiles pour condenser toute l’information dans l’app. Pour le détail, nous avons décidé de tout présenter sous forme de carte carrée, avec une série d’options personnalisables en dessous.
Le partage a aussi pris plus de place en bas de la page, puisqu’une grande partie de l’expérience consistait à publier ses plus belles réussites sur Instagram ou à les partager avec ses amis.
Comme ces vues dépendaient énormément des données, les premières maquettes ne donnaient qu’un point de départ grossier. La plupart des designs définitifs se sont décidés dans la vraie app, sur les données et les graphiques en direct venant de nos serveurs.
Les rapports hebdomadaires
Les cartes quotidiennes se concentraient sur une seule donnée, alors que les rapports hebdomadaires contenaient bien plus d’informations et pouvaient donner une vue d’ensemble et faire ressortir des motifs.
Pendant ce temps, sur le site…
Avec les nouvelles fonctions comme l’intégration Fitbit et la synchronisation HealthKit, beaucoup de nouvelles données de santé arrivaient, fréquence cardiaque, pas, tension, pourcentage de masse grasse, alors que le site d’origine était surtout centré sur les lieux et les photos. Il fallait améliorer l’expérience web pour que chacun puisse lire facilement ses nouvelles données, et nous avons commencé un nouveau thème de profil web avec l’un de mes designers préférés, Shane Mielke.
Ce thème devait être un tableau de bord plus sérieux de toutes vos stats, et Shane a proposé une douzaine de maquettes avant que celle-ci ne nous emballe vraiment.
L’un des tournants a été de découper le contenu en sections intuitives, par parties du corps humain. Au début je n’étais pas sûr que la métaphore fonctionne, mais elle collait plutôt bien à toutes nos données, et nous laissait de la place pour grandir.
Avec un rendu 3D du corps humain (Shane en a fait une version masculine et une version féminine, simples), nous pouvions utiliser le corps comme structure de navigation et éclairer chaque zone à son ouverture.
Les stats de santé mentale, sommeil, productivité, temps passé sur l’ordinateur, allaient dans la zone du cerveau. Plus tard, nous pourrions y ajouter l’humeur ou la méditation.
Les stats cardiovasculaires comme la fréquence cardiaque et la tension seraient rangées au niveau du torse, tandis que les activités physiques, pas, course et autres séances, iraient du côté des jambes.
Chaque zone était un concept important que l’on pourrait remplir plus tard. Par exemple, si nous ajoutions un jour le suivi des repas, cela irait dans la zone du ventre sans avoir à tout redessiner.
Cette structure de données a étonnamment bien marché, alors nous avons décidé de la reprendre dans l’app. Shane et moi avons commencé à jouer avec l’écran d’accueil mobile, en tassant quelques cartes de chaque section à l’écran.
Jusque-là, la plupart de ces maquettes étaient faites avec des données fictives. La plupart reposaient sur un grand titre bien lisible et un graphique montrant le détail des données. L’étape suivante était de le construire pour de vrai et de voir à quel point c’était utile au quotidien avec mes propres données.
Un code couleur selon l’état
Notre objectif pour ce tableau de bord était de rendre l’information pertinente extrêmement facile à saisir d’un coup d’œil. Les grands chiffres et les cartes en code couleur donnaient tout de suite une idée de ce qui était « bon » pour la journée.
Par exemple, si les pas ne dépassaient pas quelques milliers, la carte fitness passait au rouge ou à l’orange pour vous rappeler de bouger. Si vous atteigniez votre objectif ou rentriez de la salle, elle passait au vert et vous pouviez passer à autre chose. Une section isolée n’est pas très difficile à faire passer au vert, mais le défi est devenu de trouver le bon équilibre entre toutes.
L’écran de lancement
Pour le premier écran de lancement, je voulais quelque chose de futuriste mais qui reste humain. J’avais pris cette photo au Japon deux ans plus tôt et elle avait l’air d’avoir la bonne émotion.
J’y ai posé le logo Gyroscope et un peu de texte, et nous avions notre premier écran de connexion.
La bêta
À la mi-septembre, nous avions un prototype fonctionnel que les gens pouvaient utiliser. Nous l’avions testé sur nous-mêmes, mais le vrai défi était qu’il soit aussi utile pour des millions de personnes dans le monde, et pas seulement taillé pour nous.
Nous avons décidé de l’envoyer à quelques amis et utilisateurs Pro pour lancer notre programme bêta. Un groupe Facebook a été créé en parallèle pour publier les annonces et récolter facilement des retours.
À chaque publication, les utilisateurs envoyaient leurs retours et nous aidaient à trouver vite les bugs. Tout cela se passait en quelques heures ou quelques minutes et nous permettait d’itérer rapidement. Comme c’était une bêta privée, nous pouvions sortir de nouvelles versions presque instantanément, sans attendre la validation de l’App Store.
Jusque-là nous concevions à partir de nos propres intuitions et des retours de quelques personnes, mais nous pouvions désormais nous appuyer sur davantage de statistiques et de retours d’utilisateurs pour décider.
Cela a été extrêmement enthousiasmant d’entendre l’expérience de nos premiers bêta-testeurs.
« Gyroscope est le seul produit qui rend le suivi de ma vie facile. D’un coup d’œil, je vois où j’excelle et ce sur quoi je dois travailler. Je ne passe pas une journée sans ouvrir l’app. »
– Brandon Littell
Les tests ont été bien plus collaboratifs qu’une simple chasse aux plantages et aux bugs. Beaucoup de gens avaient des demandes et des suggestions qui nous ont aidés à nous concentrer sur les fonctions réellement utilisées.
Cartographier votre vie
L’une des données les plus intéressantes que nous ayons est la localisation, enregistrée par Swarm ou par Moves. La course, le vélo et d’autres activités ajoutent encore des points sur la carte.
Nous adorions utiliser Mapbox sur notre site et avons décidé d’employer la même technologie dans l’app. Nous avons d’abord essayé des cartes que l’on pouvait zoomer et déplacer, puis vite décidé de simplifier et d’utiliser les cartes comme un décor fixe. C’est nous qui ferions les calculs pour trouver le meilleur niveau de zoom et le bon cadrage pour tout voir.
Ceux qui utilisaient Moves pour suivre leurs déplacements voyaient une carte de chaleur de tous les endroits où ils étaient allés et la répartition de leur temps. Du point de vue de la santé, il est intéressant de voir le temps passé à marcher par rapport au temps passé en voiture. J’ai commencé à partir plus tôt et à me rendre à pied à davantage de rendez-vous.
Certaines vues donnaient des enseignements sur la forme, d’autres portaient plutôt sur les voyages ou sur le type de restaurants fréquentés.
Les notifications push
L’une des façons de faciliter la vie des gens était d’envoyer chaque jour une simple notification avec quelques enseignements.
Le moment et la formulation du message ont demandé beaucoup de discussions et de tests. Au départ je voulais l’envoyer en fin de journée, comme un récapitulatif. Mais les données mettaient parfois du temps à se synchroniser, avec le risque d’annoncer des chiffres incomplets. Nous avons choisi 9 h le lendemain matin.
Notre priorité est de faciliter la vie de l’utilisateur, même au détriment de nos revenus ou de nos objectifs chiffrés. Plutôt qu’un message mystérieux qui force à ouvrir l’app, nous avons mis toutes les infos utiles dedans, pour que les gens en tirent de la valeur sans même ouvrir l’app.
« J’ai commencé à utiliser Gyroscope il y a un moment, mais c’est à la naissance de ma fille que c’est devenu important pour moi. J’adore la façon dont mes données de forme sont organisées et le détail que je reçois. Sans parler du fait que j’ai toujours l’impression que quelque chose de nouveau s’améliore dans mon expérience. L’équipe tient vraiment à ses utilisateurs.
En plus d’avoir une vue d’ensemble de ma santé, je garde aussi un œil sur ma forme mentale en surveillant mon niveau de productivité. Je travaille en moyenne 38 à 42 heures par semaine sur Iris (ma startup) et je suis maman à plein temps. Gyroscope m’a aidée à gérer ces heures de travail pour trouver un vrai « équilibre », et je lui en suis très reconnaissante. Le résultat ? Une productivité extrême. Avant, 40 heures de travail partaient en n’importe quoi. Maintenant ? On ne sait jamais comment une journée va se passer avec un bébé, alors je tire vraiment le meilleur de mon temps… »
– Cat Noone
Le rapport mensuel
Une fois par mois arrivait un nouveau rapport mensuel, et nous voulions profiter de ce moment pour faire le point et prendre du recul. Il y avait quelques questions simples auxquelles nous espérions répondre avec ces données.
Avez-vous été assez actif ?
Avez-vous assez dormi ?
À quel point avez-vous été productif ?
« Quand on est étudiant, garder un bon équilibre est la clé de la réussite. Gyroscope m’aide à visualiser les données de ma vie pour équilibrer sommeil, sport et productivité. De superbes visualisations et une app très utile ! »
– Victoria Spiegel
La perte de poids
Depuis le début de Gyroscope, un an plus tôt, j’avais pris beaucoup de poids petit à petit. Ce n’était pas un grand mystère : la combinaison du stress, du peu de sommeil et des nombreuses nuits de travail à grignoter annulait largement le peu d’exercice que je faisais.
Un de mes objectifs avec l’app était qu’elle m’aide à perdre du poids. Chaque matin, je monte sur ma balance Fitbit Aria pour voir mon poids et ma masse grasse.
Tout au long de la journée, Gyroscope me rappelait ces chiffres. J’ai construit quelques mises en page pour rester honnête avec moi-même et remettre mon historique récent en contexte. Remarquer vite et se corriger soi-même, voilà la clé.
Jusque-là, il était facile de ne plus y penser jusqu’au rapport hebdomadaire ou à une visite occasionnelle sur le site. Entre-temps, je pouvais prendre plein de mauvaises décisions, un Uber au lieu d’y aller à pied, un dessert ou un cookie de plus avec le café, etc., qui s’accumulaient avec le temps. Une conscience permanente m’a aidé à contrer l’envie de sucreries quotidiennes.
Six mois plus tard, alors que l’app allait sortir, j’ai eu la joie de voir que j’avais perdu environ 20 livres et 5 % de masse grasse. Je n’avais rien fait de très différent, mais une série de petits changements et de décisions quotidiennes m’avaient rendu bien plus sain. Mes pas quotidiens avaient augmenté à force de marcher partout, et chaque fois que j’ouvrais l’app et voyais mes progrès, j’étais plus motivé à garder l’élan.
Beaucoup de nos autres bêta-testeurs ont vécu des histoires semblables. Il reste plein de choses à ajouter et à améliorer, mais nous l’avons sortie sur l’App Store pour que tout le monde puisse commencer à s’en servir pour améliorer sa vie.