Ouvert aux opportunités · Paris

Product Designer de systèmes.

Je transforme des portefeuilles d'applications silotées en produits cohérents. Design tokens, gouvernance, handoff industrialisé — pour l'assurance, la banque, le retail et l'immobilier.

Portrait de Mohamed Elouazghi
Mohamed Elouazghi

Une valeur change — tout le système suit. C'est là que se joue la cohérence d'un produit.

9 ansde design produit
4design systems créés de zéro
3 squadsalignées sur un même système
3 continentsEurope · Afrique · Am. du Nord

Un design system n'est pas une bibliothèque. C'est une décision d'architecture.

Le problèmeUne application par métier. Trois interprétations du même bouton. Un coût de maintenance qui grimpe pendant que la cohérence s'effondre.

Ma positionOn ne règle pas ça avec une librairie Figma. On le règle avec une hiérarchie de tokens, une gouvernance, et un contrat clair entre design et développement.

La preuveTrois squads produit alignées sur un même système chez Wafa Assurance. Handoff raccourci de 40%. Zéro aller-retour d'interprétation.

Wafa AssuranceYakeeyCarrefourRMA AssurancesBravo TelecomFZmarkFizz.caPlanhub Wafa AssuranceYakeeyCarrefourRMA AssurancesBravo TelecomFZmarkFizz.caPlanhub
Études de cas — 01

Quatre contextes, un même réflexe : structurer avant de dessiner.

Écrans livrés, parcours utilisateurs et artefacts de conception — montrés en entier, jamais en vignettes décoratives.

Étude de cas 01 · Avril 2024 → aujourd'hui

Wafa Assurance

Consultant Senior UX/UI · Groupe Attijariwafa Bank. Premier assureur du Maroc — 4M+ clients, 12 pays africains.

−35%d'abandon sur les parcours clés
+18 ptsde NPS
−40%de temps sur le handoff Design–Dev
Enjeu business

Une application par métier, maintenues séparément. Coûts qui se cumulent, expérience discontinue entre la souscription, le sinistre et l'espace client.

Vision produit

Un seul produit, plusieurs portes d'entrée. Architecture One Product : une base de composants, des parcours contextualisés par métier.

Mon rôle

Consultant senior, seul designer sur la refonte système. Interlocuteur direct du produit, du métier et de l'équipe front.

Contraintes

Bilinguisme français / arabe, mode sombre, réglementation assurantielle, base de code existante à ne pas casser.

Discovery · ce que la recherche a changé
Entretiens
assurés et conseillers, sur les parcours Sinistre, Souscription et Espace client
Tests modérés
sur prototype, avant écriture de la moindre ligne de code
Heatmaps
pour localiser les points de décrochage réels
Roadmap
priorisée par friction mesurée, pas par intuition
Écran livré · espace client web
SLOT 01
1920 × 1080 px
Wafa Assurance — espace client web, ré-export propre
À replacer dans le cadre .mac. La capture actuelle contient du texte de remplissage, une accroche hors sujet en anglais et un numéro de téléphone personnel. À ré-exporter avec du contenu réaliste et anonymisé.
Décision UI · hiérarchie du tableau de bord

