Refonte Green design – Airbnb
L’analyse des pratiques de gestion de contenu d’Airbnb soulève des questions quant à leur alignement sur les valeurs de tourisme durable et d’éco-responsabilité. Extrait de l’audit du site web d’Airbnb Voir les livrables Le contexte Projet réalisé en une semaine dans le cadre de ma dernière année de Mastère en Expérience Utilisateur. Le challenge : réaligner la plateforme web Airbnb avec ses engagements RSE. Les objectifs Identifier les freins à l’éco-responsabilité sur la plateforme actuelle. Réduire l’impact environnemental de l’interface sans altérer son efficacité. Proposer une refonte cohérente avec les engagements RSE d’Airbnb. Prioriser les améliorations à intégrer dans un plan projet sur 12 semaines. Mon rôle Audit d’accessibilité et d’éco-conception, analyse concurrentielle et audit des sites concurrents, SWOT, rapport d’étonnement, création de maquettes en utilisant les principes du Green design, prototypage. Les outils utilisés Figma Ara : audits d’accessibilité (outil gouvernemental) EcoIndex (audits éco-conception) Le nouveau processus de mise en location d’un bien Étape 1 Étape 2 : ajout section focus sur l’éco-responsabilité Étape 3 : ajout section focus sur l’accessibilité La démarche & les livrables L’audit qualitatif et quantitatif a mis en lumière les injonctions contradictoires de la plateforme : encourager des séjours courts tout en affichant un discours éco-responsable. Nous avons analysé les parcours utilisateurs, les contenus et les émissions générées grâce aux outils d’audit (EcoIndex). Nous avons ensuite étudié plusieurs concurrents, analysé la règlementation et les engagements publics d’Airbnb. Ce travail a nourri un rapport d’étonnement et une analyse SWOT. La refonte s’est concentrée sur les pages à fort impact : la page d’accueil, la page produit et le parcours de mise en ligne d’un logement. Nous avons appliqué les principes du Green Design. Un plan projet a été structuré sur 12 semaines, avec une priorisation claire des actions. L’ensemble du travail a été compilé dans un document de cadrage et de recommandations de 26 pages. Page d’accueil, retrait du scroll infini Sous le header, nouveau focus recommandations : logements éco-responsables Page location : ajout label éco-responsable Page location : ajout section éco-responsabilité
Refonte landing page – Citroën AMI
Avez-vous déjà vu un grille-pain qui roule ? Baseline de la campagne immersive Voir les livrables Le contexte Lors d’un workshop d’une semaine pour ma dernière année de Mastère User Experience, nous avons collaboré avec la promotion de Mastère Digital Design afin de concevoir une campagne immersive autour de la voiture sans permis AMI de Citroën. Tandis que la direction artistique a été portée par les étudiants en Design (réalisation d’une vidéo en réalité augmentée pour les réseaux sociaux), notre groupe UX s’est concentré sur la refonte de la landing page. Les objectifs Valoriser la gamme AMI à travers une landing page engageante, dynamique et adaptée à la cible des véhicules Permettre à AMI de se distinguer des autres voitures sans permis Séduire un public jeune à l’occasion de la rentrée Reprendre l’humour et l’univers décalé présents sur les réseaux sociaux de la marque Mon rôle Participation à toutes les étapes UX : Définition du concept graphique et éditorial en équipe Conception de l’interface Prototypage dynamique avec intégration de micro-interactions et de sound design immersif Les outils utilisés Figma Miro La démarche & les livrables Le projet a débuté par une phase d’analyse des campagnes existantes et du ton de communication de Citroën. En équipe, nous avons conceptualisé une campagne autour du running gag « le grille-pain », en jouant sur l’autodérision de la marque qui compare le modèle AMI à un grille-pain. Nous avons ensuite conçu une landing page immersive, intégrant : Un header gamifié avec des interactions déclenchant des sons Des animations UX/UI synchronisées avec les interactions Des illustrations et un humour cohérents avec notre nouvelle campagne Un prototype dynamique a été livré à la fin de la semaine. Le header gamifié : la voiture sort du grille-pain lors du choix de la couleur Les avantages Les infos pratiques pour tester la voiture Les cards avis et la FAQ Tutoriel vidéo et bulle newsletter Le footer Le header interactif : la voiture sort du grille-pain au changement de couleur, possibilité de changer l’arrière plan Suite du grille-pain et présentation des avantages Présentation des avantages, possibilité de débrancher la prise Les caractéristiques et vue 3D du véhicule Animation des avis au hover Les cards avis La FAQ Tutoriel vidéo Le footer
Refonte accessibilité – JO Paris 2024
Un site Olympique, mais pas Paralympique. Extrait de l’audit accessibilité Voir les livrables Le contexte Projet de dernière année de Mastère User Experience, réalisé en quatre jours dans le cadre d’un atelier sur l’accessibilité numérique. Rendre le site officiel des Jeux Olympiques Paris 2024 accessible était une nécessité absolue, en particulier à l’approche des Jeux Paralympiques. Les objectifs Rendre le site web des JO Paris 2024 accessible : Grâce au Référentiel général d’amélioration de l’accessibilité (RGAA) et aux normes WCAG 2.2 (Web Content Accessibility Guidelines), identifier les principaux freins à l’accessibilité du site officiel des JO de Paris 2024 Proposer une refonte plus inclusive, respectueuse des normes RGAA et WCAG Tester cette refonte avec des outils adaptés Fournir les spécifications fonctionnelles pour les développeurs Mon rôle Avec mon équipe, participation à toutes les étapes du projet : audit, refonte et tests. Les outils utilisés Figma et plugins design accessible Outils d’accessibilité numérique : Narrateur vocal (NVDA) Navigation Clavier Outils de mesure des contrastes La démarche & les livrables Jour 1 L’équipe a débuté par un audit UX et accessibilité, révélant des incohérences (hiérarchie de titres, textes non lus par les lecteurs d’écran, contrastes faibles, etc.). Nous avons testé l’accessibilité grâce à des outils tels que le lecteur vocal (NVDA), la navigation au clavier et les outils de contraste. Jours 2 et 3 Nous avons ensuite conçu une refonte graphique et structurelle de pages clés sur Figma, en nous appuyant sur les normes RGAA et WCAG. Nous nous sommes aidés de plugins Figma d’aide au design accessible (contrastes, lisibilité des typographies, etc). Jour 4 Nous avons rédigé les spécifications fonctionnelles à destination des équipes techniques afin de respecter les normes d’accessibilité. Page de connexion Page d’inscription Landing page – écran d’accueil Landing page – carrousel Landing page – section infos Landing page – cards Landing page – FAQ Landing page – footer Carte des lieux sportifs Infos accessibilité et transport Landing page – header accueil Landing page – carrousel cards Landing page – sections infos Landing page – carrousel cards Landing page – FAQ Landing page – footer