Ciko | Remanier une interface perfectible

Image for post
Image for post

Contexte de l’ilab

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

Apprendre et comprendre le système

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.

Image for post
Image for post

Public cible

Vos avis comptes !

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

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.

Image for post
Image for post

Partout, pour tous

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

Image for post
Image for post

Recherche d’identité

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.

Image for post
Image for post

Les entrailles de 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

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

It’s ready !

Image for post
Image for post

Skynet heuu … ciko est en ligne !

Image for post
Image for post

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

Image for post
Image for post

Up and going UX designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store