B&B HOTELS

Création de multiples pages et composants du site web Groupe, Concept, Corporate...

Le Collectif Santé Mentale fédère un ensemble d’acteurs œuvrant pour une transformation profonde des politiques et des perceptions autour des troubles psychiques. Si leur charte graphique print existait déjà, leur site web avait besoin d’un nouveau souffle pour gagner en lisibilité, clarté et émotion positive.

Rôle

UI/UX Designer Graphiste

Expertises

UI design UX design Prototypage Traitement d'images Enrichissement de la charte graphique Déclinaison graphique

Durée du projet

1 an

Outils utilisés

Figma  ; Adobe Illustrator Adobe Photoshop

Présentation du projet

Contexte

Le Collectif Santé Mentale fédère un ensemble d’acteurs œuvrant pour une transformation profonde des politiques et des perceptions autour des troubles psychiques. Si leur charte graphique print existait déjà, leur site web avait besoin d’un nouveau souffle pour gagner en lisibilité, clarté et émotion positive. J’ai été missionnée pour refondre intégralement leur site web, en me basant sur leur charte graphique existante, tout en la traduisant vers le numérique de manière cohérente et expressive. L’un des défis majeurs : rendre un sujet souvent perçu comme sombre plus humain, engageant et lumineux, sans jamais le dénaturer.

Problématique

Comment transformer une charte graphique print en une interface web claire, engageante et émotionnellement positive, afin de valoriser les actions du Collectif Santé Mentale, accroître son impact et traiter un sujet sensible avec dignité, énergie et optimisme ?

Objectifs

  • Mettre en avant les 4 axes stratégiques du collectif
  • Valoriser l’Alliance Santé Mentale et sa dirigeante
  • Rendre visibles les actions passées et à venir : bilans, engagements, demandes de soutien
  • Diversifier les formats éditoriaux pour rythmer les publications
  • Augmenter l’audience et favoriser sa fidélisation
  • Traîter graphiquement les images du site web

Workflow

.1

Recherche inspirationnelle

Objectif : Reprendre les codes de ce qui existe déjà

La toute première demande concernant ce projet, consistait en une refonte dans un univers institutionnel, à l'image des sites du gouvernement. J’ai alors pris le temps de benchmarker les différents sites web du gouvernement afin de pouvoir m'en inspirer et récupéré des codes déjà existants dans ce domaine. Suite à cela, j'ai pu commencer à poser quelques débuts de maquettes. Pour pré-validation et m'assurer que j'étais sur la bonne voie. Mais rapidement, les choses ont changés d'un point de vue graphique.

.2

Etude de la charte graphique

Objectif : Analyser la charte graphique pour l'adapter au web

Avant de me lancer dans une quelconque création, il m'a fallu étudier la charte graphique du Collectif Santé Mentale qui venait tout juste d'être refaite. Celle-ci ne possedait pas encore beaucoup d'éléments mais assez riche afin de pouvoir créer un univers déclinable sur le web. La santé mentale étant un sujet souvent morose, l'objectif derrière cette refonte de la charte, était de traiter le sujet au travers d'un univers plus gaie, plus coloré et plus lumineux. Faire ressortir le côté humain et bienveillant. J’ai alors pris le temps d'étudier la nouvelle identité graphique mise en place et ai récupéré les quelques éléments dont elle disposait afin de les décliner. Par exemple, j'ai pu constater que la superposition constituait une caractéristique qui revenait souvent avec les stickers. C'est pourquoi j'ai proposé de la superposition entre les blocs, images, vidéos, sitckers, formulaires, etc.

.3

Validation de la déclinaison graphique

Objectif : S'assurer avec la graphiste externe, que nous sommes d’accord sur la déclinaison web

Une fois quelques maquettes réalisées en accord avec la nouvelle identité graphique du Collectif, un point de validation a été mis en place avec la graphiste du Collectif afin que nous puissions nous assurer de le bon respect de la charte graphique et sa déclinaison pour le web. Le résultat fu sans appel du côté de la graphiste, seuls Quelques changements ont eu lieu afin d'être en totale adéquation avec la nouvelle identité : la position des stickers.

Il a également fallu pour cette adaptation sur le web, revoir quelques éléments graphiques déjà posés, notamment les couleurs. En effet, l'accessibilité est un élément crucial à prendre en compte aujourd'hui et d'autant plus pour un site web axé autour de la santé. Leur crédibilité en dépendait. Ainsi, certaines couleurs ont été légèrement revues afin d'obtenir au moins le AA en termes de contraste et de lisibilité.

.4

Création de gifs et traité visuel

Objectif : Ajouter de l'animation, du fun et davantage de "caractère" aux photos

Afin d'ajouter une touche de fun au site web, j'ai réalisé des gifs disséminés sur certaines pages. L'identité graphique apportant déjà une touche émotionnelle et lumineuse, les gifs avaient pour objectif d'appuyer cet aspect. De petites animations utiles qui pour autant, n’alourdissent pas de façon conséquente l'impact écologique du site web. J'ai ensuite réalisé plusieurs tests de traité graphique pour les photos du site web et plus précisément du monochromatique avec grain. Bien que cette idée était esthétique, il s'avère qu'après tests, elle retirait au site web son côté humain. Il devenait alors beaucoup plus froid. Cette idée a alors été abandonnée et seul le traité avec grain a été gardé.

Résultats

  • Un site entièrement transformé, à la fois lisible, fluide et inspirant
  • Une expérience utilisateur fluide, testée et validée auprès du public concerné
  • Une interface visuellement cohérente et émotionnellement engagée
  • Des retours très positifs de l’équipe du Collectif, fière du rendu final
  • Un site web en total adéquation avec une charte graphique légère mais efficace

Ce que j'en ai appris

Ce projet m’a permis de travailler sur une interface profondément humaine, en traitant un sujet sensible avec bienveillance et intention. J’ai renforcé ma capacité à traduire une identité graphique existante vers le web, tout en créant un univers visuel, de nouveaux codes, respectueux, expressif et engageant. Ce fut aussi l’occasion d’explorer l’importance du design émotionnel, en mettant le graphisme au service de l’inclusion, de la clarté et de l’espoir.

Autres projets

Plateforme d'Apprentissage
Terra Academia - Déclinaison des pages du site web
UI/UX design
Voir +
Plateforme d'Apprentissage
Archimed - Maquettes refonte de la HomePage et diverses autres pages du site
UI/UX design
Voir +
Plateforme d'Apprentissage
B&B Home - Site concept
UI/UX design
Voir +

Vous êtes arrivée jusqu’ici ?

Un projet ? Une question ? Discutons-en.

Vous souhaitez en savoir plus sur mes services ? ou vous êtes prêt à démarrer une nouvelle aventure avec moi ? Contactez-moi et réalisons ensemble votre projet digital.

Me contacter