Repenser l’expérience bancaire.

Réflexion, propositions et itérations lors d’un workshop.

Les interfaces des bornes bancaires font parties de notre quotidien or nous nous sommes rapidement aperçus que plusieurs services actuellement proposés étaient “boudés” par certains utilisateurs. Plusieurs d’entre eux nous ont clairement expliqué préférer l’utilisation d’un service alternatif pour réaliser certaines actions bancaires (le pc-banking pour le virement par exemple).

Notons également que chaque banque dispose de sa propre interface, impliquant dès lors un nouveau temps d’adaptation à chaque nouvelle utilisation.
Avec déja deux problèmes majeurs identifiés, il nous apparait alors évident qu’en tant que designer nous avons un rôle à jouer.

Nous sommes un groupe de 7 personnes et nous allons vous exposer notre méthode de travail dans le cadre d’un workshop sur les interfaces.

Réalisation de case study

Notre méthode de travail

1. Définir la base.

Sur base d’une étude comparative des différentes bornes présentes dans notre ville, nous avons dressé différentes listes autour des fonctionalités et rapidement déterminé quels étaient leurs sens flux.

Réalisation de sens-flux.

Nous nous sommes ensuite posés la question: “Quelles différences et points communs remarquons-nous entre ces bornes ?”

Nous pensons pour un écran avoisinant la taille d’un ipad accompagné d’un hardware — la structure physique de la borne.
Cette définition de la base nous permet dès lors d’avoir une vue d’ensemble de ce qui composera notre nouvelle interface.

2. Réfléchir à des solutions.

Pointer un problème est une chose aisée, lui associer une solution pertinente et viable l’est en revanche moins.

“Quel service pourrions nous ajouter aux bornes actuelles et qui vous aiderait dans votre quotidien ?”

Cette question nous l’avons posée à des utilisateurs lambda en pleine rue et avons retenu certaines réponses:

  • Proposer d’afficher les coupures présentes dans la machine en temps réel avant même d’avoir introduit une carte.
  • Uniformiser les écrans entre les banques.
  • Améliorer l’interface des virements.
  • Proposer des indications visuelles claires et précises.
  • Réduire l’importance du tactile.
  • Proposer un service de monnaie.
Sur base des différents retours et en complément à notre briefing initial nous avons réfléchi à une solution mobile pensée pour des utilisateurs pressés que nous avons décidé d’appeler Fastcash. Nous lui avons également consacré une étude de cas.
Affichage des coupures & cartes disponibles en temps réel.

3. Sens-flux et wireframes.

Cette vue d’ensemble définie, nous réfléchissons à la manière de connecter les différents écrans entre eux pour ensuite s’assurer que chaque action renvoie bel et bien vers un écran cohérent.
Sur base de ce sens-flux, nous réalisons nos wireframes en vue d’un premier test utilisateur.

Réflexion et itération de nos wireframes.

4. Itérer pour simplifier.

Sur base des premiers retours, nous itérons avec pour objectif de simplifier notre première proposition d’interface. Nous réfléchissons sur 2 axes.

A. retirer ou déplacer certains boutons.
B. fusionner certains écrans et réduire les répétitions.

A. Retirer ou déplacer.

Dans une optique de simplification nous avons décidé de placer le bouton “restitution de la carte” sur la partie hardware de la borne bancaire.

Cette simplification nous permet un gain de place ainsi qu’une interface moins chargée.

4. Fusionner et éviter la répétition

Le retrait bancaire a retenu notre attention, nous avons en effet constaté que de nombreuses banques nous laissent la possibilité d’introduire un montant pour ensuite nous laisser le choix de nos coupures. Il s’agit là, pour nous, d’une répétition de l’action .

Le constat posé, notre proposition repose sur un choix direct des coupures par l’utilisateur. Nous fusionnons deux étapes en une seule.

En cas d’erreur dans le choix des coupures, nous lui permettons de réinitialiser son choix de coupures et de recommencer.

Eviter la redondance et proposer une nouvelle approche du retrait.

Notre ligne graphique

A l’opposé d’un style sérieux — corporate. Nous avons voulu nous placer dans un entre deux en présentant un style simple et épuré.

1. Le choix de la typographie

Travaillant sur une surface de petite taille nous nous sommes orientés vers une typo’ sans-sérif et plutôt ronde : La Roboto.
Claire et précise elle nous aide à asseoir notre volonté de simplicité.

2. La couleur

Dans un soucis de clarté et de neutralité nous avons opté pour du bleu et une variante du rose qui permet de mettre en évidence les actions utiles à l’utilisateur.

Les couleurs annexes pouvant être amenées par la présence d’icônes illustrant les différentes coupures disponibles.

Une simplicité dans le choix de nos couleurs et typographie.

3. Une question de taille

En complément à nos précédents choix nous avons également dû tenir compte de l’ensemble de nos utilisateurs. Ainsi nous avons fait le choix d’une taille de typo’ permettant une lecture aisée et une taille de call to action sufisamment grande que pour éviter d’induire en erreur l’utilisateur.

Dans notre header, le fait d’avoir opté pour de grandes tailles nous permet d’y inclure des icônes et de mieux présenter l’information à l’utilisateur.

Réflexion autour des comptes disponibles à l’utilisateur.

En conclusion

En apparence, proposer une alternative à une interface bancaire peut sembler simple. Et pourtant très vite nous avons pris conscience de sa complexité, entre l’importance de tenir compte d’un large pannel d’utilisateurs et celui de proposer une interface amenant un regard neuf à l’expérience bancaire, les choix et les aspirations graphiques de certains ont été rudement mis à l’épreuve.

La participation à un tel workshop nous aura permis d’aller à l’essence même de notre métier de (web)designer ; celui de servir l’utilisateur et son expérience.