Contexte 🎯
En 2021, l’association Diversidays souhaite offrir un renouveau à son identité visuelle. Elle souhaite également revoir l’expérience utilisateur que propose son site actuel afin de répondre le plus possible aux besoins de ses visiteurs. L'objectif de ce projet était de répondre à tous ces besoins tout en gardant à l’esprit l’importance de l’accessibilité : le maître mot de Diversidays étant l’inclusion numérique.
Intervention sur la plateforme existante 🚧
Problématiques
✅
Analyse de l’UX existant assez complexe et dense : quelles seraient nos recommandations les plus adaptées pour répondre aux besoins ?
✅
Carte blanche sur l’identité visuelle : risque de ne pas convaincre assez rapidement
✅
Beaucoup de contraintes viennent ralentir l’application de l’accessibilité au sein du projet
Méthodologie
Analyse de l’UX
Dans un premier temps, nous avons analysé toute l’architecture du site actuel de manière à pouvoir la réadapter de manière cohérente avec la nouvelle demande d’architecture. Des sections de pages ont été déplacées à des endroits plus adaptés, d’autres ont été ajoutées car elles devaient répondre à un besoin et enfin d’autres ont été supprimé car elles n’apportaient rien à l’expérience utilisateur.
Déclinaison des wireframes
De ces changements ont découlé des modifications UX de certaines pages importantes, nous les avons donc décliné sous forme de wireframes de manière à préparer au mieux la suite.
Recherche graphique
Pour cette étape, nous avons commencé par réaliser des moodboards graphiques en fonction des différentes valeurs de Diversidays. Nous voulions faire ressortir l’inclusion, la cohésion, l’accompagnement, l’humain, l’ambition et la polyvalence. Plusieurs tests graphiques ont découlé de ces recherches. Voici quelques exemples des traductions graphiques que nous avons mises en place :
1. Formes plutôt rondes et fluides pour rassurer
2. Éléments décoratifs “à la main” pour valoriser l’humain
3. Le dynamisme des visuels en mosaïques (photos et couleurs) pour représenter la force de la différence
Conception UI accessible
Une fois l’identité visuelle validée par toute l’équipe, nous avons pu créer les composants graphiques via un design system cohérent et 100% personnalisé. Diversidays prône les valeurs de l’inclusion, il fallait donc également vérifier les taux de contraste au niveau des couleurs utilisées via des outils tel que “Stark”. Nous avons également réalisé et proposé à l’équipe un guide complet “Comment être inclusif” pour leur donner toutes les clés en main (lois RGAA et autre) et retranscrire leurs valeurs jusque dans leur site web.
Maquettes graphiques responsives
Enfin, toutes ces étapes mènent à la déclinaison des maquettes graphiques finales responsives. Elles sont donc livrées au client au format desktop et mobile.
