← Retour aux projets
UX Research UX/UI Design Mobile

Attijari Wafa Bank
Gestion de budget PFM

Refonte de l'outil de gestion de budget intégré à l'application Attijari Mobile — de la recherche utilisateur aux maquettes finales livrées en V6.

Mockups iPhone Attijari

Rendre les finances personnelles
accessibles à tous

Lors de mon stage en tant qu'UX/UI Designer chez Attijari Wafa Bank, j'ai dû prendre en charge la refonte des différentes fonctionnalités du parcours PFM (Personal Financial Management). En effet, dans le cadre de la refonte massive d'Attijari Mobile (V6), l'équipe a décidé de repenser entièrement l'outil PFM pour répondre à des attentes utilisateurs croissantes face à la concurrence des fintechs comme N26, Revolut ou Monzo.

L'enjeu : concevoir une expérience de gestion budgétaire intuitive, sans sacrifier la richesse fonctionnelle attendue par les profils plus avancés.

Timeline 2 mois
Rôle UX/UI Designer — recherche, flows, maquettes
Équipe 1 Product Manager · 1 Product Owner · 1 Lead Designer · 2 Développeurs · 1 QA Testeur
Contraintes Respect de la charte Attijariwafa · Intégration dans l'app existante · Accessibilité
Outils Figma · FigJam · Maze · Notion

35%
Faible adoption mobile
Seulement 35 % des Marocains utilisent une application mobile pour gérer leur budget au quotidien.
65%
Demande de prévision
65 % des utilisateurs consultent régulièrement les outils de prévision financière lorsqu'ils y ont accès.
6
Parcours conçus
6 parcours utilisateurs critiques conçus de A à Z, de la catégorisation jusqu'aux alertes intelligentes.

Comment visualiser et piloter
son budget sans friction ?

Les utilisateurs peinent à comprendre leurs habitudes de dépenses depuis l'application bancaire. L'interface existante ne permettait pas de catégoriser facilement les opérations, de définir des plafonds, ni d'avoir une vision claire de son budget mensuel.

La refonte devait répondre à un double enjeu : simplifier drastiquement les parcours pour les utilisateurs novices, tout en offrant une profondeur fonctionnelle suffisante pour les profils plus avancés.

Problématique illustration

Méthodologie

Du research aux maquettes

Étape 01
User Research & Benchmark
Analyse des comportements utilisateurs et benchmark de 9 applications (bunq, N26, Revolut, Monzo, BNP Paribas, Société Générale…) pour identifier les meilleures pratiques en matière de PFM.
Étape 02
User Stories & MVP
Définition des user stories prioritaires — catégorisation, split d'opérations, plafonds, notifications — et hiérarchisation entre MVP indispensables et fonctionnalités secondaires.
Étape 03
Userflow & Prototypage
Construction de l'userflow V1 sur FigJam, puis itérations sur les wireframes jusqu'aux maquettes haute fidélité en light et dark mode, livrées en V6.
Research
Userflow

Solution

6 parcours, 2 modes,
une expérience cohérente

La solution livrée couvre l'ensemble du spectre fonctionnel défini en research : catégorisation des opérations, annotation, split, gestion des dépenses par catégorie, création de seuils budgétaires et notifications intelligentes.

Chaque parcours a été pensé pour être accessible aux utilisateurs novices, avec des repères visuels clairs tout en restant exploitable par des profils plus avancés.

Catégorisation & Split
Classement automatique et manuel des opérations bancaires par catégorie, avec possibilité de fractionner une transaction entre plusieurs postes budgétaires.
✏️
Annotation d'opérations
Ajout de notes personnalisées sur chaque transaction pour contextualiser les dépenses et faciliter les révisions budgétaires ultérieures.
📊
Gestion des dépenses
Vue synthétique et détaillée des dépenses par catégorie, avec historique mensuel et comparaison avec les mois précédents.
🎯
Seuils budgétaires
Définition de plafonds de dépenses par catégorie avec visualisation en temps réel du niveau de consommation et indicateurs de dépassement.
🔔
Alertes & notifications
Système d'alertes contextuelles prévenant l'utilisateur avant d'atteindre ses seuils ou lors de transactions inhabituelles.
📈
Rapport global & prévisions
Tableau de bord consolidé avec prévisions basées sur les habitudes passées, permettant une meilleure anticipation des fins de mois.

Aperçu des maquettes

Light mode & Dark mode

Dark mode — V6
Voir sur Figma
Maquette Dark mode V6
Light mode — V6
Voir sur Figma
Maquette Light mode V6

Projet suivant
Start Ici
Conception zéro-à-un d'une identité visuelle et d'une vitrine e-commerce — du positionnement à la mise en ligne.
Branding Design System E-commerce

Disponible · Oct. 2027
Nabil Skaoui
La personne derrière les maquettes

Je place l'humain
au centre de chaque décision.

Designer UX/UI depuis plusieurs années, je conçois des expériences qui allient clarté, fluidité et impact réel. À l'aise sur toutes les phases du processus de design — de la discovery jusqu'au pixel final.

Voir mon CV →
3+ ans d'expérience
9 projets livrés