La gonette

  • Web-design
  • UX
  • Eco-conception

Cliente : La gonette
Profession : Association, monnaie locale
Mission : Refonte web
Challenge : Éco-sensibilité, lisibilité et autonomie
En collaboration avec : Sandrine Rodrigue à l'intégration et Mathias Martin-Chave au développement

Un jour, la gonette, monnaie locale lyonnaise, a réuni certains de ces partenaires pour une refonte entière de leur site web. Il était devenu assez déstructuré et l'univers graphique avez été mis à mal avec le temps. La cohérence et la lisibilité n'étaient plus là.

Objectifs du nouveau site : Que le visiteur trouve rapidement les informations recherchées, qu'il soit éco-pensé tout en étant adapté à leur besoin et leur utilisation, et que l'équipe de la Gonette puisse être autonome et agir dessus facilement dans le temps. Le plus : retrouver un design cohérent et plus moderne, tout en gardant la charte graphique originale (couleurs, typographies, etc.)

Équipe

Référente Gonette : Charlotte

UX et web-design : Qui fait mouche

Développement web : Matthias Martin-Chave

Intégration web : Sandrine Rodrigues

Un groupe de membres (et non-membres) de la Gonette, pour tester le parcours utilisateur

Réflexion sur le parcours utilisateurs (UX design) du site de la Gonette
Wireframe - Réflexions sur l'arborescence et le parcours utilisateurs (UX design) du site de la Gonette + Tests utilisateurs
Maquette graphique du site de la Gonette
Maquette avec refonte et application de la charte graphique + Tests utilisateurs finaux
Répertoire des différents blocs constituant le site de la Gonette
Répertoire des différents blocs constituant le site de la Gonette - Transmis au développeur
Note

Pour répondre à leur besoin d'être autonome et pour modifier facilement leur site par la suite, j'ai pensé leur site en "blocs" et non en simple page. Nous avons déterminé, par rapport au contenu, quel type de blocs, ils seraient pertinents d'avoir (par exemple : un bloc "contenu encadré", bloc "texte", bloc "bouton", etc.). Certains blocs sont très proches les uns des autres, pour limiter les lignes codes liés à leur design (par exemple : le bloc "portrait" et le bloc "témoignage").

En faisant attention à limiter le nombre de blocs à développer, le site est moins lourd (donc mieux optimisé et référencé). Cela répond à leur attente concernant l'éco-conception (malgré le fait que le site soit fait sur WordPress, pour des raisons pratiques).

En se retrouvant avec un choix de design plus restreint, le travail de mise en page est simplifié et la cohérence graphique sera plus facile à tenir dans la durée.

Avant-Après de la page d'accueil du site de la Gonette
Avant-Après de la page d'accueil du site de la Gonette
Le site de la Gonette
Aperçu du site de la Gonette