Après
Refonte Autism Today Foundation
Pendant mon séjour au Canada, j’ai eu la chance de pouvoir travailler en tant que UI/UX Designer pour une association construite autour du support aux familles de personnes atteintes d’autisme.
J’ai donc été chargé d’un rafraîchissement, un « rebranding » de leur site internet principal.
Problématiques
J’ai pu constater plusieurs points de friction au niveau de l’interface :
- Une navigation compréhenssible mais confuse.
- Un non respect de la charte graphique concernant les couleurs et typographies de certains éléments créant une incohérence visuelle.
- Un manque de cohérence dans les sections.
- Des CTA menant vers des pages sans rapport.
Objectifs de la refonte
Les objectifs sont les suivants :
- Passer d’un header avec des sous catégories non essentielles à la navigation à un header simplifié gardant les éléments principaux permettant une plus grand fluidité UX.
- Garder la cohérence du site et des sections avec une réaorganisation de ces dernières pour une navigation plus lisible.
- Harmoniser l’UI, les typographies et CTA en respectant la charte graphique.
Personas
Site map
Avant
Après
Design system
Landing page
La première chose que j’ai mis à niveau fût le header qui comportait trop de rubriques, le tout devenant nuisible à l’expérience utilisateur par manque de lisibilité.
Mon deuxième point d’approche porta sur l’uniformisation des boutons en fonction des thématiques tout en rappelant les codes couelurs de la charte graphique.
Enfin, je fis en sorte de ne garder que 2 typographies : la Work Sans pour les titres et la Roboto pour les textes.
Avant
Après
World Autism Summit
Avant
Après
Autism Today Directory
Avant
Après
Memberships
Cette catégorie fût très intéressante à retravailler car j’avais envie d’avoir un menu simple à respecter au niveau du header, sans sous catégories.
J’ai donc repensé les 2 pages qui avait été créé au préalable, pour n’en faire qu’une seule permettant d’accéder aux mêmes informations de manière plus lisible.
Avant
Après
About us
Concernant cette section, il a fallu concentrer les informations des 5 pages formant la catégorie en 1 seule cohérente.
Avant
Après
Resources
Avant
Le même processus a été réalisé pour cette section que pour la précédente.
Articles
Avant
Après
Prototype
Typographies et couleurs
