Étude de cas : Portfolio Majid El Mamouni
Contexte
Majid El Mamouni, élève ingénieur à Polytech Lille, cherchait une première expérience en ingénierie d'affaires. Il voulait un site pour présenter son parcours.
Ce que ce projet démontre
- Faire émerger un besoin implicite
- Définir une cible prioritaire
- Prioriser avec MoSCoW
- Concilier animations et efficacité
- Livrer un site client en ligne
Du besoin exprimé au besoin racine
- Demande initiale « Un portfolio moderne, avec des animations, pour présenter mon parcours. »
- Solution imaginée Un site visuellement marquant, riche en effets.
- Ce que l'analyse révèle Un CV qui cite des technologies sans montrer les projets, face à des recruteurs qui doivent juger vite.
- Besoin racine Permettre à un recruteur d'évaluer rapidement le profil, preuves à l'appui, puis de prendre contact.
Votre objectif n'est pas seulement d'avoir un beau site : c'est de rendre votre profil et vos réalisations faciles à comprendre, pour susciter des échanges professionnels.
Le questionnement
8 questions, de la demande au besoin racine
Échanges reformulésLes questions que j'ai posées pour comprendre le besoin, et l'essentiel des réponses, reformulés.
-
Clarifier la demande « Quand vous parlez d'un portfolio moderne, qu'aimeriez-vous surtout faire découvrir ? »
- Intention
- Comprendre ce qui doit être valorisé au-delà du style.
- Réponse
- « Mon parcours, mes compétences et mes projets, avec une présentation qui me ressemble. »
- Ce que j'en déduis
- L'identité visuelle compte, mais le contenu professionnel est central.
-
Comprendre l'objectif « Dans quelle situation quelqu'un consultera-t-il votre portfolio, et que devrait-il faire ensuite ? »
- Intention
- Identifier le bénéfice attendu.
- Réponse
- « Lors d'une candidature : qu'un recruteur regarde mon site et me contacte. »
- Ce que j'en déduis
- Le portfolio est un support d'employabilité.
-
Identifier les utilisateurs « Qui voulez-vous convaincre en priorité : recruteurs, managers, réseau ? »
- Intention
- Éviter un site qui parle à tout le monde, donc à personne.
- Réponse
- « Surtout des recruteurs et des responsables d'équipe. »
- Ce que j'en déduis
- Le site doit permettre de juger vite l'adéquation du profil à un poste.
-
Comprendre l'existant « Aujourd'hui, comment présentez-vous vos projets quand vous candidatez ? »
- Intention
- Identifier les supports déjà disponibles.
- Réponse
- « Un CV, parfois LinkedIn, mais je ne peux pas vraiment montrer mes projets. »
- Ce que j'en déduis
- Il manque des preuves concrètes des réalisations.
-
Rechercher les difficultés « Qu'est-ce qui est difficile à montrer avec votre CV ? »
- Intention
- Trouver la valeur ajoutée du portfolio.
- Réponse
- « On voit les technologies, pas comment je les ai utilisées ni ce que j'ai réalisé moi-même. »
- Ce que j'en déduis
- Le portfolio doit apporter des preuves et du contexte, pas répéter le CV.
-
Définir le critère de réussite « Que doit comprendre un recruteur en moins d'une minute ? »
- Intention
- Traduire l'objectif en critère d'expérience utilisateur.
- Réponse
- « Mon métier, mes compétences, mes meilleures réalisations et comment me contacter. »
- Ce que j'en déduis
- La hiérarchie de l'information prime sur la quantité d'effets.
-
Challenger la solution « Si une animation spectaculaire ralentissait l'accès à vos projets sur mobile, la garderiez-vous ? »
- Intention
- Arbitrer entre préférence esthétique et utilité.
- Réponse
- « Non : je préfère un site fluide où l'on trouve vite l'information. »
- Ce que j'en déduis
- Les animations doivent servir le parcours, jamais le bloquer.
-
Valider le besoin racine « Votre priorité est donc un profil facile à comprendre, des réalisations concrètes et un contact simple. C'est bien cela ? »
- Intention
- Confirmer la reformulation avant de concevoir.
- Réponse
- « Oui : un site qui me représente, mais surtout qui donne envie d'en savoir plus. »
- Ce que j'en déduis
- L'enjeu est la valorisation professionnelle et la mise en relation.
Le recruteur
Recruteur ou responsable d'équipe, en phase d'évaluation
- Objectif
- Déterminer si le profil correspond aux compétences attendues.
- Ce qu'il cherche
- Le métier visé, le parcours, les compétences, les réalisations, les coordonnées.
- Ce qui le freine
- Un manque de contexte, des projets peu explicites, une navigation complexe, un CV difficile à trouver.
- Attente principale
- Accéder rapidement à des preuves pertinentes des compétences.
Must have Indispensable
- Présentation claire
- Compétences
- Parcours
- Réalisations
- Contact
Should have Important
- CV accessible
- Détail des projets
- Navigation mobile efficace
Could have Si le temps le permet
- Animations et transitions
- Filtres de projets
- Recommandations
Won't have (V1) Exclu de la première version
- Animations lourdes
- CMS complexe
- Fonctionnalités sans bénéfice identifié
Chaque élément est rattaché à la valeur pour le recruteur, pas à son attrait technique.
Arbitrer et spécifier
Option B : un portfolio structuré, centré sur les preuves.
Les animations demandées sont conservées, mais encadrées : l'intro ne se joue qu'une fois par visite, se passe d'un clic et ne bloque jamais l'accès au contenu.
Le livrable fonctionnel : user stories et critères d'acceptation
-
En tant qu'recruteur,
je souhaite comprendre rapidement le métier et les compétences de Majid
afin de évaluer la pertinence de son profil.
-
En tant qu'responsable technique,
je souhaite consulter des exemples de réalisations
afin de apprécier ses expériences concrètes.
-
En tant qu'visiteur intéressé,
je souhaite trouver facilement un moyen de contact
afin de poursuivre l'échange.
Critères d'acceptation
-
Étant donné un visiteur qui arrive sur l'accueil,
Alors il identifie le métier visé et accède aux réalisations sans attendre la fin d'une animation.
-
Étant donné un visiteur sur mobile,
Lorsque il ouvre le détail d'un projet,
Alors il retrouve un moyen de contact sans perte d'information ni blocage de navigation.
Ce qui a été réalisé
Une page d'accueil à sections, que l'on parcourt de haut en bas, et deux pages dédiées aux projets les plus parlants.
- Accueil identité, CV
- Résumé parcours
- Qualités
- Projets deux détaillés
- Compétences outils, langues
- Contact formulaire
-
Intro animée maîtrisée
Jouée une seule fois par visite, passable, puis focus placé sur le titre principal.
-
Navigation
Menu mobile accessible et indicateur de la section en cours sur ordinateur.
-
Langues en niveaux CECRL
Un niveau lisible par un recruteur, plutôt qu'un pourcentage.
Sous le capot : choix techniques
- MVC sur mesure
- Routeur, contrôleurs, vues, sessions et validation des formulaires écrits en PHP, sans framework.
- Formulaire protégé
- Jeton CSRF, champ piège, délai minimal avant envoi, limites par session et par adresse IP.
- Mobile d'abord
- Styles pensés pour le téléphone, puis enrichis ; animations désactivées si l'utilisateur les réduit.
Proposition Améliorations identifiées lors de l'audit : balises Open Graph et données structurées pour le partage et le référencement.
Captures
-
(agrandir)
Accueil -
(agrandir)
Page projet -
(agrandir)
Page projet sur mobile
Résultat
- Un portfolio en ligne, sur son propre nom de domaine, avec un formulaire de contact opérationnel.
- Des animations conservées, sans jamais retarder l'accès à l'information.
Je voulais un portfolio clair et professionnel pour ma recherche d'alternance. Mes projets sont bien mis en valeur et le site fait bonne impression auprès des recruteurs. Merci pour la réactivité et les conseils !
Ce que j'en retiens Une demande esthétique cache souvent un objectif. Le retrouver permet de garder ce qui plaît au client tout en servant ce qui compte pour ses lecteurs.
Compétences démontrées ici
- Responsive et accessibilité