ing
APPLICATION E-BANKING MULTIPLATEFORME
conception stratégique, design, développement
pionnière dans le monde
du numérique bancaire
ING Luxembourg est une banque qui a, très tôt, compris l’importance d’être innovant et leader sur le terrain du numérique et de la mobilité. Son souhait était de pouvoir offrir à ses clients tous les services bancaires existants via une application. C’est dans ce contexte qu’ING Luxembourg a fait appel à Explose pour une collaboration sur un projet d’application bancaire hybride d’un tout nouveau genre.
L’expertise des spécialistes web d’Explose a été sollicitée sur trois terrains majeurs : la conception de l’expérience utilisateur (UX Design), la conception d’interface utilisateur (UI Design) et le développement orienté web (front-end development).
une application
pour les contrôler toutes
Le concept du projet était de réaliser une application hybride qui serait la même, quel que soit l’appareil utilisé. Pour ce faire, différentes technologies ont été utilisées pour que l’application soit compatible avec tout type d’appareils du smartphone à l’ordinateur de bureau.
l’approche retenue :
content first + mobile first
L’approche ‘content first’ :
le contenu est roi
L’approche ‘content first’ milite pour la suprématie du contenu sur les désidératas esthétiques. C’est le contenu qui doit orienter l’expérience utilisateur et le design global de l’application. Toutes les fonctionnalités bancaires doivent pouvoir être utilisées tant sur un smartphone, que sur un ordinateur de bureau. Restreindre les fonctionnalités par type de support et ainsi contraindre le client à changer de moyen de connexion pour réaliser une opération, c’est tout simplement inimaginable maintenant.
L’approche ‘mobile first’ :
un pari gagnant pour le futur
La multiplication des appareils mobiles de toutes formes et tailles nous montre un changement important dans la façon de consommer du contenu. Les statistiques projetées sur une période à court et moyen terme montrent la future suprématie des appareils mobiles sur les postes fixes. C’est pourquoi l’approche mobile first a été retenue pour ce projet. Le client de la banque ING Luxembourg pourra utiliser son homebanking sur ses divers appareils mobiles facilement.
ux-design
L’architecture de l’information
Dans le monde bancaire, le contenu est particulier et chaque banque a ses spécificités. Nous avons donc étudié consciencieusement les produits et les services que propose ING Luxembourg à ses clients, pour comprendre au mieux l’architecture la plus intéressante pour ce projet.
Wireframes & prototypes
Une fois l’architecture de l’information établie, nous avons entamé le processus de création des wireframes. C’est au cours de cette phase que les premières briques sont posées. Chaque fonctionnalité est pensée pour en faciliter l’utilisation, mais également pour entrer dans un cadre cohérent global dans l’application. C’est cette cohérence qui permet de proposer aux utilisateurs une courbe d’apprentissage très réduite et une utilisation intuitive.
Les prototypes sont utilisés pour mettre en lumière un chemin de navigation ou une fonctionnalité.
branding
interfaces
Le design des interfaces orienté utilisateur a pour rôle d'habiller les wireframes et permettre de trouver un univers graphique en concordance. Le challenge est d’apporter à l’application le côté minimaliste et moderne qui permettra de sublimer l’expérience utilisateur et de rendre les écrans d’une lisibilité irréprochable et d’une beauté inégalable.
Front-end dev :
donner vie aux interfaces
Le développeur va traduire les interfaces ‘statiques’ en éléments interactifs. C’est d’autant plus vrai pour l’application hybride ING Luxembourg qui nécessite un grand savoir-faire et beaucoup de calibration pour être utilisable de manière optimale sur autant de supports. La technique du responsive web design va permettre d’utiliser la même base de travail et de l’ajuster selon les résolutions écrans.
technologies
Dans le cadre du projet ING Luxembourg, nous avons utilisé les outils de base d’un développement web : HTML5 et CSS, mais également des techniques plus novatrices comme AngularJS et SASS. Ces technologies permettent de travailler de manière plus efficace dans le cadre de ce type de projet en utilisant une approche composants (POC) qui est fort différente du processus web classique. Grâce à l'approche composant, il est possible d'isoler la logique et le fonctionnement d'éléments graphiques sophistiqués comme des listes déroulants, des champs de formulaires, des composants tactiles, ...
Cela permet ensuite de les réutiliser simplement à l'aide de paramètres, sans devoir recopier le code. Un gain en efficacité et en temps !
navigation touch
et animations
Une application hybride n’est de fait, pas une application native. Il faut donc la plupart du temps recréer des fonctionnalités de navigation touch complexes depuis le début. Entre le travail de création du composant, son animation et son optimisation pour l’intégration multi plateformes… c’est un travail de développement laborieux, mais très gratifiant une fois le résultat à porté de main ;)
Prochain projet
