À propos · Portfolio UX/UI

Une interface réussie est celle qui disparaît.

Bonjour, je m’appelle Ayoub Esqalli et j’habite à Casablanca. Passionné par le design et les technologies, je me suis spécialisé dans le design UX/UI : des interfaces qui mènent l’utilisateur à son objectif sans friction ni confusion.

+20 projets
+80 écrans

Lire mon approche

01 · À propos de moi

Le design, une manière de penser.

L’UX/UI design est bien plus qu’un métier pour moi : c’est une manière de penser et de résoudre des problèmes. Depuis mes premières expériences en développement web jusqu’à ma spécialisation en design d’interfaces, une obsession m’anime : créer des expériences fluides, intuitives et impactantes.

J’aime comprendre comment les utilisateurs interagissent avec un produit, anticiper leurs besoins et concevoir des interfaces qui transforment leur parcours en une expérience agréable et efficace. Mon travail est centré sur l’utilisateur : recherche UX, design system, prototypage et tests itératifs, pour que l’esthétique et la fonction avancent ensemble.

Ce qui me motive au quotidien, c’est de voir mes designs non seulement utilisés, mais surtout appréciés. Une interface réussie, c’est celle qui disparaît aux yeux de l’utilisateur : il atteint son objectif sans jamais buter sur elle.

Années de design: 7
Applications conçues: 22
Pays où elles tournent: 5

02 · Mon approche UX/UI

Le design, un équilibre entre l’art et la science.

Ma philosophie repose sur une conviction : le design doit servir l’humain avant tout. Bien au-delà d’interfaces esthétiques, il résout des problèmes réels ; chaque décision se fonde donc sur une compréhension fine des besoins, des comportements et des contraintes des utilisateurs.

L’art se voit dans des interfaces attrayantes et cohérentes ; la science dans l’analyse des données, la recherche utilisateur et l’optimisation continue de ce qui est livré. Il faut les deux pour un produit beau, utile et utilisable.

Deux points de départ, deux méthodes

Nouveau projet

De l’idée à la réalisation

Une page blanche offre la plus grande liberté créative et exige la plus grande rigueur de recherche. Sans données d’usage réelles, chaque choix s’appuie sur la recherche utilisateur, des hypothèses testées et des prototypes, et sur une vision claire des besoins à venir.

Projet existant

Partir des données

Les métriques d’usage, les retours utilisateurs et les analyses de performance montrent où sont les frictions et quoi améliorer. Le défi : respecter les contraintes techniques en place et conduire le changement sans perturber les utilisateurs actuels.

Les quatre phases d’un nouveau projet

ADécouverteEmpathize & define
Comprendre les utilisateurs et le marché avant de dessiner quoi que ce soit.
- Entretiens, questionnaires et sessions d’observation avec des utilisateurs potentiels, pour connaître leurs habitudes et leurs frustrations.
- Les données d’usage, sur le web et sur mobile, pour voir ce que les gens font vraiment.
- Un benchmark : les principales apps concurrentes utilisées chaque jour, leurs forces et faiblesses documentées, une analyse SWOT et un référentiel des patterns qui marchent.
- Des ateliers de cadrage : les KPIs, l’Impact Mapping, le Problem Statement et les questions « How might we » transformés en plan d’action.
Outils
- Google Meet
- Google Forms
- Hotjar
- Google Analytics
- Firebase Analytics
- FigJam
- Notion
BRecherche UXIdeate
Transformer ce qui a été entendu en personnes, en parcours et en structure.
- Trois à quatre personas tirés des entretiens : objectifs, motivations, points de friction, scénarios d’usage.
- Des user journey maps dessinées en atelier : actions, points de contact, émotions et opportunités.
- L’architecture de l’information : sitemap, card sorting, taxonomie et patterns de navigation.
Outils
- Figma
- FigJam
- Optimal Workshop
CConception UXPrototype
Du croquis sur papier au système documenté.
- Des wireframes rapides sur papier pour explorer, puis des wireframes détaillés sur Figma, annotés pour les développeurs.
- Mobile first : le petit écran d’abord, le contenu essentiel d’abord, les interactions tactiles optimisées.
- L’Atomic Design et un design system documenté : typographie, couleurs, composants, espacements et patterns.
- Des maquettes haute fidélité avec leurs micro-interactions, les états des composants et les transitions.
Outils
- Figma
- Storybook
DTestTest
Vérifier avec de vrais utilisateurs, puis itérer.
- Des tests utilisateurs modérés et non modérés, à distance ou en présentiel, chacun avec son protocole écrit : objectifs, scénarios, critères de réussite.
- Des tests d’accessibilité (WCAG), de performance et des A/B tests.
Outils
- Google Meet
- Figma

03 · Projets professionnels

Des produits utilisés chaque jour.

