Storytelling et headless CMS : la banque acrevis ose une refonte innovante.

  • Lena Tovar

Cette banque régionale de Suisse orientale a misé sur des concepts prometteurs. Les équipes UX et développement de Liip à Saint-Gall ont accompagné acrevis dans son projet de refonte de son site web.

En savoir plus sur les services UX Design, Contenu, DĂ©veloppement sur-mesure et SEO de notre agence digitale.

Êtes-vous en mesure de nous proposer un service qui va au-delĂ  du simple dĂ©veloppement ?

Tout a commencĂ© par un avant-projet. Le partenariat entre acrevis et Liip dĂ©marre Ă  la fin de l’étĂ© 2019 par une mise en Ɠuvre technique. Le courant a tout de suite trĂšs bien passĂ©, aussi bien sur le plan technique qu’humain. La banque n’a donc pas tardĂ© Ă  nous demander d’organiser la refonte de l’ensemble de www.acrevis.ch. La mission ne se limitait pas Ă  une simple mise Ă  jour de son site web. acrevis voulait un renouveau complet qui permettrait un dĂ©veloppement innovant continu, tant en termes de design que de technologie.

Ces exigences Ă©levĂ©es reprĂ©sentaient un dĂ©fi pour notre Ă©quipe dĂ©veloppement, mais pas seulement. Au sein de l’équipe UX, les designers ainsi que les spĂ©cialistes de la stratĂ©gie de contenu et du SEO ont Ă©galement planchĂ© sur cette mission. Avec trois concepts de design, Liip a su convaincre la direction de la banque, posant ainsi la premiĂšre pierre du projet.

*En pratique : dans le cadre d’ateliers avec l’équipe projet d’acrevis, des personas ont Ă©tĂ© crĂ©Ă©s, avec des besoins spĂ©cifiques et des user journeys concrets.*

Ce que veulent les client∙e∙s

DĂšs le dĂ©part, il Ă©tait clair que la perspective extĂ©rieure primait sur la perspective intĂ©rieure. En d’autres termes, les client∙e∙s d’acrevis Ă©taient au centre du projet. Au grĂ© de workshops collectifs, nous avons prĂ©cisĂ© la philosophie et la mission de la banque. La crĂ©ation de personas nous y a aidĂ©, de mĂȘme que la simulation et la remise en question des user journeys des client∙e∙s sur le site web d’acrevis. Nous avons Ă©galement interrogĂ© diffĂ©rentes parties prenantes chez acrevis afin d’intĂ©grer dans le projet les attentes de la banque. A ce stade du projet, nous avions Ă©tabli une premiĂšre base de design et de structure, des wireframes jusqu’à l’architecture des informations.

Qui dit site innovant dit aussi nouveau look. Nous avons proposĂ© une typographie optimisĂ©e pour le web, une extension de la bibliothĂšque d’icĂŽnes et une utilisation pertinente des couleurs. D’un bleu pĂ©trole assez soutenu comme couleur secondaire, nous avons optĂ© pour des touches discrĂštes de rouge comme couleur primaire principale. Le recours gĂ©nĂ©reux aux photos et un mĂ©lange habile de contenu statique et dynamique ont permis de rendre le site vivant. Le nouvel agencement des Ă©lĂ©ments et de subtiles micro-interactions lui donnent un aspect plus Ă©purĂ©.

*Beaucoup de blanc, une structure claire et de grandes images : les premiers Ă©crans du site web d’acrevis.*

Storytelling et univers thématiques en lieu et place de produits purement financiers

En termes de contenu, la question essentielle Ă©tait : comment susciter l’intĂ©rĂȘt des client∙e∙s d’acrevis dans le contexte plutĂŽt complexe de la finance ? Notre rĂ©ponse : avec le storytelling ! En Ă©cho au slogan « Meine Bank fĂŒrs Leben » (Ma banque pour la vie), les produits et services d’acrevis ont besoin de davantage de contexte, d’émotions et de lien avec le quotidien des client∙e∙s. Un point sur lequel tout le monde Ă©tait d’accord, aussi bien nos spĂ©cialistes de la stratĂ©gie de contenu que l’équipe projet d’acrevis.

Pour chaque grand champ d’activitĂ© de la banque, Ă  savoir particuliers et professionnels, respectivement quatre et huit univers thĂ©matiques ont ainsi Ă©tĂ© crĂ©Ă©s : Compte et carte, Financement d’achat immobilier (Financement d’entreprises), Placements d’argent, PrĂ©voyance (PrĂ©voyance et succession). RĂ©cits concrets, aperçus clairs des produits, interlocuteur∙trice·s personnel∙le∙s : tous ces univers se dĂ©clinent en un mĂ©lange colorĂ© de formats. Les protagonistes des rĂ©cits ont Ă©tĂ© choisis par rapport aux personas Ă©laborĂ©s prĂ©cĂ©demment. Puis la touche finale : la microcopy, grĂące Ă  laquelle nos rĂ©dacteur∙trice·s UX trouvent la bonne formulation pour les boutons, les formulaires, les messages d’erreurs ou encore les banniĂšres relatives aux cookies.

