Cet article parle de notre ancienne app de course, aujourd’hui abandonnée.
La fabrication de Gyroscope Running
Nom de code Quicksilver : notre première app iPhone en React Native
Nous avons récemment sorti une nouvelle app iPhone expérimentale, Running by Gyroscope. Elle permet de créer de belles images pour partager votre dernière course. Voici l’histoire de sa conception, des outils utilisés pour la construire et de ce que nous avons appris en chemin.
L’app s’appuie sur deux de nos intégrations les plus populaires, Runkeeper et Strava. Elles font un travail formidable pour suivre votre activité. Après une course, Gyroscope synchronise automatiquement les données brutes. Ensuite, à vous de vous amuser et de choisir l’histoire que vous voulez raconter.
Une vue satellite de votre parcours ? Peut-être une photo que vous avez prise d’un coucher de soleil à couper le souffle ? Ou le fait que cela équivalait à 7 donuts ? Peut-être que votre fréquence cardiaque était très élevée et que vous voulez le mettre en avant. C’est vous qui choisissez.
Chapitre 1
Mars 2015
Nous venions de lancer le site Gyroscope. Le système marchait très bien. Mes courses se synchronisaient instantanément et apparaissaient sur aprilzero.com, avec toutes mes statistiques et même des informations comme la musique que j’écoutais sur Spotify.
Nous avions construit un beau tableau de bord, mais la seule façon de partager était d’envoyer le tout à quelqu’un.
Nos deux grands défis suivants étaient le mobile et le partage.
Un après-midi de mars, je suis allé courir jusqu’aux Twin Peaks. La journée était claire et magnifique, les deux ponts visibles au loin.
En regardant la ville, j’ai eu envie de partager ce moment. J’avais tout suivi et quantifié : le dénivelé, ma fréquence cardiaque, l’itinéraire emprunté, la musique que j’écoutais et ce que je voyais (avec une photo), mais il n’existait aucun moyen de recomposer tout cela en une expérience.
J’ai imaginé une vue en réalité augmentée de mon parcours jusqu’au sommet. L’idée d’une carte partageable m’est venue, superposant mes constantes et ma position à la photo que j’avais prise. Toutes ces informations étaient déjà dans Gyroscope : il ne manquait qu’un vrai travail de design.
Je me suis dit que ça ferait une belle photo Instagram, et je suis rentré en courant, impatient d’essayer.
Chapitre 2
Faire semblant jusqu’à ce que ça marche
Dès mon retour, j’ai ouvert Photoshop et glissé quelques photos que j’avais prises. J’ai ajouté les données de carte de ma course et je les ai combinées à quelques statistiques pour créer une infographie simple. Un jour nous aurions peut-être un bel outil automatique, mais pour l’instant c’était plus rapide de tout faire à la main.
J’ai placé les données de base comme la ville et la distance dans un coin. J’ai pris la couleur du texte (turquoise) directement dans la photo et ajouté un repère à l’endroit où elle avait été prise. Quelques heures plus tard, la photo que j’avais publiée récoltait un tas de likes. Les gens demandaient comment elle avait été faite.
J’ai décidé de poursuivre l’expérience, en fabriquant des images à la main après chaque course et en essayant de nouveaux designs.
Les semaines suivantes, j’ai continué à créer de nouvelles images à partager après chaque course. J’ai testé différents styles de cartes et ajouté des détails comme la musique, la météo ou la fréquence cardiaque. Ces petites touches donnaient plus de relief et de sens à la course, et ça semblait plaire.
J’ai vraiment commencé à attendre avec impatience cet exercice créatif : fabriquer et partager une carte après chaque course. Avec les endorphines, c’est devenu franchement addictif. Il y avait plusieurs couches de créativité et de récit : parcourir les photos prises, regarder différentes vues de mon parcours, choisir de jolies couleurs d’accent, etc.
Ça réunissait plusieurs de mes choses préférées : la photo, la course et le fait d’attirer l’attention.
Ajouter quelques chiffres et un logo à la photo la transformait : ce n’était plus une simple photo mais du graphisme, presque de l’art. La composition et la forme de tous ces éléments pouvaient s’assembler pour créer quelque chose de bien plus grand que la somme de ses parties.
Même en voyage, j’aimais m’y consacrer. Les cartes étaient une jolie façon de garder une trace des endroits visités, une sorte de carte postale.
Activer ou non certaines données comme la musique ou les cartes racontait une histoire différente à partir du même contenu. Sur une course plus intense, j’ajoutais plutôt ma fréquence cardiaque. Par très forte chaleur ou par grand froid, la météo devenait une statistique intéressante. S’il y avait un beau coucher de soleil ou un beau panorama, cela faisait généralement un joli fond. Si le relief était marquant, une vue satellite le mettait en valeur.
Après quelques mois d’expérimentation, j’ai compris que cela ferait un produit formidable. J’en avais vraiment envie pour moi-même, et beaucoup d’autres personnes disaient vouloir l’utiliser aussi.
J’ai commencé à esquisser des concepts et à condenser mes essais en quelques mises en page, les meilleures.
Chapitre 3
Concevoir l’app
Quand je démarre un nouveau design, j’aime lister les objectifs. Choisir les bons objectifs est souvent plus important et plus difficile que de faire quelque chose de beau. Pour Quicksilver, quelques principes directeurs me semblaient essentiels. Ils allaient définir chaque pixel et chaque ligne de code que nous produirions.
- Récolter le plus de likes possible
- Voir sa dernière course instantanément
- Rendre la personnalisation amusante
Concevoir pour un maximum d’engagement
Pour récolter le plus de likes possible, il fallait trouver la bonne touche visuelle, le bon cadrage et le bon contexte pour que ça parle aux autres. Comprendre notre public cible, le grand public et pas seulement les autres sportifs, a orienté beaucoup de choix et nous a nettement différenciés de ce que faisaient les autres.
La plupart des apps proposaient des statistiques détaillées pour améliorer les performances. Mais pour un ami qui ne court pas, ces informations sont bien moins excitantes. Il préférera sans doute apprendre que ça équivalait à 5 donuts et vous envoyer un pouce levé. Ou voir une jolie photo prise en haut de la montagne que vous avez gravie à la sueur de votre front.
Nous avons essayé de construire chaque mise en page comme une marque à part entière, avec un nom et une icône uniques. C’était la fonction centrale de l’app, elle devait être extrêmement intuitive et agréable à utiliser.
Après plusieurs idées différentes, nous avons fini par présenter les mises en page dans une longue liste en bas. C’était très satisfaisant de les faire défiler et d’en choisir une.
On aurait dit des filtres Instagram pour la course
Écran de lancement
La photo et le contenu des utilisateurs occupant une grande place dans l’app, je voulais que cela se ressente dès l’ouverture.
Je me suis mis à chercher de belles photos pour le fond. Mon ami Adam, l’un des meilleurs photographes que je connaisse, nous a gentiment laissé utiliser l’un de ses clichés du mont Tam.
Dès que je l’ai intégré à l’app, j’en suis tombé amoureux. C’était exactement la sensation de sérénité et de nature qui donnait le bon ton pour le reste de l’app.
Une app indépendante
L’une des plus grandes décisions de design a été d’en faire une app séparée, dédiée à la course. Je voulais voir le mot « Running » sur mon écran d’accueil et accéder instantanément à mon contenu.
À mesure que nous ajouterions des possibilités, le vélo ou la natation par exemple, les gens pourraient n’installer que celles qui les intéressent. Je voulais éviter l’encombrement et l’empilement de niveaux de navigation.
Fil d’activité
La plupart des autres apps de course doivent mettre l’enregistrement au premier plan, mais comme nous ne l’avions pas, le contenu pouvait rester roi. Tout ce qui n’était pas les courses récentes se cachait dans une barre latérale.
Nous avons testé différents styles et différentes métaphores pour chaque course. Des cartes empilées, ou une série de tuiles. Après avoir essayé plusieurs niveaux de densité d’information, les plus grandes prenaient trop de place. Au bout de quelques minutes d’utilisation, j’ai compris que j’étais trop zoomé et que je n’avais pas la vue d’ensemble que je voulais. La vue du site fonctionnait très bien, alors nous avons réutilisé ces mêmes barres, colorées selon l’allure.
J’ai essayé de placer la course la plus rapide & la plus longue dans l’en-tête, pour qu’elles soient toujours accessibles sans avoir à faire défiler. C’était un défi amical : chaque ouverture de l’app était l’occasion de battre mon propre record. Si quelqu’un avait couru un marathon ou accompli quelque chose d’impressionnant, il l’aurait toujours sous les yeux.
Le compteur d’âge qui s’incrémentait en permanence sur le site était très apprécié, alors nous avons ajouté un minuteur du même genre pour marquer le temps écoulé depuis votre dernière course. Plus ce chiffre monte, plus les gens sont motivés, du moins on l’espère.
Chapitre 4
Le compteur de donuts
Cet été-là, nous travaillions depuis les bureaux de True Ventures à San Francisco. Un jour, quelqu’un a apporté deux boîtes de donuts. Après le déjeuner, quelqu’un, Phil Black si je me souviens bien, les a coupés en huit en disant que ça ne comptait pas si on n’en mangeait que de petits morceaux. Tout en sachant que ce n’était scientifiquement pas vrai, j’ai commencé à goûter les différents parfums.
Assis là, à travailler sur une app de course en mangeant un quart de donut glacé, je me demandais quelle distance il me faudrait courir le soir pour annuler ce grignotage. Après quelques recherches, j’ai découvert qu’un donut standard fait environ 200 calories, et que les calories d’une course valent à peu près (poids × 0,75 × distance).
Les courses sans données de carte, sur tapis ou suivies via Fitbit, nous posaient beaucoup de problèmes. L’app s’appuyait sur les cartes pour toutes les vues, et il nous fallait une alternative plus souple.
Assis là, à faire le calcul pour mes différentes courses, j’ai réalisé 2 choses : je n’avais aucune idée du nombre de donuts que valaient la plupart d’entre elles, et c’était plutôt amusant de le découvrir.
C’est ainsi qu’est né le compteur de donuts.
Nous faisions un petit calcul pour obtenir un nombre approximatif de donuts, d’une course courte valant 1 donut à une très longue sortie. J’ai passé le reste de la journée à chercher de belles photos de donuts par quantités, de 1 à 6.
Chapitre 5
La bêta
Une fois une version de base fonctionnelle, j’ai envoyé des invitations aux plus gros coureurs du site, ceux qui avaient plus de cent courses enregistrées. J’ai été stupéfait et impressionné de voir que pas mal de gens avaient accumulé plusieurs milliers de courses sur leur compte.
J’aimais courir, mais j’étais loin de leur niveau. Leurs retours et leurs suggestions seraient exactement ce qu’il nous fallait pour en faire un bon produit.
Au début, j’envoyais simplement des emails à la main. Les gens répondaient avec des bugs ou des idées et j’essayais de garder la trace de ce que chacun disait.
Puis quelqu’un a suggéré de créer un groupe Facebook, une méthode qu’il avait trouvée très utile sur d’autres bêtas. J’ai créé un groupe privé et envoyé le lien à quelques-uns de nos meilleurs testeurs. Il a grandi jusqu’à dépasser la centaine de membres, dont beaucoup couraient tous les jours et utilisaient l’app.
Nous avons non seulement reçu une quantité de rapports de bugs et de suggestions, mais certains se sont même mis à maquetter ce qu’ils voulaient.
Nous pouvions imaginer de nouvelles fonctions, les livrer à tout le groupe et les voir rapidement avec du vrai contenu.
Chapitre 6
Outils & astuces
Nous avons une super équipe chez Gyroscope, qui a travaillé dur pour que cette app existe (merci Mahdi, Eric, Robbie !), mais nous avons aussi été beaucoup aidés de l’extérieur. Voici une série de ressources et de produits qui nous ont été précieux et nous ont fait gagner beaucoup de temps de développement.
React Native
Venant du web, utiliser Javascript et un système de mise en page façon CSS/Flexbox m’a paru très intuitif. J’avais déjà conçu des apps iPhone, mais jamais écrit de code pour l’une d’elles. Si React Native n’avait pas existé, j’aurais dû attendre que quelqu’un d’autre s’occupe du développement. Un projet parallèle comme celui-là n’aurait sans doute jamais démarré.
Brent Vatne, l’un de nos premiers bêta-testeurs, contribuait aussi à React Native et nous a énormément aidés quand nous bloquions ou que nos questions n’étaient pas encore couvertes par la documentation. Merci Brent !
Depuis nos débuts, React s’est beaucoup amélioré. Chaque nouvelle version, de la 0.3 environ jusqu’à la 0.12 au moment du lancement, a amélioré les performances et corrigé des problèmes que nous rencontrions.
Il reste du travail (j’aimerais que les performances d’animation soient meilleures), mais ça progresse très vite. Au moins pour notre application très simple, il a fait le boulot et nous a permis d’avancer bien plus vite que nous ne l’aurions pu autrement.
Le rechargement à chaud de React Native par le réseau nous a permis d’itérer très vite sur de nouvelles idées ou de faire des micro-ajustements en quelques minutes. Aujourd’hui, je n’imagine plus devoir recompiler et attendre pour voir un changement.
Mapbox
Mapbox fabrique de formidables outils de cartographie que nous utilisons partout sur notre site. Leur éditeur permet de personnaliser le style et les couleurs. Nous nous en sommes servis pour créer plusieurs styles, dont ce jeu de tuiles sombre et minimal.
Nous avons d’abord testé leur implémentation iOS GL, avant de comprendre que nous ne voulions pas vraiment que les gens puissent se déplacer ou zoomer. Pour rester simples, nous avons réutilisé notre implémentation web existante dans une webview, ce qui nous a permis de garder le code que nous avions passé des mois à tester et à améliorer.
Imgix
L’une des particularités de notre app est d’adapter le style de la carte à la photo. Imgix nous aide à analyser la palette de couleurs, pour donner au texte et aux autres éléments des teintes assorties et complémentaires.
Nous utilisons aussi Imgix pour des effets spéciaux, comme améliorer ou flouter l’image. Passer par le cloud pour les photos implique un peu de temps de préparation, l’utilisateur doit envoyer la photo au lieu de tout faire en local sur le téléphone, et il faut parfois une minute pour l’envoyer puis retélécharger la version traitée, mais ce compromis en valait la peine vu le temps gagné et les fonctions supplémentaires obtenues.
Fabric by Twitter
Nous avons commencé à utiliser Fabric/Crashlytics pour suivre nos plantages. Aux débuts de l’app, elle plantait beaucoup. Avec le temps nous avons tout corrigé, mais je me suis surpris à continuer d’utiliser le tableau de bord pour voir nos statistiques d’usage.
J’avais prévu de mettre en place des outils d’analyse, mais il s’est avéré que presque tout ce dont nous avions besoin figurait déjà dans ce tableau de bord. Ce que je préférais, c’était voir les utilisateurs actifs à l’instant, mais d’autres chiffres comme les utilisateurs actifs mensuels (MAU), le ratio DAU/MAU et les taux de rétention étaient très instructifs.
À mesure que nous modifiions l’app pendant la bêta, nous voyions vraiment évoluer le temps par session, les taux de rétention, etc. Ajouter des notifications push avec Parse a nettement amélioré le réengagement et le retour des gens au bon moment.
Parse
Dans les premières versions de l’app, il fallait l’ouvrir soi-même pour voir si la dernière course était chargée. Dès que nous avons utilisé Parse pour envoyer une notification push à chaque nouvelle course, notre rétention a bondi.
Chapitre 7
77 donuts
Un jour, je parcourais nos mentions sur Instagram. Il y avait quelques photos de couchers de soleil, puis j’ai vu quelqu’un qui semblait avoir fait une course à 77 donuts.
Il devait forcément y avoir un bug dans mes calculs de calories, ou quelqu’un avait envoyé de fausses données. Une sortie à vélo prise à tort pour une course, peut-être ?
J’ai cliqué et cherché la « Fat Dog » dont parlait Nate. C’était apparemment un ultramarathon de 120 miles au Canada, réputé parmi les plus durs du monde. Waouh !
J’ai partagé sa publication avec notre groupe de bêta-testeurs. En voyant la course incroyable de Nate, j’ai eu envie de pouvoir mettre en avant ces courses exceptionnelles pour que tout le monde les voie.
Nous avons ajouté deux choses dans la barre latérale de l’app : un fil de courses mises en avant et une liste des amis ayant couru récemment.
Le record de Nate tient toujours : 77 reste le plus grand nombre de donuts enregistré sur Gyroscope. Cela dit, depuis le début de ce projet, j’ai appris à ne jamais sous-estimer les gens. La prochaine version gérera les nombres à trois chiffres, au cas où.
Chapitre 11
Et ensuite ?
Nous avons sorti cette app dans l’App Store & beaucoup de gens s’en servent pour suivre et partager leur vie.
Tatiana a perdu près de 40 livres en suivant tous ses pas et en les partageant.
Dan Grant parcourt l’Angleterre à vélo pour récupérer et rester en bonne santé après une crise cardiaque.
Nous avons pris ce que nous avons appris avec Running & nous nous en sommes servis pour construire la nouvelle app Gyroscope, qui raconte toute l’histoire de votre vie. Elle aussi en React Native : vous pouvez lire comment nous l’avons construite ou télécharger l’app depuis l’App Store.