BIMBANK
Une refonte spontanée de BIM BANK, première banque islamique de Mauritanie. D'une arborescence cassée à une interface entièrement responsive, pensée pour gagner la confiance institutionnelle et transformer les visiteurs en clients.
Une banque qui n'en avait ni l'air ni le comportement en ligne
BIM BANK est la première banque islamique de Mauritanie, une institution établie qui gère plus de 50 000 clients dans 25 agences. Mais son site racontait une tout autre histoire. Design vieillissant, hiérarchie de l'information cassée, aucun signal de confiance, aucun parcours de conversion. Dans les services financiers, la confiance se joue à la seconde où quelqu'un arrive sur votre site. Le leur la perdait immédiatement.
Une banque qui a l'air peu professionnelle en ligne perd des clients avant même qu'ils ne poussent la porte. Et en finance islamique, la confiance est tout.
Une présence digitale qui inspire confiance avant même qu'un mot soit lu.
Refonte complète de bout en bout : arborescence reconstruite et cartographie des parcours, puis wireframes, puis interface responsive haute fidélité dans Figma, et intégration native dans Webflow. Chaque décision a été prise pour refléter la crédibilité institutionnelle de BIM BANK et déclencher une action mesurable.
Analyse du site existant
Avant de toucher à Figma, j'ai audité bim-bank.mr au regard des 10 heuristiques de Nielsen et je l'ai comparé à Gulf Bank et Boubyan Bank, les références régionales de l'UX bancaire islamique. Constats principaux : aucun parcours de conversion, une FAQ éclatée en 3 entrées distinctes, pas de localisateur d'agence, pas de bouton de connexion dans la navigation, et une page d'accueil de plus de 12 sections qui saturait l'attention.
Restructuration de l'arborescence
J'ai reconstruit l'architecture de l'information depuis zéro. La finance islamique est passée de sous-catégorie à pilier principal de navigation, une décision stratégique qui reflète le marché mauritanien. La nouvelle arborescence a introduit des pages qui n'existaient pas : localisateur d'agence, carrières, centre d'aide unifié et calculateur Mourabaha dédié. Chaque entrée de sous-menu a été rattachée à une section ancre, ce qui permet de livrer le contenu par étapes sans casser le parcours.
Design UI · Responsive
L'architecture verrouillée, j'ai conçu 10 pages dans Figma (desktop et mobile) en partant de Relume comme socle de composants, puis personnalisé en un design system complet aligné sur la marque BIM BANK. Chaque page suit un schéma de conversion strict : hero → signaux de confiance → caractéristiques produit → appel au calculateur → pied de page. Le design a ensuite été intégré nativement dans Webflow, avec la prise en charge de l'arabe en RTL, du JS sur mesure pour le calculateur Mourabaha, et Finsweet pour le filtrage CMS.
La segmentation avant tout
Le site existant traitait tous les visiteurs de la même façon. La refonte introduit trois piliers de navigation distincts (Particuliers, Entreprises, Finance islamique), chacun avec sa propre hiérarchie de produits, son parcours de conversion et son ton. Un particulier qui cherche un financement Mourabaha et un dirigeant qui cherche un crédit PME n'ont rien en commun. La navigation le reflète enfin.
Les signaux de confiance remis en scène
La banque avait une vraie crédibilité (plus de 50 000 clients, 25 agences, plus de 500 salariés), mais rien de tout cela n'était visible sur le site. J'ai remonté ces chiffres dans le hero, juste sous le titre. Poser l'échelle institutionnelle comme première chose vue transforme la perception avant même qu'un produit soit lu.
L'orange employé avec retenue
L'orange de BIM BANK (#E8500A) est un actif de marque fort, mais appliqué à tout, il devient du bruit. Je l'ai restreint aux appels à l'action principaux, aux points saillants et aux accents de section. Tout autre élément interactif passe en variante contour ou texte. Résultat : quand l'orange apparaît, il veut dire action.
Responsive, mobile d'abord
Les utilisateurs mauritaniens accèdent massivement aux services financiers depuis leur mobile. Chaque page a été conçue mobile d'abord, avec un motif « voir plus » pour réduire la densité des sections sur petit écran, un maximum de 7 sections par page mobile, et l'arabe en RTL appliqué aux 4 breakpoints Webflow. Le desktop était l'amélioration, pas le point de départ.
L'arborescence avant les écrans
Une interface soignée sur une structure cassée reste cassée. L'arborescence a été le premier livrable : cartographiée, itérée et validée avant qu'une seule frame ne soit ouverte dans Figma. Cette seule décision a économisé des semaines de reprise et empêché la dérive du périmètre pendant la phase UI.
La finance islamique comme atout
En Mauritanie, la finance islamique n'est pas une niche : c'est une attente. La refonte la fait passer de sous-catégorie enfouie à pilier principal de navigation, avec ses pages dédiées, une présentation du comité de conformité charia, des FAQ propres à chaque produit et un calculateur Mourabaha interactif. Cela pose l'identité islamique de BIM BANK comme un différenciateur concurrentiel, pas comme une arrière-pensée.
Enseignements
Dans les services financiers, le design n'est pas de la décoration : c'est le premier signal de confiance que rencontre un client.