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.

‍