Trois niveaux de lecture s'imposaient : l'urgence (déclarer un sinistre, appeler l'assistance), le suivi (contrats et échéances), puis le service (messagerie, FAQ, conseiller).

Le bouton de déclaration de sinistre est le seul élément persistant de la barre supérieure. En assurance, le moment de vérité est le sinistre — tout le reste peut attendre un clic de plus.

Les cartes de contrat portent une pastille d'état colorée, lisible sans lecture du texte : la reconnaissance avant l'identification.

My Wafa — accueil de l'application mobile, choix du produit d'assurance
iOSAccueil My Wafa
Design tokens · architecture à trois niveaux
Figma Variables — collection de classes primitives : familles de police et échelles de couleur de marque
Primitives — 35 variablesNiveau 1
Figma Variables — collection de classes sémantiques : texte, fond, bordure, états positifs et d'alerte
Sémantiques — 78 variablesNiveau 2
Figma Variables — classes CSS : rayons, épaisseurs de bordure, opacités, espacements et typographie
Classes CSS — 374 variablesNiveau 3

Les primitives ne sont jamais utilisées directement dans une maquette. Un designer ne choisit pas brand/600, il choisit text/brand/primary. Le jour où la marque évolue, une seule valeur change et tout le système suit. C'est ce qui rend le rebranding possible sans reprise des écrans.

Handoff · du token Figma au code
01
Figma Variables
Source de vérité unique, versionnée par branche
02
Tokens Studio
Export JSON normalisé
03
Style Dictionary
Transformation multi-plateformes
04
iOS · Android · Web
Variables natives consommées par le front
05
Zeroheight
Documentation lue par les 3 squads
Étape automatisée Étape outillée Résultat : −40% sur le handoff, zéro aller-retour d'interprétation
Accessibilité · WCAG 2.1 niveau AA
4.5:1
contraste minimum sur tout texte courant
Dark mode
porté par les tokens sémantiques, pas par une surcouche
FR / AR
bidirectionnalité prise en compte dans les composants
Focus
états visibles sur l'ensemble des éléments interactifs
Étude de cas 02 · Nov. 2022 → Avril 2024

Yakeey

Lead Product Designer · Marketplace immobilière. Quatre surfaces produit menées de front, une seule équipe design.

6 moisdu cadrage au lancement
+50%de production d'interfaces
×3d'adoption mobile en 12 mois
Enjeu business

Vendre et louer de l'immobilier en ligne dans un marché où la confiance passe par la visite physique. Chaque bien doit être vérifié, chaque acheteur rassuré.

Quatre surfaces

Marketplace B2C, back-office promoteurs, centre de relation client, application mobile native. Publics et contraintes radicalement différents.

Mon rôle

Lead Product Designer. Discovery, architecture d'information, design system, arbitrages produit avec les équipes React et React Native.

Méthode

Jobs-To-Be-Done et personas actionnables plutôt que descriptifs. Cartographie complète de l'arborescence avant toute maquette.

Architecture de l'information · sitemap complet
Sitemap Yakeey : parcours immoneuf, achat et location, carte des prix, estimation, mise en location, vente, compte utilisateur et espace professionnels
États connecté / non connecté / formulaires embarqués — faites défiler horizontalementArtefact original

Sept parcours racines, trois statuts de connexion. La difficulté n'était pas de lister les pages, mais de décider lesquelles exigent un compte — chaque mur d'authentification coûte des visiteurs, chaque accès libre coûte des leads.

Task flow · de la recherche à la visite
01
Recherche
Intention : acheter, louer, vendre ou financer
02
Listing filtré
Vue liste ou vue carte, sans rechargement
03
Fiche du bien
Photos vérifiées, informations structurées
04
Point de conversion
Rappel conseiller ou réservation de visite
05
Compte
Créé au moment utile, pas à l'entrée
Moment de conversionL'authentification est repoussée le plus tard possible dans le parcours
Écran livré · marketplace
yakeey.com — acheter, louer, vendre, financer
Yakeey — page d'accueil avec recherche multi-intentions et sélection de biens vérifiés
Application mobile · quatre moments du parcours
Yakeey mobile — listing des biens
01Listing
Yakeey mobile — panneau de filtres de recherche
02Filtres
Yakeey mobile — vue carte des biens disponibles
03Vue carte
Yakeey mobile — fiche détaillée d'un bien
04Fiche bien
Page complète · fiche bien, du haut au pied de page
Yakeey — fiche complète d'un plateau de bureaux : galerie, prix, informations générales, caractéristiques
Faites défiler dans le cadreÉcran intégral

Sur un bien à 69 600 DH/mois, la décision ne se prend pas en ligne. L'objectif de la page n'est pas de convertir, mais de qualifier : donner assez d'information pour qu'un conseiller ne perde pas son temps.

D'où le bloc de prix ancré en surimpression de la galerie, et deux actions concurrentes assumées — être rappelé, ou télécharger la brochure. La seconde est le vrai signal d'intention.

Les caractéristiques sont regroupées par thème plutôt que listées : un acheteur de bureaux ne lit pas, il cherche une surface et un état de livraison.

Back-office · l'autre moitié du produit
yakeey — accès professionnels
Yakeey — page de connexion à l'espace professionnel
Étude de cas 03 · Fév. → Août 2022

Carrefour

Senior UX/UI Designer · Digital Factory. Trois produits, deux fuseaux, un design system interne à respecter au pixel.

3produits menés en parallèle
6 phasesde parcours cartographiées
2 couloirsen ligne et en magasin
Enjeu business

Convertir des passages en caisse en membres identifiés. La carte de fidélité physique fonctionne — il fallait que le digital ne la remplace pas, mais la prolonge.

Trois produits

Application de fidélité, dashboard de performance ATACADÃO, application de livraison Bringo. Un même designer, trois publics.

Mon rôle

Senior UX/UI en mission. Cartographie du parcours, conception du tunnel d'entrée, revues avec les fronts français et brésilien en Agile Scrum.

Contrainte

Design system Carrefour imposé. Aucune liberté sur la couleur ou la typographie — la valeur se joue entièrement sur la structure du parcours.

Journey mapping · parcours client fidélité de bout en bout
Cartographie du parcours client fidélité Carrefour : six phases — découverte, évaluation, on-boarding, achat, rétention, fidélisation — en deux couloirs, en ligne et en magasin
6 phases × 2 couloirs — faites défiler horizontalementArtefact original

Le couloir bas — l'expérience en magasin — est ce qui a débloqué le projet. Tant qu'on traitait l'app comme un canal isolé, l'inscription restait une friction. Cartographiée en parallèle du passage en caisse, elle devient une étape naturelle du parcours existant.

User flow · tunnel d'entrée, du premier lancement à la carte active
Application Carrefour — écran de lancement
01Lancement
Application Carrefour — tutoriel d'onboarding
02Tutoriel
Application Carrefour — formulaire de création de compte rempli
03Création compte
Application Carrefour — saisie du code OTP reçu par SMS
04Vérification OTP
Application Carrefour — page de bienvenue après validation du compte
05Bienvenue
Application Carrefour — sélection du magasin par géolocalisation
06Choix magasin
Application Carrefour — confirmation du magasin favori
07Magasin favori
Application Carrefour — accueil avec Club Carrefour, catalogues et offres du moment
08Accueil
Carte de fidélité Ikhlass digitale avec code-barres scannable et solde de points
09Carte Ikhlass

Neuf écrans, une seule règle : rien ne demande d'effort avant d'avoir donné quelque chose. Le tutoriel montre la valeur avant le formulaire ; le choix du magasin arrive après la validation du compte, quand l'utilisateur est déjà investi ; la carte scannable est le dernier écran — c'est la promesse tenue.

Responsive · le même choix de magasin, en tablette
carrefour — sélection du magasin favori, format tablette
Sélecteur de magasins Carrefour en tablette : liste des enseignes proches à gauche, carte interactive à droite

En mobile, liste et carte alternent. En tablette, elles cohabitent — la largeur disponible sert à supprimer un aller-retour, pas à étirer les blocs existants.

Composants · extraits de la librairie produit
Composants de l'application Carrefour : notifications, sélecteur de date, vignette catalogue, ligne de liste de courses, carte de fidélité
Notifications, calendrier, catalogue, liste de courses, carte porteurLibrairie
Étude de cas 04 · Sept. → Nov. 2022

RMA Assurances

Consultant Senior UX/UI · Mission de conseil. Deux faces d'un même produit : l'assuré et le gestionnaire.

8 semainesdu cadrage aux specs livrées
2 facesparcours client et poste de travail
Enjeu business

La déclaration de sinistre est le moment où l'assuré juge son assureur. Chaque champ à remplir manuellement est une occasion d'abandonner ou de se tromper.

Parti pris

Supprimer la saisie plutôt que l'optimiser. Le scan de la carte grise et du permis préremplit ce que l'utilisateur aurait tapé.

Mon rôle

Consultant senior. Ateliers de cartographie, revues de design avec produit et métier, livraison des specs Figma.

Contrainte

Huit semaines, calendrier non négociable. Priorisation stricte : ce qui n'était pas décidé en atelier ne serait pas maquetté.

User flow · déclaration de sinistre, côté assuré
RMA — accueil mobile avec quatre points d'entrée : souscription, renouvellement, déclaration de sinistre, réclamation
01Points d'entrée
RMA — sélection du type de véhicule
02Type véhicule
RMA — scan de la carte grise pour préremplir le dossier
03Scan carte grise
RMA — scan du permis de conduire
04Scan permis
RMA — vérification et complétion des informations du véhicule
05Vérification
RMA — choix de l'agence sur une carte
06Choix d'agence
RMA — récapitulatif de paiement et de livraison
07Paiement

Deux scans successifs remplacent une quinzaine de champs. L'écran 05 n'est pas un formulaire : c'est une vérification. On demande à l'utilisateur de confirmer, pas de produire — un effort cognitif d'un ordre de grandeur inférieur.

Poste de travail · la face gestionnaire
SLOT 02
1920 × 1080 px
RMA Assurances — poste de travail gestionnaire
À replacer dans le cadre .mac. La capture actuelle affiche le nom et la photo d'une personne réelle, et une faute de frappe visible dans un indicateur. À ré-exporter anonymisé et corrigé.

Trois indicateurs, pas douze. Nombre de sinistres ouverts, coût moyen, fréquence — chacun comparé à la même période de l'année précédente. Un gestionnaire ne pilote pas un tableau de bord, il cherche l'écart.

Également — 02

Deux rôles plus anciens, toujours structurants.

2020 — 2022 · Montréal & Rabat

Bravo Telecom

Head of UX/UI & Customer Marketing Executive

Premier poste de direction design. Design system créé de zéro — tokens, composants multi-états, documentation web et mobile — et trois designers encadrés, alignés avec la direction technique.

Optimisation de la conversion et de l'expérience Self-Care par A/B tests, entretiens et analytics.

Visuels sous NDA — présentés lors d'un premier échange.
2018 — 2020 · Santa Fe, États-Unis

FZmark LLC

Senior UX/CX/UI Designer · Agence multisectorielle

SaaS, Web, IoT et Gaming. Quatre secteurs, quatre grammaires d'interface — l'école de l'adaptation rapide et des contraintes techniques hétérogènes.

Refontes en tierce maintenance applicative et stratégie UX par compte, de l'audit à la livraison Figma.

Auparavant en indépendant : Fizz.ca, Planhub.ca, Play Telecom, Comparemyrate.
Design System — 03

Ce que je livre quand je livre un système.

Pas une page de composants. Une documentation lisible par un développeur qui n'a jamais parlé au designer.

Documentation des tokens de typographie : échelles de taille, graisses, interlignages et cas d'usage
TypographieTokens
Documentation des tokens d'espacement et de mise en page : échelle d'espacements, conteneurs et grilles
Espacement & layoutTokens
Documentation des composants de navigation : barres, onglets et états
NavigationComposants
Documentation des composants de formulaire : champs, sélecteurs, états de validation et d'erreur
Champs & formulaires — tous les états documentésComposants
Documentation des composants de cartes et conteneurs, avec leurs variantes
Cartes & conteneurs — variantes et règles d'usageComposants
Documentation des boutons et actions : hiérarchie primaire, secondaire, tertiaire, tailles et états
Boutons & actions — hiérarchie, tailles, étatsComposants
Méthode — 04

Six convictions qui structurent mon travail.

01

Structurer avant de dessiner

Sitemap, task flows et architecture d'information viennent avant la première maquette. Toujours.

02

Les tokens avant les composants

Trois niveaux — primitives, sémantiques, CSS. Un composant qui ne consomme pas de token est une dette.

03

Le handoff est un produit

Dev Mode, Style Dictionary, documentation lisible. Si un développeur doit demander, la spec a échoué.

04

Chercher, pas supposer

Entretiens, tests modérés, heatmaps. La roadmap se priorise sur la friction mesurée.

05

L'accessibilité n'est pas une option

WCAG 2.1 AA porté par les tokens sémantiques — donc gratuit à l'échelle, coûteux en rattrapage.

06

L'IA accélère, ne décide pas

LLM sur la synthèse d'entretiens et les variantes. L'arbitrage produit reste humain.

Le défi — 05

Token Match.

Le principe d'un design system tient en une phrase : chaque intention pointe vers une valeur, jamais l'inverse. Associez les six tokens sémantiques à leur primitive. Six paires, le moins de coups possible.

Associez le token à sa valeur

Cliquez deux cartes. Un token sémantique et sa primitive forment une paire.

0
Coups
0/6
Paires
Meilleur
Six paires à retrouver.
Outils & formation — 06

Avec quoi je travaille.

Outils & workflows

Figma · VariablesFigma · Dev ModeFigma · BranchingTokens Studio Style DictionaryZeroheightStorybookProtoPieFramer ClaudeGPT-4oCursorMidjourney MazeHotjarDovetailOptimal WorkshopUserTesting MiroNotionJiraLinear HTML5CSS3TailwindWebflowLottie

Formation & certifications

Mastère Spécialisé Design & Création
Audencia Nantes × École Centrale Nantes · 2024–2025
Master 2 — Administration & Gestion des Entreprises
IAE Perpignan · 2018
PSM 1 — Professional Scrum Master
Scrum.org
Design Thinking Specialist
Coursera
Langues
Français natif · Anglais C1 (IELTS 8) · Espagnol notions

Un système à construire ensemble ?

medelouazghi3@gmail.com

Premier appel de cadrage offert, 30 minutes. Pas de proposition standardisée : on regarde d'abord ce qui bloque réellement dans votre produit.

Badge LinkedIn officiel