Diversidays

Site vitrine

2021

Association
Refonte UI
Audit UX

Analyse de l’UX, recherches UI & maquettes graphiques

Diversidays est une association d’égalité des chances en faveur de l’inclusion numérique et de la diversité des talents dans la Tech en France. Cofondée en 2017 par Mounira Hamdi et Anthony Babkine, elle accompagne les porteurs de projets de la diversité et du numérique dans le développement de leur activité.

Contexte  🎯

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Intervention sur la plateforme existante  🚧

chiffre un dans cercle bleu clair
This is some text inside of a div block.
chiffre deux dans cercle bleu clair
This is some text inside of a div block.
chiffre trois dans cercle bleu clair
This is some text inside of a div block.
chiffre quatre dans cercle bleu clair
This is some text inside of a div block.
chiffre cinq dans cercle bleu clair
This is some text inside of a div block.
chiffre six dans dans bulle bleu clair
This is some text inside of a div block.

Problématiques

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

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

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.

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

Benchmark design pour Diversidays

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.

Design system Diversidays

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.

maquettes graphiques finales responsive Diversidays

Nos dernières réalisations

Découvrez notre approche en pratique !
Découvrez nos réalisations

Contactez-nous

Une question ? N’hésitez pas à nous écrire !

🥳

Votre message a bien été envoyé !
La meute s'en occupe le plus vite possible
Il semble qu'il y ait une erreur, veuillez réessayer...