Adhemar.net

Problème

Mon parcours professionnel est celui d'un chef de projet. A travers ce portfolio, je souhaite aujourd'hui démontrer à d'éventuels recruteurs que même si mon expérience professionnelle en tant qu'UX Designer fait encore défaut, j'en ai toutes les compétences.

Persona

Afin de ne pas perdre mon objectif de vue, j'ai créé un proto-persona de recruteur. Sur la base des échanges que j'ai pu avoir (emails, téléphone, entretiens), j'ai essayé d'en traduire leurs attentes, besoins et contraintes pour me guider dans la conception de mon portfolio.

Prototype papier

Avant de faire un benchmark et de me laisser influencer par ce que d'autres avaient fait, j'ai voulu produire rapidement des prototypes papiers, principalement pour 2 raisons :

• voir à quoi aurait ressemblé mon premier jet
• d'ores et déjà me confronter à d'éventuels problèmes et observer comment ils ont été contournés dans mon benchmark à venir

Voici ce premier jet :

Benchmark

Avant d'aller plus loin, j'ai donc voulu jeter un œil aux best-practices de portfolio d'UX Designer.
Le rôle de l'UX n'est pas de livrer des écrans graphiques mais plutôt un travail de recherche sur l'utilisateur, son parcours, ses différents points de contact, de prototypage d'interface, ... des éléments qui méritent souvent plus de texte que d'images pour expliquer le chemin de réflexion. Répondant à cette démarche, 3 portfolios ont particulièrement attiré mon attention :

• Simon Pan
• Peter Schuszter
• Edmund Yu

Architecture du contenu

Suite à ce benchmark, j'ai modifié l'organisation initiale de mes prototypes papier pour en obtenir la séquence suivante :

• Ecran d'accueil : Un écran simple et clair avec un call-to-action sans équivoque pour engager la visite (à la façon de Edmund Yu). Je souhaitais également introduire une photo pour humaniser l'environnement et que le visiteur puisse me représenter immédiatement. Dans cet écran d'accueil, pensé comme une landing page, je cherchais aussi à me différencier, créer immédiatement un lien émotionnel avec le visiteur et en dire le plus possible sur ma personnalité, éléments essentiels de toute bonne UX. C'est ainsi que l'idée de faire un gif animé façon "trombinoscope en stop-motion" a émergé.
• Compétences : Dans mes entretiens, ma maîtrise de telle méthodologie ou de tel logiciel est une question qui est souvent revenue. Il s'agissait donc d'un besoin qu'il fallait adresser en priorité. De plus, étant junior et doté d'un portfolio encore fluet, prioriser la section Compétences m'est apparu essentiel. Pour cette partie, j'ai voulu m'inspirer de Peter Schuszter.
• Portfolio : Ici, je souhaitais trouver le juste milieu entre les présentations très succinctes de Peter Schuszter et celles trop volubiles de Simon Pan, d'autant que, soyons honnête, mes projets n'ont pas la même ampleur. Je souhaitais expliquer mes projets, les différentes étapes, réflexions et livrables qu'ils avaient générés.
• Expériences : Encore junior en tant qu'UX Designer mais avec déjà quelques années d'expérience professionnelle à mon actif, la section Expérience a pour but d'exposer mon parcours, mes différents domaines d'action et d'éviter l'étiquette "tout juste sorti des bancs de l'école".
• Contact : Cette section devait présenter les principaux réseaux sociaux où l'on peut me retrouver. Pour rester dans le code des landing pages, je voulais inclure un call-to-action afin de ne laisser aucun doute sur la façon de me contacter.

Mon intention était de présenter ce contenu de la façon le plus simple et concise possible.
Pour limiter les temps de chargement et faciliter la navigation, j'ai donc décidé de partir sur un format de one-page website. A ce titre, je trouvais la navigation de Edmund Yu particulièrement efficace mais peu adaptée au long format texte de ma partie Portfolio. J'ai alors choisi d'afficher mes projets de Portfolio comme des overlays en plein écran. Cela me permettait de profiter tout l'espace de l'écran pour présenter mes projets tout en concentrant l'attention du lecteur sur ce seul élément.
Pour assurer la bonne compréhension du visiteur de sa localisation dans le site, la façon de faire apparaître cet overlay était cruciale. A l'instar de l'écran d'accueil d'iPhone, j'imaginais à cette étape qu'un clic provoque l'élargissement de l'aperçu du projet jusqu'à sa taille plein écran.

Afin de "créer un univers" tout en présentant ma personnalité, j'ai aussi voulu trouver un ton, entre efficacité, simplicité et humour. Cette dimension se retrouverait dans la rédaction, certains call-to-action, quelques liens et images.

Enfin, dans une démarche UX, je souhaitais recueillir des informations sur l'efficacité de ce portfolio, s'il répondait à toutes les attentes et présentait suffisamment mon profil afin d'opérer les ajustements nécessaires si besoin. L'intégration d'un questionnaire via le service Typeform m'apparaissait alors intéressante.

Prototype interactif

Au vu de l'étendue limitée de ce projet, le prototype interactif serait directement la version finale. Après quelques recherches, j'ai découvert le thème Freelancer, basé sur Bootstrap, qui me servirait de bonne base de départ.
J'ai ensuite intégré les éléments issus des étapes précédentes. J'ai pris soin d'assurer la cohérence des éléments statiques (couleurs blanches et noires) et interactifs (boutons noirs arrondis, couleur orange) ainsi que de l'affordance des boutons par rapport à leur action.
Des ressources (merci Codrops !) m'ont d'ailleurs permis de réaliser l'effet d'élargissement de l'aperçu du projet jusqu'à sa taille plein écran que j'avais en tête.
Quelques autres difficultés techniques se sont dressées au fil de la réalisation, mais rien d'insurmontable avec un peu de temps et de persévérance.

Tests d'utilisabilité

En cours...
(ce n'est certes pas le projet le plus riche pour le faire, mais autant s'entraîner le plus possible, non ?)

Optimisation continue

Comme tout projet avec une démarche UX, ce portfolio est voué à être optimisé de façon continue pour répondre le plus efficacement aux besoins des visiteurs ciblés : les recruteurs.
J'ai donc mis en place un questionnaire Typeform dont je répertorie et analyse les réponses.
Pour ce projet, j'ai également voulu tester le service Heap afin de surveiller tous les clics et défilement de page et ainsi déterminer quels éléments concentrent le plus d'attention et si des modifications méritent d'être apportées.

Ce portfolio a été lancé tout récemment et le volume d'informations récoltées n'est pas encore significatif pour en tirer des conclusions pertinentes.