Mes réalisations professionnelles majeures, où j’ai conjugué expertise technique et approche UX, sur le web comme sur mobile. Les noms des clients restent confidentiels.

Parcours

2024 → aujourd’hui
Lead product & UX/UI designer
Une startup FoodTech française
2023
Designer UX/UI
Une app d’open banking
2019 → 2023
Product & brand designer
Freelance
Formation
Ingénieur d’État
Data science

2024 → aujourd’hui · Lead product & UX/UI designer

Une plateforme SaaS pour la restauration

Contexte: Une suite de modules pour les restaurants, du fast-food à la table gastronomique : commande, encaissement, production, stocks et pilotage dans une seule interface, pour réduire les coûts et accroître la rentabilité.
Mon rôle: Je pilote la conception et la refonte des 22 applications de la suite, tout le processus UX et UI, avec les équipes de développement, de marketing et les parties prenantes, pour que les contraintes techniques et les objectifs de l’entreprise se rejoignent.

Ce que j’ai conçu

Analytics en temps réel
Le chiffre d’affaires, la comparaison des périodes et tous les points de vente sur un tableau de bord mobile personnalisable.
App de commande à votre nom
Le paiement valide la commande et déclenche sa préparation ; des suggestions augmentent le panier moyen ; un programme de fidélité fait revenir les clients.
Borne de commande
Explorer le menu, personnaliser son plat et commander en quelques clics : moins d’erreurs, moins d’attente.
Commande à table
Une web app en marque blanche ouverte par QR code, sa carte choisie selon le lieu et l’heure : déjeuner, dîner, chambre, rooftop.
Caisse et production
La prise de commande et l’encaissement au comptoir, et l’écran d’où la cuisine prépare.
Back-office
Un seul endroit pour piloter tous les modules de l’écosystème.

Installées sur plus de 1 500 appareils dans cinq pays, utilisées chaque jour par des milliers de personnes.

Croquis lo-fi : les écrans du client restent privés.

2023 · Designer UX/UI

Une app d’open banking

Contexte: Tous les comptes bancaires sur une seule plateforme, dans un marché où particuliers et entreprises veulent des paiements rapides, sécurisés et simples.
Mon rôle: J’ai piloté la conception, de la recherche initiale à la validation finale du design, avec les équipes de développement, de marketing et les parties prenantes, pour que les besoins des utilisateurs et les objectifs commerciaux restent alignés.

Ce que j’ai conçu

Recherche
Les retours utilisateurs analysés et les apps concurrentes étudiées, pour trouver les points faibles et les fonctionnalités à ajouter.
Prototypes et tests
Des prototypes interactifs sur Figma, testés en sessions itératives avec des utilisateurs cibles avant le développement.
Le produit
Tous les comptes au même endroit, les dépenses suivies en temps réel, des transferts instantanés par lien de paiement ou QR code : une app mobile et un tableau de bord web.
Le site web
Refondu et enrichi sur Webflow : plus de onze nouvelles pages et un blog automatisé, optimisé pour le référencement.

Trois enjeux du début à la fin : centraliser les données financières, améliorer l’expérience, rester sûr et rapide.

Croquis lo-fi : les écrans du client restent privés.

Les études de cas complètes sont en cours d’écriture.Voir les réalisations

04 · Projets personnels

Là où je repousse les limites du design.

Mes réalisations personnelles, où j’explore pour moi-même des expériences interactives : une place de marché de location complète, une app mobile et des applications web SaaS.

Application web · Location de voitures

Rentcar

Une place de marché de location de voitures à Casablanca, prix en dirhams, conçue de la première recherche jusqu’au profil : neuf écrans qui suivent le parcours du locataire.

Le parcours, écran par écran

Accueil de Rentcar : la barre de recherche sur une voiture dans le noir

Écran 1 sur 9

Accueil. La recherche d’abord : le lieu et les dates dans une seule barre, au-dessus de la ligne de flottaison, puis les marques, les voitures populaires et le fonctionnement.

Faites défiler l’écran pour voir toute la page.

App mobile · Place de marché NFT

ArtChain

Les premières minutes dans une place de marché NFT : deux versions de l’accueil, puis une inscription découpée en trois étapes pour qu’aucun écran n’en demande trop.

01 · Accueil
02 · Accueil, plein écran
03 · E-mail
04 · Code
05 · Profil

Application web SaaS
Cloudixy
Le tableau de bord d’un service cloud : stockage, disponibilité, menaces bloquées, facturation et trafic d’un coup d’œil.
Landing page
Cloudixy
La landing page du même produit : la promesse, une action, puis le tableau de bord lui-même.
Site de réservation
MECCA Booking
Un logement près du Haram : une seule barre de recherche, les quartiers populaires, des hôtes vérifiés.