Une technologie de pointe pour un maximum de flexibilitĂ© aujourd’hui et demain

La mise en ligne ne sera que le coup d’envoi de nouvelles Ă©volutions : telle Ă©tait l’approche technologique de cette refonte. Traduction : la plateforme devra rester Ă©volutive pour rĂ©pondre aux exigences mĂȘme les plus Ă©levĂ©es des prochaines annĂ©es. Pour ce qui est du systĂšme de gestion de contenu (CMS), le choix s’est portĂ© sur Directus, un headless CMS qui dĂ©solidarise le backend et le frontend. Il repose sur une architecture orientĂ©e service, qui est hĂ©bergĂ©e sur le cluster OpenShift personnel d’acrevis.

C’est lĂ  que les choses se corsent : le contenu headless est reliĂ© Ă  la structure des pages via un service de routage conçu spĂ©cialement Ă  ces fins. Un service ElasticSearch, chargĂ© de l’indexation textuelle des contenus et PDF via GraphQL, assure des rĂ©sultats de recherche optimaux. Le site utilise par ailleurs un frontend VueJS qui permet Ă©galement un rendu cĂŽtĂ© serveur. Le contenu est livrĂ© via une application Django qui fournit des endpoints GraphQL et REST. Les photos sont hĂ©bergĂ©es sur Rokka, ce qui garantit une excellente performance malgrĂ© l’importante quantitĂ© de visuels du site web.

Derriùre la technologie, l’humain

Transparence, franchise et Ă©changes rĂ©guliers ont une fois encore formĂ© la base de ce projet. Notre collaboration Ă©troite avec l’équipe projet d’acrevis, mais aussi avec d’autres partenaires, nous a permis d’identifier rapidement les enjeux et de trouver des solutions pertinentes. En interne, nous avons organisĂ© un Collab-Day afin de pouvoir travailler de maniĂšre concentrĂ©e en tant qu’équipe cross-fonctionnelle et multisites. Les feedbacks et enseignements tirĂ©s au fur et Ă  mesure de l’avancement ont vite Ă©tĂ© intĂ©grĂ©s au projet, et le site web a progressivement pris forme. Mais qu’allaient en penser les client∙e∙s d’acrevis ?

*Le nouveau concept de site web a Ă©tĂ© analysĂ© sous toutes les coutures Ă  l’occasion de usability tests.*

Peu avant la mise en ligne, le projet a Ă©tĂ© soumis Ă  l’épreuve du feu : les usability tests. De potentiel∙le∙s client∙e∙s ont testĂ© le nouveau site dans les moindres dĂ©tails, effectuant de multiples recherches et demandes spĂ©cifiques aussi bien via des ordinateurs portables que des smartphones. A quelques exceptions prĂšs, aucun changement ne s’est rĂ©vĂ©lĂ© nĂ©cessaire. Une grande satisfaction pour tous les membres de l’équipe projet ! Avec notre storytelling, notre structure claire, un design rafraĂźchissant et une performance technologique Ă©levĂ©e, nous avons manifestement su rĂ©pondre aux attentes des client∙e∙s.

Le nouveau site web acrevis.ch est en ligne depuis juillet 2020. Merci Ă  toute l’équipe de projet d’acrevis pour cette super collaboration ! To be continued...

Remerciements
Nous souhaitons Ă©galement remercier tous les partenaires (presque exclusivement) locaux qui ont participĂ© au projet : JOSHMARTIN a fourni un prĂ©cieux travail prĂ©paratoire dans le cadre de la conception des pages, AMMARKT s’est chargĂ© du branding et de la conception visuelle pour acrevis et Arcmedia a aidĂ© Ă  l’élaboration des formulaires en ligne. Un grand merci Ă  eux !

« Liip nous a compris dÚs la premiÚre minute et nous a proposé des solutions innovantes, tant en termes de concept que de design, de contenu et de technologie. »

Mona BrĂŒhlmann, Responsable gĂ©nĂ©rale du projet de refonte chez acrevis

« Félicitations ! Les récits sont trÚs réussis et parlants. »

Andrea Straessle, Marketing & Communication acrevis Bank AG

« À chaque fois, c’était incroyable de voir la qualitĂ© avec laquelle les diffĂ©rents dĂ©fis Ă©taient relevĂ©s. La stabilitĂ© et la durabilitĂ© de la solution mise en place sont elles aussi impressionnantes. »

Michael Weder, Technical project manager for the acrevis website relaunch


Qu’en penses-tu?