TouchUp : concevoir une application à deux, de l’idée à la réalisation
Tout a commencé il y a un an…
Jérôme Morissard est un de mes amis et aussi un très bon développeur iOS. Il y a un an, il est venu me voir avec cette idée d’application : faire un état des lieux du carnet de contacts et aider l’utilisateur à en améliorer la qualité.
Il avait déjà développé quelques fonctionnalités et me demandait mon avis sur l’idée, le design et l’expérience utilisateur :
Autant dire que, même si je trouvais l’idée très bonne, j’ai très vite été persuadée qu’il faudrait tout reprendre depuis le début ;)
Nous nous sommes donc lancé ce défi : concevoir et développer ensemble cette application et la sortir sur les stores ! Ce qu’il faut savoir, c’est que nous avons tous les deux un travail à côté et que ce projet allait donc être réalisé sur notre temps personnel…
Pour Jérôme, ce projet était l’occasion de tester de nouvelles technologies et de se faire plaisir. Pour ma part, j’avais vraiment envie de faire une application avec mes méthodes, ma vision et pouvoir m’occuper de la conception de A à Z…
J’allais enfin pouvoir réfléchir à un produit dans sa globalité sans être contrainte par un client ou des délais. Et surtout, j’allais pouvoir tester réellement quelques principes d’atomic design…
Une appli pour quoi ? Pour qui ?
Pour moi, l’étape n°1 était de vérifier que cette application pouvait être utile à plusieurs personnes (et pas juste à nous deux ;) et donc d’affiner un peu notre liste de fonctionnalités et notre feuille de route.
Sonder les utilisateurs
La première chose que nous avons faite est d’envoyer un questionnaire à nos familles et amis afin de connaître leur perception de leur carnet de contacts et ce qu’ils attendraient d’une application pour mieux les gérer.
Y’a t’il un réel marché ?
En parallèle, j’ai regardé ce que faisaient les autres applications de nettoyage de carnet de contacts. Visiblement il y avait un marché et une vraie demande puisque j’ai trouvé beaucoup d’applications existantes.
Comment se différencier ?
Et pourtant, aucune de ces applications ne m’avait réellement convaincue. Pour moi, il leur manquait à toutes deux choses essentielles :
- Le contrôle du nettoyage du carnet : beaucoup d’applications proposaient des actions totalement automatisées mais aussi du coup assez obscures… Qu’est-ce que ce bouton allait faire ? Qu’est-ce qui allait être fusionné ? Ou supprimé ? Mes contacts étant très importants pour moi j’avais trop peur de perdre des données et je n’osais pas faire de modifications tant que je n’étais pas sûre de ce que ça allait donner.
- Le plaisir d’usage : toutes ces applications étaient assez austères et rien n’encourageait l’utilisateur à mieux remplir son carnet ou ses fiches. Quitte à faire le ménage dans ses contacts, autant le faire avec une application sympathique, non ?
Définir les premières fonctionnalités
Grâce au questionnaire, à notre analyse de la concurrence et bien-sûr à notre expérience personnelle avec notre carnet de contacts, nous avons pu nous fixer un MVP avec les premières fonctionnalités.
Ce qui nous paraissait important pour démarrer :
- Pouvoir faire un état des lieux de son carnet et de ses contacts : lesquels n’ont pas de noms de famille ? Lesquels n’ont pas de photo ? Lesquels n’ont pas de téléphone ou pas d’e-mail ?
- Pouvoir supprimer facilement des fiches en double.
- Pouvoir regrouper des fiches qui ont un e-mail ou un téléphone en commun.
- Pouvoir identifier et supprimer des fiches vides ou presque vides.
Nous avions le concept, un début de feuille de route et une motivation à toute épreuve ; on pouvait se lancer dans la conception !
Concevoir en atomic design : co-création obligatoire
Dès le début du projet, nous avons vraiment souhaité co-créer ensemble.
J’ai dessiné plusieurs versions des écrans et afin de travailler dès le début avec une démarche atomic design, j’avais même découpé des premiers composants “papier” afin que l’on puisse itérer, se mettre d’accord et valider que nous étions en phase. Cela m’a permis tout de suite d’avoir une vision plus globale de notre produit.
C’était vraiment super de concevoir à deux ; avec mon profil créatif et son profil beaucoup plus rationnel et carré, nous arrivions toujours à trouver une solution ;)
Rien de mieux que le papier et le crayon… C’est tellement rapide pour se mettre d’accord sur une vision.
J’ai ensuite réalisé un prototype qui m’a permis de faire avancer le projet et de recueillir des premiers retours.
Au début nous voulions juste tester l’idée et les fonctionnalités. Nous n’avions donc pas besoin d’un prototype trop poussé et un simple enchainement d’écrans cliquables suffisait largement :
Grâce à ce prototype, nous avons pu collecter plusieurs retours très intéressants sur le concept et les fonctionnalités et surtout recueillir d’autres besoins, d’autres idées auxquelles nous n’avions pas forcément pensé.
Passage en dev : the sooner is better
Passer le plus rapidement possible en développement, pour Jérôme et moi c’était primordial !
La base de notre application étant les contacts, il fallait qu’on puisse voir concrètement les informations qu’on pouvait récupérer (ou non) et qu’on identifie tout de suite ce qui allait potentiellement poser problème.
Jérôme a donc développé rapidement une première version afin de vérifier nos hypothèses :
Le fait que le design n’était pas encore calé à ce stade n’avait pas d’importance.
Quand on travaille par composant il faut d’abord poser les grandes structures du produit. Les composants du système s’affinent ensuite au fur et à mesure du projet.
Le fait de travailler de manière atomic, nous a également permis d’aller plus vite pour faire des modifications graphiques et itérer rapidement sur l’identité visuelle de notre produit.
Je m’étais fait mon propre Style Guide sur une page à part dans mon fichier Sketch avec mes atomes, mes molécules et mes organismes.
Et tous mes composants étaient liés à ce Style Guide afin que je puisse me rendre compte de ce qu’un changement dans mon système impliquait sur mes écrans (ou inversement ;)
Durant ces nombreuses heures de travail en binôme, j’ai également découvert que l’atomic design n’était pas réservé aux développeurs web comme on peut le penser… Bien au contraire !
Les développeurs natifs aiment qu’on puisse leur indiquer les modules, les patterns et les templates de pages. Cela leur permet d’utiliser un même code à différents endroits et de factoriser ainsi plus efficacement leur travail.
Je réfléchissais en amont à ce qui allait pouvoir être ré-utilisé, ce qui était générique ou non… Et Jérôme pouvait ainsi mutualiser son code, en accord total avec ma conception.
Version beta : la richesse des retours utilisateurs
Nos premiers testeurs, c’était nous évidemment ! En utilisant l’application sur notre propre carnet nous avons pu déjà nous rendre compte de ce qui fonctionnait ou non.
Mais c’était également très important pour nous de pouvoir faire tester TouchUp à des personnes totalement extérieures au projet.
Nous avons donc constitué notre petite communauté de Beta-testeurs (une trentaine de personnes) et nous avons sorti plusieurs versions successives, ce qui nous ont permis d’affiner le produit et de résoudre certains soucis ergonomiques.
Se faire plaisir : vital sur un projet perso
Un projet personnel c’est dur et fatiguant… Il fallait donc qu’on trouve le moyen de se faire plaisir et de tester des choses, tout en développant le coeur de notre application.
Illustrations
J’ai très rarement le temps et l’occasion de faire des illustrations. J’ai donc profité de ce projet pour me faire plaisir et créer un véritable univers graphique.
Comme TouchUp est basé sur des jeux, j’ai pu travailler des “médailles” pour chaque niveau que l’utilisateur peut atteindre, en fonction de la qualité de son carnet :
Et des illustrations de fonds pour accompagner chacune de ces médailles :
Animations
J’ai aussi profité de ce projet pour tester plusieurs logiciels d’animation.
Comme Principle par exemple, qui m’a permis de montrer concrètement à Jérôme les animations que j’imaginais pour les parcours et les transitions :
Ou encore Lottie, la librairie d’airbnb qui transforme des animations After Effect en fichiers JSON facilement récupérables par les développeurs.
Cela nous a permis d’intégrer des animations sympas sans alourdir inutilement le poids de l’application ni la charge de développement côté Jérôme.
Simplifier, simplifier, simplifier
Toute la difficulté pour deux passionnés comme nous a été de prioriser les tâches qui avaient le plus de valeur pour notre application, sans nous perdre dans les détails…
Et oui, choisir c’est mourir un peu et afin de simplifier au maximum l’expérience de notre Mvp1, nous avons dû retirer plusieurs fonctionnalités que nous avions pourtant entièrement conçues et développées.
Comme par exemple toute la partie “tag” qui permettait d’associer des personnes à des mots clés afin de les contacter en groupe plus rapidement :
Peut-être que ces fonctionnalités verront le jour dans les prochaines versions, mais pour le moment nous avons vraiment fait le choix de nous concentrer sur le coeur de notre produit c’est à dire le nettoyage et l’amélioration du carnet de contacts.
Et du coup ça donne quoi ?
Nous avons finalement réussi notre défi de sortir une application dont nous sommes fiers, en travaillant pendant 1 an sur notre temps personnel !
Voici quelques-une des fonctionnalités plutôt cool de TouchUp :
Mais qu’est-ce qui cloche dans ce carnet ?
Nous calculons le niveau du carnet de contacts de l’utilisateur et établissons un état des lieux pour comprendre les informations manquantes et compléter les fiches concernées si besoin :
Un carnet de contact vraiment parfait
En plus des jeux “classiques” comme les fusions, les clones et la suppression rapide des contacts vides, nous proposons de mettre automatiquement des +33 devant tous les numéros Français ou encore de mettre des majuscules à tous les noms/prénoms du carnet :
Des conseils pour remplir mes fiches contacts
Nous affichons des petits messages personnalisés sur chaque fiche afin d’encourager l’utilisateur à les compléter :
Souhaiter facilement les anniversaires
Les notifications et les widgets que nous avons développés permettent, non seulement de ne plus oublier un anniversaire, mais aussi d’envoyer facilement un message à l’élu(e) du jour :
Conclusion
Faire un projet personnel en plus de ses heures de travail, c’est difficile. On peut facilement y passer tous ses midis, ses soirs et ses week-ends…
Mais c’est aussi excitant de pouvoir travailler à sa manière et sans contraintes. Cela ouvre énormément de perspectives et oblige à toucher à tout.
C’est également très intéressant pour moi de travailler directement avec Jérôme car nous sommes complètement différents et nous ne raisonnons pas toujours de la même façon. Je pense qu’on s’apporte beaucoup et que, même si la communication est parfois compliquée (on ne parle définitivement pas le même langage ;) nous arrivons toujours à nous entendre et à trouver des compromis.
Nous savons qu’il nous reste encore énormément de travail avant que cette application soit au top mais nous sommes déjà très fiers de cette première version !
Notre objectif maintenant : prendre tous les retours de nos utilisateurs et s’en servir pour l’améliorer progressivement.
N’hésitez pas à télécharger TouchUp pour nous donner vous aussi vos retours et vos idées d’évolution ;)
