5 Degrés
Objectif du projet
Refonte complète du site web suite à une nouvelle identité : reconstruction du parcours utilisateur complet, de l’identité visuelle du site pour s’accorder à la nouvelle charte, et tout ça en ayant une vision de bonnes pratiques d’accessibilité et d’éco-conception.
Les enjeux du projet
Arborescence
Création d'une nouvelle arborescence du site, plus pratique à naviguer pour l'utilisateur et plus organisée pour chacune des 2 cibles majeures :
- Clients : présentation des différentes offres et solutions proposées
- Candidats : espace carrière développé sur plusieurs pages, avec les valeurs, l'accompagnement et la vie interne
Parcours utilisateurs
Avec la nouvelle arborescence, j'ai établi les différents types d'informations, éléments et blocs à retrouver sur chacune des pages, en fonction des besoins de 5 Degrés et de ce que les cibles du site souhaitent y trouver.
Wireframes prototypés
Mise en forme de tout ce parcours utilisateur avec des wireframes prototypés, afin de tester en conditions réelles la navigation et les fonctionnalités du site.
Conception mobile
Création de wireframes mobile : responsive mais avant tout adaptif. Ajuster les blocs mobiles entre réalignement et reconstruction selon leur contenu et leur fonctionnalité, pour optimiser l'ergonomie.
Nouvelle charte graphique
Création d'une maquette qui s'adapte à la nouvelle identité visuelle de l'agence 5 Degrés, une des raisons de cette refonte web.
Au plus près de la volonté du client
Pour respecter au mieux les attentes et les goûts de 5 Degrés, 2 maquettes de homepage ont d'abord été proposées. Ensuite, avec les retours et préférences sur chacune, elles ont été combinées et retravaillées en une seule jusqu'à obtenir la version finale souhaitée.
Maquette finale prototypée
C'est ensuite à partir de cette homepage que la maquette complète du site et développée et prototypée, afin d'être testée en condition réelle et être au plus proche du résultat final après développement.
Approche accessibilité
Mise en place de critères de base d'accessibilité comme le contraste des couleurs.
Développement du site
Approche combinée avec la mise en place au développement, avec l'intégration d'un plugin pour optimiser l'accessibilité au maximum : Lisio.
Approche éco-conçue
Le but ici était d'obtenir un juste milieu entre identité visuelle qui reste attrayante et corresponde à la nouvelle charte graphique de 5 Degrés, tout en conservant des principes d'éco-conception : limiter les photos trop grandes et trop gourmandes, les blocs dynamiques et énergivores, les animations visuelles, la multiplication de typographies, etc.
Mise en place
Prise en compte des bases de l'éco-conception, depuis la conception des wireframes avec les types de blocs à mettre en place, jusqu'au développement du site avec les techniques et utilisation d'outils. Optimisation du développement pour limiter les plugins intégrés.
