Météo France
Refonte UX/UI de la page d’accueil de Météo-France, réalisée en solo dans le cadre d’un sprint d’une semaine. Le projet couvre l’ensemble du processus de conception, de l’audit UX et de la recherche utilisateur à la direction artistique, au design d’interface et au prototypage interactif.
Le défi
La homepage actuelle de Météo-France manque de clarté, de modernité et de souplesse pour s'adapter aux différents usages. Pourtant centrale dans l'expérience, la carte météo reste peu exploitée et ne permet pas d'accéder facilement aux différents niveaux d'information dont les utilisateurs peuvent avoir besoin.
La solution
Repenser la homepage desktop pour proposer une expérience plus claire, plus moderne et plus évolutive, capable d’offrir une lecture immédiate pour les besoins du quotidien, tout en donnant accès rapidement à des données plus détaillées et personnalisées.
Objectifs
La nouvelle expérience devait offrir une lecture immédiate des informations essentielles, tout en facilitant l’accès aux données plus détaillées. La carte météo est repensée pour mieux répondre aux besoins du quotidien comme aux usages plus avancés, avec une attention particulière portée à la lisibilité et à l’accessibilité.
Méthodologie
Le projet suit une démarche UX structurée autour du Double Diamant, avec une progression de l’analyse de l’existant jusqu’à la conception et au prototypage. Chaque étape permet de mieux comprendre les besoins, de cadrer les priorités, d’explorer différentes pistes et d’aboutir à une expérience desktop cohérente, claire et orientée vers les usages.
Analyse heuristique
L’analyse heuristique menée selon les critères de Nielsen a révélé plusieurs points de friction affectant la lisibilité, l’accessibilité et la structuration de l’information. Le header apparaît trop chargé, tandis que la carte météo manque de visibilité et d’accessibilité. Les informations sont dispersées, la hiérarchie éditoriale manque de clarté et certains contrastes restent insuffisants. L’analyse met également en évidence une distinction peu claire entre les publicités et le contenu, ainsi qu’une conformité RGAA perfectible.
Benchmark concurrentiel
L’étude des solutions concurrentes a permis d’identifier des patterns d’interface et des mécaniques d’usage pertinents pour enrichir la future homepage. Lecture immédiate, information contextualisée et expérience adaptable constituent les principaux enseignements retenus.
Proto personae
Deux profils aux usages très différents ont été identifiés. Clara recherche une information rapide et lisible pour organiser son quotidien, tandis que Marc a besoin de données météorologiques précises et détaillées pour prendre des décisions liées à son activité professionnelle.
Ces deux profils soulignent un enjeu central : proposer une interface immédiatement lisible pour les besoins courants, tout en permettant d’accéder facilement à des informations plus détaillées et personnalisées.
How might we?
Plusieurs questions ont guidé la réflexion : comment permettre à Clara d’accéder à l’essentiel en quelques secondes, tout en offrant à Marc un accès rapide à des données locales précises et détaillées ? Comment rendre la homepage immédiatement pertinente selon la localisation et les besoins de chacun ?
Différentes pistes ont ensuite été explorées : carte interactive immersive, informations contextuelles, géolocalisation, prévisions heure par heure, modes simple et expert, lieux favoris ou encore données complémentaires comme les pollens et la pollution.
Arbitrage UX
Le choix s’est porté sur une homepage claire et accessible, capable de s’adapter à différents niveaux de besoin. L’interface privilégie la lisibilité grâce à une hiérarchie de contenu claire, des contrastes renforcés et des informations accessibles au survol.
L’expérience propose ainsi un accès immédiat à l’essentiel, tout en ouvrant la voie à un mode expert pour les utilisateurs recherchant des données plus détaillées. Un assistant IA a été ajouté afin de fournir des renseignements sur mesure
Direction artistique
Pour cette refonte, j’ai construit l’identité visuelle autour de trois mots-clés : Claire, Moderne, Dynamique, qui orientent le choix des couleurs, typographies et éléments graphiques.
La palette chromatique s’appuie sur des teintes inspirées de l’univers météo, avec un équilibre entre lisibilité, fraîcheur et contraste.
Avec ses formes légèrement arrondies, Jaldi Bold apporte une présence plus chaleureuse et dynamique aux titres, tandis que Inter garantit une lecture claire, fluide et efficace pour les contenus et les données d’interface.
Le logotype a été simplifié et adouci pour mieux s’inscrire dans une interface plus contemporaine et accessible. Une version horizontale a également été pensée pour s’intégrer plus naturellement au header du site.
L’iconographie a été repensée avec des pictogrammes météo simplifiés et contrasté afin de faciliter la lecture.
UI Kit
Un ensemble de composants UI a été conçu pour assurer une expérience cohérente et homogène à travers l’interface. Cards, boutons et info-bulles ont été pensés pour faciliter la lecture et rendre les interactions plus claires et intuitives.
Conception et tests utilisateurs
Le zoning a permis de structurer les principaux espaces et parcours de la homepage avant de passer à la conception haute fidélité.
Des tests utilisateurs ont ensuite permis de recueillir des retours sur la compréhension et l’utilisation de l’interface. Ces observations ont conduit à plusieurs ajustements, notamment l’ajout d’un parcours d'onboarding afin d’accompagner progressivement les utilisateurs dans la découverte des nouvelles fonctionnalités.
Le résultat
La nouvelle expérience offre une lecture immédiate de la météo locale, avec un accès en un clic aux prévisions détaillées et aux données enrichies. Une organisation plus claire des contenus et une navigation plus intuitive facilitent l’accès à l’information utile, tandis qu’un assistant intelligent ouvre la voie à une expérience plus personnalisée. Le projet aboutit à un prototype desktop interactif, mettant en œuvre les principaux choix UX/UI de la refonte.
Voir le prototype