Étude de cas · N° 01 · Fintech · paiement mobile · 2026
Naps, repensée pour qu’on lui confie son argent
Refonte de l’app de paiement marocaine Naps : un parcours complet, de l’ouverture du compte au relevé, dessiné pour regagner la confiance que les avis des stores disent perdue.
- Refonte UX
- UI iOS
- Design system
- Rôle
- Product designer, de la recherche au prototype
- Durée
- 6 semaines
- Équipe
- Projet personnel, en solo
- Plateforme
- iOS, transposable sur Android
- Outils
Figma 
Miro 
Google Meet 
Google Docs- Livrables
- Audit de l’existant, Benchmark, Proto-personas, User flows, Wireframes, Design system, 52 écrans, Prototype
Le projet en chiffres
Ce qui a été livré, compté dans le fichier Figma. Aucun résultat d’usage : la refonte n’a pas été testée par des utilisateurs.
52
écrans haute fidélité
16 dans le premier lot (accueil, virement), 36 ajoutés pour fermer la boucle
9
parcours complets
De l’ouverture du compte à l’aide, reliés dans un prototype
2,1 · 2,9
notes de l’app actuelle
Sur 5, App Store (35 notes) et Google Play (187 avis), relevées le 28 octobre 2026
01 · Le projet
Une app de paiement qu’on n’ose plus ouvrir
Naps est un établissement de paiement marocain : un compte et une carte sans banque, des transferts, des recharges et le paiement de factures, pilotés depuis une app. Le service parle aussi à ceux qui n’ont pas de compte bancaire : fin 2024, 58 % des adultes marocains en avaient un, 46 % chez les femmes.
Sur les stores, l’app plafonne à 2,1 sur 5 (App Store) et 2,9 (Google Play). Les avis racontent une app qui se ferme au moment du code, des jours sans accès, des frais mal compris.
Le projet : redessiner tout le parcours pour qu’il rassure à chaque geste, de l’ouverture du compte au relevé, dans la grammaire d’iOS 26 et l’orange de la marque. Le premier lot couvrait l’accueil et le virement ; la refonte ferme la boucle avec 36 écrans de plus.
Six semaines, cinq temps
Le double diamant, resserré : comprendre avant de dessiner, puis dessiner tout ce qu’un utilisateur traverse.
01 · Semaines 1 à 2
Découvrir
Relevé de l’app actuelle sur les stores, lecture des 62 avis écrits, tear-down de quatre apps concurrentes.
- Audit heuristique
- Analyse d’avis
- Benchmark
02 · Semaines 2 à 3
Définir
Quatre proto-personas, la carte d’expérience du virement, les questions « Comment pourrions-nous… ».
- Proto-personas
- Journey map
- HMW
03 · Semaines 3 à 4
Idéer
Priorisation des fonctions, user flows, wireframes des deux parcours clés.
- Impact × effort
- User flow
- Wireframes
04 · Semaines 4 à 6
Prototyper
Design system sur le kit iOS 26, 52 écrans, prototype relié, animation de succès.
- Design system
- UI haute fidélité
- Prototype Figma
05 · Semaines 6 à 6
Vérifier
Revue des lois UX et du contraste, plan de test prêt à lancer.
- Revue heuristique
- WCAG 2.2
- Plan de test
02 · Découverte
Le terrain, en chiffres sourcés
Un pays où près d’un adulte sur deux reste hors de la banque, et une app que ses propres utilisateurs notent sévèrement.
58 %
des adultes marocains ont un compte bancaire
Fin 2024, contre 54 % en 2023.
46 %
chez les femmes
Contre 70 % chez les hommes : l’écart que vise un compte sans banque.
22 / 57
avis Google Play à 1 ou 2 étoiles
Parmi les avis écrits que la fiche expose.
< 20 s
pour un virement à un proche
L’ambition de la refonte, de l’accueil au reçu, bénéficiaire connu.
Hypothèse
Sources consultées le 28 octobre 2026. Six avis à 5 étoiles publiés le même jour (15 décembre 2023) ont été lus avec prudence.
Ce que disent les avis
Six frictions précises, citées telles qu’écrites, puis les deux forces que la refonte garde. Les avis trop vagues (« Mauvaise application ») sont laissés de côté.
Forces à préserver
Ce que les utilisateurs gardent
F+1
Un compte sans banque
« Excellente solution d’inclusion financière pour les non bancarisés et pour les touristes qui visitent le Maroc. »
Google Play · octobre 2019 EnseignementLa promesse « sans banque » reste au centre de l’accueil.
F+2
Payer sur place, sans espèces
« Pratique pour aller au stade sans avoir besoin de retirer le billet »
Google Play · juillet 2023 EnseignementLe paiement QR et la carte doivent être à un geste.
Frictions à corriger
Ce qui les fait partir
F1
La connexion échoue
« Je souhaite simplement pouvoir consulter mon compte, mais je n’arrive jamais à me connecter à cause du même problème qui persiste. »
App Store · septembre 2026 EnseignementLa connexion est le premier geste : s’il échoue, le reste n’existe pas.
F2
L’app se ferme au dernier chiffre
“Just when I enter the last digit of my password the app closes itself just like that”
Traduction · Au moment où je tape le dernier chiffre de mon mot de passe, l’app se ferme.
App Store · décembre 2025 EnseignementUn plantage au moment du code se lit comme une faille de sécurité.
F3
Des jours sans accès
“there are multiple consecutive days when it is down and refuses to open!”
Traduction · Il y a plusieurs jours d’affilée où elle est en panne et refuse de s’ouvrir.
App Store · septembre 2026 EnseignementSans état du service affiché, une panne ressemble à une disparition.
F4
Le solde restant introuvable
« Problème de savoir le reste de solde de monnaie après la recharge de dotation. »
Google Play · mai 2026 EnseignementAprès chaque opération, le solde restant doit se lire sans chercher.
F5
Une inscription sans nouvelles
« J’ai créer mon compte et jusqu’à ce jour je n’est jamais eu de suite. »
Google Play · juin 2022 EnseignementL’ouverture du compte doit dire où en est la demande.
F6
La carte se commande en agence
« Je suis à rabat impossible de commander ma carte en ligne ni en appelant. Je dois venir dans un agence à Casablanca. »
Google Play · avril 2022 EnseignementCommander sa carte doit se faire depuis l’app.
Avis lus sur les fiches publiques le 28 octobre 2026, cités sans correction ; leurs auteurs ne sont pas nommés.
L’existant, tel que les stores le montrent
Les captures publiées par Naps : une carte dorée en tête de chaque écran, des listes en texte brut, cinq onglets et un menu.
Historique
Bénéficiaires
Agences
L’accueil actuel, annoté
Capture de la fiche App Store. Touchez un point : le constat, la loi UX en jeu et la réponse de la refonte.
Points relevés
Le montant tient dans une étiquette au coin de l’image de la carte, plus petit que le numéro de carte.
Loi UX en jeu
Effet Von Restorff
Ce qui diffère est ce dont on se souvient.
Correction proposée
Le solde devient le titre de l’écran, masquable d’un geste.
Quatre apps décortiquées
Trois acteurs marocains et Revolut, la référence d’usage, passés au même crible que la refonte.
| Critère | Naps · refonteLe projet | CIH MobileBanque | Al Barid BankBanque | Cash PlusPaiement | RevolutRéférence |
|---|---|---|---|---|---|
| Virement en quelques gestes | Oui4 étapes, Face ID | Non6 à 7 clics, code SMS | Non documenté | PartielInstantané bien visible | Oui2 gestes |
| Pavé numérique pour montants | Oui | Non documenté | NonClavier AZERTY | Non documenté | Oui |
| Masquer le solde | OuiUn geste | Non documenté | Non documenté | Non documenté | OuiEn secouant |
| Budget et dépenses par catégorie | Oui | Non documenté | Non documenté | NonAucun outil | OuiMensuel, très visuel |
| Saisie du RIB sans erreur | PartielRécents, scan prévu | Non documenté | NonClavier AZERTY | Non24 chiffres à la main | Sans objetRIB marocain non pris en charge |
| Reçu partageable | OuiPDF | Non documenté | Non documenté | OuiPDF sur WhatsApp | Oui |
Le tableau défile de côté.
D’après le tear-down réalisé pour l’étude, sur les captures des quatre apps. « Non documenté » : non observé.
À retenir
Revolut fixe le standard, les acteurs locaux ont le terrain (RIB, arabe, agences). La refonte prend l’aisance de l’un et le contexte des autres.
03 · Définition
Quatre façons de tenir son argent
Proto-personas tirés des avis et du contexte marocain : des hypothèses à valider en entretien, leurs citations sont illustratives.
P1 · proto-persona
Yassine, 28 ans
Cadre dans la tech à Casablanca, plusieurs transferts par semaine
- Objectif
- Envoyer de l’argent à un ami en quelques secondes et suivre ses dépenses
- Ce qui bloque
- Les codes SMS qui tardent, les mots de passe, les apps lentes
« Je veux envoyer de l’argent à un ami en moins de 15 secondes. »
P2 · proto-persona
Kenza, 23 ans
Étudiante à El Jadida, vit de sa bourse et de l’argent familial
- Objectif
- Savoir combien il lui reste et demander une avance à sa famille
- Ce qui bloque
- La peur des frais cachés, un solde qui baisse sans qu’elle comprenne
« Je veux savoir tout de suite combien il me reste. »
P3 · proto-persona
Hassan, 54 ans
Sourceur commercial, sur le terrain, passé au digital par obligation
- Objectif
- Envoyer son RIB à un client sur WhatsApp, sans erreur
- Ce qui bloque
- Ne retient pas ses 24 chiffres, lit mal en plein soleil
« Mon RIB, en un geste, sans me tromper. »
P4 · proto-persona
Amina, 42 ans
Coiffeuse indépendante, sans compte bancaire, paie en espèces
- Objectif
- Payer ses factures sans faire la queue, recharger en espèces
- Ce qui bloque
- Le jargon bancaire, la peur de perdre son argent sur un mauvais bouton
« Un portefeuille simple, que je recharge quand j’ai du liquide. »
Les portraits du dossier de recherche, générés par IA, ne sont pas montrés.
Un virement, aujourd’hui
Le parcours de l’app actuelle, vécu par Yassine. Les émotions sont une hypothèse tirée des avis F1 à F4.
Yassine
01Ouvrir l’app
02Se connecter
03Trouver le virement
04Le bénéficiaire
05Valider
06Après
Fait
Pense
Ressent
Opportunité
La carte défile de côté.
Le problème à résoudre
Les utilisateurs de Naps ont besoin d’être sûrs de leur argent à chaque geste, parce qu’une app de paiement ne pardonne pas une erreur. Aujourd’hui, la connexion échoue, le solde se cache et les frais arrivent après coup.
Les questions auxquelles la conception répond
Q1
Comment pourrions-nous rendre la connexion instantanée, et rassurante quand elle échoue ?
Pourquoi elle · Trois frictions sur six parlent d’accès (F1 à F3).
Q2
Comment pourrions-nous faire d’un virement à un proche un geste de quelques secondes ?
Pourquoi elle · C’est l’usage principal, rangé dans deux menus.
Q3
Comment pourrions-nous montrer chaque frais avant qu’il soit payé ?
Pourquoi elle · Les frais ressentis comme cachés reviennent dans les avis et chez Kenza.
Q4
Comment pourrions-nous servir ceux qui n’ont pas de banque ?
Pourquoi elle · C’est la force que nomment les avis positifs (F+1).
04 · Idéation
Ce que la première version garde
Chaque fonction placée selon son impact sur les frictions et l’effort qu’elle demande. Les grands chantiers sont gardés quand une friction les exige.
Impact ↑
Gains rapides · Impact fort · Effort faible
Connexion par Face IDEn V1
Répond à F1 et F2
Frais et total avant de payerEn V1
Répond à Q3
Solde en titre, masquableEn V1
Répond à F4
Virement en quatre étapesEn V1
Grands chantiers · Impact fort · Effort fort
Mise à disposition en agenceEn V1
Le cœur du « sans banque »
Paiement QR chez un commerçantEn V1
Répond à F+2
Cartes : geler, plafonds, carte en ligneEn V1
Scan du RIBPlus tard
Demande un moteur de lecture
Interface en arabe (RTL)Plus tard
Architecture prévue, écrans en V2
Bonus · Impact faible · Effort faible
Cashback chez les partenairesEn V1
Thème sombrePlus tard
Plus tard · Impact faible · Effort fort
Naps FamilyEn V1
Offre existante de Naps
Effort →
Impact estimé d’après les frictions et les personas, effort à dire d’expert : une priorisation à revoir avec l’équipe technique.
Le virement, pas à pas
Le flux cible : un bénéficiaire connu se paie en quatre écrans, un nouveau en deux de plus.
Début
Accueil
Action rapide « Envoyer »
Décision
Bénéficiaire existant ?
Non : saisie du RIB et du nom, puis « Enregistrer »
Écran
Choisir le bénéficiaire
Récents en tête
Écran
Montant
Pavé numérique, instantané en option
Écran
Vérification
Montant, frais, total
Système
Face ID
Aucun code à taper
Fin
Succès et reçu
Reçu à partager
D’après le user flow du dossier de recherche.
Les wireframes
Les deux parcours du premier lot en moyenne fidélité : le virement, puis le module de dépenses.
Virement : cinq écrans, un clic chacun. 
Dépenses : la vue du mois, la courbe que l’on parcourt du doigt, puis la répartition.
05 · Conception
Un design system sur le kit iOS 26
La base est native (verre, barres, Dynamic Type) : la marque n’y ajoute qu’un orange, réservé à l’action, et une échelle de montants.
Couleurs
Orange Naps
#FF5F00
Action principale, toggles
Orange profond
#E65500
Initiales, accents sur fond clair
Encre
#0F172A
Texte, icônes
Ardoise
#64748B
Texte secondaire
Fond
#F8FAFC
Fond des écrans
Carte
#FFFFFF
Cartes et listes
Crédit
#065F46
Montant reçu
Débit
#991B1B
Montant envoyé
Succès, fond
#D1FAE5
Statut payé
Erreur, fond
#FEE2E2
Opposition, alerte
Typographie
Grand titre
SF Pro Bold 34
Envoyer de l’argent
Solde
Inter Bold 32
122 390,28 DH
Section
SF Pro Bold 22
Services Naps
Ligne
SF Pro Semibold 15
Aymen El
Légende
SF Pro Regular 13
CIH Bank •••• 4589
15 composants
- Barre d’onglets flottante
- Barre d’outils
- Bouton Glass Prominent
- Bouton Glass
- Action rapide
- Carte service
- Ligne de liste
- Recherche
- Champ
- Toggle
- Pavé numérique
- Carte Naps
- Pastille de statut
- Marque de succès
- 86 icônes
Le texte blanc sur l’orange de marque atteint 3:1 : assez pour un libellé de bouton en gras à partir de 18 points, pas pour un texte courant (WCAG 2.2, 1.4.3).
L’accueil : le solde d’abord
Aujourd’hui
Refonte
Ce qui change
Le solde devient le titre de l’écran, et se masque d’un geste.
Loi UX · Effet Von RestorffRespectée
Le numéro de carte quitte l’accueil : il vit dans « Détails », masqué.
Loi UX · Loi de JakobRespectée
Quatre actions en tête : envoyer, recharger, payer, demander.
Loi UX · Loi de HickRespectée
Débits en rouge, crédits en vert, toujours avec leur signe.
Loi UX · Loi de similaritéRespectée
Le virement : tout voir avant de payer
Aujourd’hui
Refonte
Ce qui change
Le bénéficiaire se choisit parmi les récents, ou s’ajoute avec son RIB : plus de numéro interne à connaître.
Loi UX · Loi de TeslerRespectée
Montant, frais et total s’affichent avant de confirmer.
Loi UX · Aversion à la perteRespectée
Face ID valide l’envoi : aucun code à taper au mauvais moment.
Loi UX · Seuil de DohertyRespectée
La connexion : un geste, et un prénom
Aujourd’hui
Refonte
Ce qui change
Face ID en un geste, un code à six chiffres en secours.
Loi UX · Seuil de DohertyRespectée
L’app accueille par le prénom : on sait qu’on est chez soi.
Loi UX · Effet esthétique-pratiqueRespectée
« Code oublié ? » est sur l’écran, plus besoin d’appeler.
Loi UX · Règle de PostelRespectée
Un succès qui rassure
Le premier écran de succès célébrait avec un mégaphone. Pour de l’argent, la fête compte moins que la preuve : la refonte pose une coche dans un halo, le montant et le bénéficiaire, puis le reçu à partager.
Trois états en Smart Animate font grossir le cercle, dessiner la coche puis ouvrir le halo : la fin du parcours est le moment dont on se souvient.
Virement réussi
Le reçu, en PDF
La même marque à l’ouverture du compte
Fermer la boucle : 36 écrans de plus
De l’ouverture du compte à l’aide : chaque écran répond à une friction ou à une question du problème.
Bienvenue
Pièce d’identité (F5)
Selfie
Code secret
Transferts
Mise à disposition
Code de retrait
Demander (Kenza)
Programmés
Scanner (F+2)
Payer un commerçant
Mon QR (Hassan)
Cartes
Réglages carte
Naps Family
Carte en ligne
Services (Amina)
Facture
Recharge
Alimenter
Analytics
Historique
Profil
Sécurité
Agences (F6)
Aide (F3)
06 · Validation
Les lois UX à l’œuvre
Chaque décision visible tient à une loi, dite là où elle joue.
- Enfreinte
Effet Von Restorff
Ce qui diffère est ce dont on se souvient.
Le numéro de carte ressort plus que le solde.
Accueil actuel
- Respectée
Effet Von Restorff
Ce qui diffère est ce dont on se souvient.
Le solde est le seul grand chiffre de l’écran.
Accueil
- Respectée
Loi de Hick
Plus de choix, décision plus lente : réduisez et groupez les options.
Quatre actions, un seul système de navigation.
Accueil
- Respectée
Loi de Fitts
Les cibles grandes et proches s’atteignent plus vite.
Cinq cibles de 44 points, à portée de pouce.
Barre d’onglets
- Respectée
Seuil de Doherty
Sous 400 ms, le système ressemble à une conversation.
La validation répond sans attente de code.
Face ID
- Respectée
Loi de Tesler
La complexité ne disparaît jamais, quelqu’un la porte : que ce soit vous.
L’app retient les proches, l’utilisateur n’a plus de numéro à connaître.
Bénéficiaires
- Respectée
Aversion à la perte
Perdre fait environ deux fois plus mal que gagner ne fait plaisir.
Aucun frais ne se découvre après avoir payé.
Vérification
- Respectée
Règle du Peak-End
On juge le pic et la fin, pas la moyenne.
La fin du virement donne une preuve, pas une fête.
Succès
Résultats attendus
Ce que la refonte devrait changer, et comment on le saurait. Rien de tout cela n’a été mesuré.
| Résultat attendu | Indicateur | Cible indicative |
|---|---|---|
| Moins d’abandons à la connexion | Part des connexions réussies au premier essai | 95 % ou plus (hypothèse) |
| Un virement plus court | Temps médian de l’accueil au reçu, bénéficiaire connu | Moins de 20 s (hypothèse) |
| Des frais compris | Testeurs qui annoncent le total avant de payer | 6 sur 6 en test |
| Une note qui remonte | Note moyenne sur les deux stores, six mois après | Au-dessus de 3,5 (hypothèse) |
Cibles indicatives, à fixer avec les données réelles de Naps.
Le test qui validerait la refonte
ParticipantsSix personnes, deux par profil (Yassine, Kenza, Amina), hors clients de Naps, en séance modérée de 30 minutes sur le prototype Figma.
01
TâcheOuvrir l’app et se connecter.
Critère de réussiteConnecté en moins de 10 secondes, sans aide.
02
TâcheEnvoyer 450 DH à Aymen, puis partager le reçu.
Critère de réussiteRéussi sans erreur, total annoncé avant de payer.
03
TâcheMettre 1 200 DH à disposition de Mohammed et lui envoyer le code.
Critère de réussiteCode partagé, durée de validité comprise.
04
TâcheGeler sa carte, puis la réactiver.
Critère de réussiteTrois gestes au plus, l’état de la carte est clair.
05
TâchePayer la facture d’eau et d’électricité.
Critère de réussiteFacture payée, rappel mensuel trouvé.
Questions d’entretien
- Racontez la dernière fois que vous avez envoyé de l’argent : à qui, comment, et ce qui vous a inquiété.
- Qu’est-ce qui vous ferait confier votre salaire à une app sans banque ?
- Quand une opération a des frais, à quel moment voulez-vous le savoir ?
- Comment payez-vous vos factures aujourd’hui, et qu’est-ce qui vous retiendrait de le faire dans une app ?
Ce que j’en retiens
01
La confiance est l’interface
Dans une app d’argent, un plantage se lit comme une faille : l’état du service, la preuve et les frais comptent autant que l’élégance.
02
Partir des avis, pas des envies
62 avis ont fixé les priorités mieux qu’une liste de fonctions : chaque écran répond à une friction nommée.
03
Deux parcours ne font pas une app
Le virement n’a de sens qu’avec l’ouverture du compte, la connexion, les cartes et l’aide autour de lui.
Un projet en tête ?
Décrivez l’écran ou le parcours qui coince : je réponds avec une première lecture du problème.