Ciko | Remanier une interface perfectible
Contexte de l’ilab
L’iLab c’est maintenant, nous devons traiter un des sujets imposés entre la banque, le vélo urbain et le train. Nous avions déjà eu l’occasion auparavant de tester la location rapidement rébarbative. Ainsi, après concertation avec chaque membre du groupe, nous nous sommes mis d’accord sur le sujet des vélos. Pour équilibrer la charge de travail, l’équipe a été scindée en deux groupes, les designers d’un coté et les développeurs de l’autre.
Le challenge de l’iLab réside surtout dans la capacité de notre projet à intéresser un vaste public de potentiel investisseur et sur notre capacité à améliorer l’expérience difficile des plateformes comme la SNCB.
Respect des délais
Nous devions garder les pieds sur terre sur la globalité du projet, c’est à dire sur ce qui était réalisable dans les délais, nous nous sommes concentrés prioritairement sur les éléments qui sont et seront les plus utilisés en préparant une liste des besoins / demandent vis à vis de ciko.
Apprendre et comprendre le système
Pour commencer, il était pour nous essentiel d’analyser en profondeur le fonctionnement et les étapes qui constituent l’interface actuelle des bornes à vélo de Namur.
Nous en avons retiré plusieurs choses, comme par exemple, le fait que les étapes de réservation sont extrêmement longues et fastidieuses. De plus, une personne âgée n’a probablement pas assez de connaissance « informatique » pour comprendre comment fonctionne l’interface. En effet, la réservation se passe sur deux écrans, un écran principal donnant la plus grande partie des informations et un second terminal servant, entre autres, a payer par carte bancaire. De plus, les étapes sur le terminal ne donnent aucun feedback visuel ou sonore.
Cette étape d’observation et d’analyse nous a grandement aidé à concevoir un système à la fois simple et accessible.
Public cible
Tout projet recherche une cible, en d’autres mots nous avons créé des personnas disposant chacun de le propre histoire. Ces archétypes ont permi de définir pour chaque cas les critères de recherche et à distinguer les différents parcours des utilisateurs.
Vos avis comptes !
Pour mieux cerner les problèmes du système actuel, nous avons décidé de collecter des avis d’autres personnes. Nous avons, dans un premier temps, conçu un formulaire google que nous avons partagé sur les différents réseaux sociaux, facebook, twitter. Ensuite, nous avons mené plusieurs interviews auprès d’étrangers dans les rues de Namur.
Au premier coup d’oeil, un sentiment général de déception était resenti. Ces informations nous ont permis d’affirmer que, l’interface actuelle en plus d’être obsolète en raison de son manque d’esthétique, est composé de multiple étapes fastidieuses et pourvu de négligence du côté utilisable pour tous.
Même le texte à besoin d’ordre
A l’achèvement de la récolte des données, une partie du groupe s’est occupé de hiérarchiser l’information, c’est à dire préparer les couches qui feront parties de l’expérience. L’une des questions cruciales à laquelle nous avons du répondre est de comment diminuer le nombre d’étapes de réservation tout en ayant assez d’information pour garantir la sécurité des données et du vélo.
C’est aussi l’occasion de lister toutes les fonctionnalités qui simplifieront la vie de nos utilisateurs, comme par exemple la map qui permettra de diriger l’utilisateur vers la borne désirée ou la plus proche. En fonction de ces besoins, elle met à disposition certaines informations comme le nombre de vélos disponibles ainsi que les places restantes.
Partout, pour tous
Nous avons également prévu que le contenu soit adapté à tous le monde, que soit un professionnel du vélo ou une personne retraitée désirant faire une simple balade. Afin d’accélérer le processus de réservation, nous avons eu l’idée de proposer à l’utilisateur une application pour son smartphone. Via celle-ci, il pourra réaliser plusieurs actions qui lui feront économiser toujours plus de temps.
En concrert, la fonctionnalité la plus intéressante est d’utiliser le NFC du mobile pour déverrouiller son vélo, passant ainsi toutes les étapes de réservations de la borne. L’application intègre l’utilisation du GPS qui donne accès à des informations supplémentaires, telles que les bornes disponibles aux alentours ou des statistiques liées à votre utilisation du vélo ( km parcourues, bornes les plus utilisées, … ).
Les fondamentaux
Une fois les fonctionnalités de notre borne listées, il était impératif de réaliser des wireframes avant la réalisation des visual design. A partir de ces écrans, une série de test ont été réalisé en situation réelle, il a fallu départager sur quelle information importante pourrait intéresser les usagers. Après de multiple essais, nous avons obtenu un nombre d’écran considérablement moindre par rapport à l’interface actuelle.
Recherche d’identité
En accord avec notre thème, nous nous sommes beaucoup basés sur l’utilisation de couleurs modernes et de formes rondes qui évoquent une vision jeune et dynamique du projet, tout est pensé pour donner envie de prendre un vélo, de se balader quelque soit la durée d’utilisation et de pouvoir le ramener avec facilité.
Après quelques heures d’échanges de fichiers nous nous sommes mis d’accord sur notre code couleur, nous voulions que CIKO soit également accueillant. C’est pourquoi le choix s’est porté sur les couleurs orange et rose du même ton mais, qui ensemble, contrastent suffisamment créant un jeu de couleurs harmonieux. Grâce à cela, on en ressent une atmosphère joyeuse donnant envie d’explorer et d’en savoir toujours plus. Du côté typographique, faire le bon choix a été essentiel: le mariage couleur — typographie assure une lisibilité confortable, un univers cohérent et créera, par conséquent, un sentiment d’intérêt chez l’utilisateur. Dans cet objectif nous avons choisi d’utiliser la police de caractère “ Museo Sans Rounded “ aux caractéristiques rondes et “friendly” qu’elle dégage.
Lors de l’étape contenu, « l’itération » a été le maître mot. Cela devait être précis, pas d’ambiguïté possible, on doit pouvoir atteindre le but final sans être perdu mais pas seulement. La force de CIKO est qu’il est prévu pour que ses choix soient faciles et rapides, l’utilisateur est constamment au courant de ce qu’il se passe et de ce qu’il fait ou doit faire lors des étapes d’interactions.
Au niveau du logo, nous avions commencé par représenter le vélo avec la vitesse, le temps et l’écologie. Peu à peu, nous nous sommes rendus compte que malgré la qualité graphique de la représentation, le message n’était pas clair, trop figuratif, et donc, pas forcément efficace pour les personnes plus âgées. C’est pourquoi nous avons choisi de plutôt travailler le logo par la typographie, les couleurs et la forme. Une fois l’idée défini, nous avons exploré les différentes solutions. Pendant 10 minutes, chacun des designers se sont penché sur le sujet, suivis d’un vote parmi tous les membres du groupe afin de définir les favoris. La convergence de tous ces idées va mener à l’émergence de notre logo actuelle.
Les entrailles de CIKO
Il est temps de parler un peu de nos braves, pour que les fonctionnalités soient au top, les développeurs du groupe se sont penchés pendant plusieurs jours sur le développement des entrailles de CIKO v1. Le gros morceau a surtout été la recherche de la carte google. Nous avons également pensé à des fonctions personnalisées comme le pavé numérique directement intégré dans l’interface ou les sélections à glisser. Nous sommes arrivés plus loin que la demande du briefing du premier prototype, ce qui nous a permis de réaliser une expérience utilisateur à grande échelle lors de la présentation, et, par cette occasion, de mesurer de façon claire l’optimisme des utilisateurs envers CIKO.
Pour expliquer un peu plus le but de cette présentation, nous devions préparer un prototype en partie fonctionnel afin de vendre notre projet auprès des deuxièmes DWM. Nous avons misé sur l’avancement du projet déjà concret ainsi que sur une présentation dynamique en relation avec l’image que nous voulons faire passer du projet. Les présentations de tous les projets terminés, une levée de fond fictive a été organisée afin que chaque élève puisse financer le projet qu’ils ont préféré. Le jour de la remise finale, le principe sera identique et chaque groupe sera à même de faire une évaluation sur la rentabilité / réussite de leur projet.
La rencontre
A l’occasion d’une présentation de notre invité Pascal Courtois, où nous allons en apprendre un plus sur leur méthode de travail « Sprint », qui consiste à produire des idées dans des laps de temps très réduit, en général 5 jours, avec un résultat final concret. Le principe est itéré jusqu’à ce que le projet du client soit abouti.
Lors de la rencontre par groupe avec l’invité, nous avons pu nous entretenir afin d’exposer notre projet et de finaliser l’expérience que nous voulions transmettre. Grâce à cette réunion, et bon nombre de tests, nous avons jugé que la partie de la location dans cette première version était trop compliquée à utiliser. Après concertation et de nouveaux essais, nous avons réalisé une manière plus ludique d’amener l’utilisateur à passer cette étape en douceur, plus exactement: une roulette numérique représentant le nombre de vélos et la durée de location. La prise en main et l’accessibilité étant accrue, l’idée a été adoptée à l’unanimité.
La partie délicate commence ici, il n’est pas aisé d’arriver à convaincre monsieur tout le monde de prendre de son temps afin de remplir des formulaires d’inscriptions. Dans notre cas, nous avons allégé cette étape à une simple demande d’email et un code pin qui, ensemble, serviront d’identifiant à l’étape d’identification. Une partie récapitulative est également conçue, rassurant le client sur le bon déroulement de sa commande.
On itère, on améliore
Afin de garder une harmonie visuelle, les layouts mobiles ont été adapté par rapport aux corrections de la borne, épurée et moderne, créée pour que l’application soit un prolongement de la borne avec des fonctionnalités supplémentaires proposant un réel intérêt pour les utilisateurs désirant ne plus perdre une seule seconde ! Si celui-ci dispose d’une application bancaire, il pourra directement interagir avec l’application et effectuer son paiement en quelques secondes. Quant à la connection NFC intégrée à la version mobile ( cette fonction d’un simple geste du smartphone), elle débloquera la borne du vélo désiré. Si l’utilisateur est intéressé par ces performances personnelles, une partie statistique est mise à disposition fournissant des données telles que la vitesse moyenne, la durée moyenne de ses trajets ainsi que le nombre de locations vélos effectuées dans l’année.
It’s ready !
On y est, CIKO est prêt à voir le jour ! Pour rendre le projet encore plus crédible, l’équipe de design s’est lancée dans la conception d’une borne en carton qui servira de support à l’interface finale présentée au grand public. La spécificités que nous avons travaillées résident sur l’inclinaison de l’écran. Les anciennes bornes se trouvant à 90°, les visiteurs dépassant une certaine taille sont obligés de se mettre dans des positions inconfortables afin d’arriver le plus vite possible au bout du processus. Dans l’idée de corriger ce problème, nous nous sommes mis d’accord sur une inclinaison de 30°, plus adaptée à la personne, ce qui facilitera et améliorera son expérience.
Skynet heuu … ciko est en ligne !
Une question se pose. Notre borne est prête, c’est bien. Mais comment informer les gens qu’elle est disponible ? Nous sommes partis sur une vitre en pleine expansion depuis déjà quelques années: internet ! Le visiteur peut découvrir à sa guise, pas à pas, notre méthode de travail et le développement du projet. Ce support sert à présenter le projet mais pas seulement. Un système de votes est mis à disposition afin de tester la curiosité de nos futurs utilisateurs, faisant, au passage, travailler le bouche à oreille. Ensuite, de cela, ces avis serviront à appuyer notre demande de lancement de ciko dans vos villes !
Conclusion général du projet
Ce que pense Yvann
L’idée d’être dans un groupe de 7 personnes était plutôt effrayant cependant, l’organisation mise en place nous a permis d’avoir chacun un rôle déterminant dans ce projet. Avoir la possibilité de mettre en pratique un langage que je venait d’apprendre était une sorte de défi personnel. Je n’hésiterais pas à renouveler l’expérience.
Ce que pense Martin
Travailler sur le re-design des bornes de vélo à été très enrichissant pour moi. Il s’agissait d’un réel travail de simplification et de clarification, surtout avec le rôle de designer qui m’a été assigné. Il nous fallait prendre en compte chaque petits détails des différentes utilisations des multiples utilisateurs. Concevoir l’ensemble des fonctionnalités pour la borne et pour l’application à été un réel défi, un défi gagnant !
Ce que pense Mikhaël
Mon objectif principal était surtout de comprendre et d’utiliser l’API de Google Maps. Un élément essentiel pour notre interface qui a apporté une réelle plus-value à notre application ainsi qu’à notre borne. Un groupe performant où j’ai pris plaisir à travailler.
Ce que pense Kevin
Ce travail de groupe m’a appris beaucoup de chose, en particulier le SASS. En plus d’avoir enrichi mon savoir en Javascript et en jQuery j’ai découvert la librairie HammerJS avec laquelle j’ai travaillé pour l’intégration sur mobile et iPad. Pour conclure, une belle expérience, un bonne ambiance de groupe, et un travail réalisé clairement dans les temps !
Ce que pense Simon
Ce travail était une excellente opportunité d’apprendre à travailler sur les mêmes fichiers à plusieurs, avec ses avantages et ses contraintes, cela demande plus de rigeure et plus d’organisation dans la manière de coder. Ce travail a également été l’opportunité d’apprendre plus de compétences en javascript et en intégration orientée mobile, vu que mon travail dans le groupe a principalement consisté à l’intégration de l’application CIKO.
Ce que pense Michael
Une bonne expérience enrichissante demandant, certes une bonne organisation, mais cela nous a permis de bâtir un projet solide qui, nous l’espérons, permettra au monde du vélo urbain de ce faire une place dans le coeur de nos utilisateurs.
Ce que pense Jeremie
Wesh
