Overview

L’Afhypac, Association Française pour l’Hydrogène et les Piles à Combustible, fédère les acteurs de la filière Hydrogène et piles à Combustibles en France : groupes industriels, laboratoires et instituts de recherche, pôles de compétitivité, associations régionales et experts ayant choisi de mettre en commun des moyens financiers et humains pour accélérer le déploiement des technologies de l’hydrogène et des piles à combustible pour des applications qui présentent un intérêt économique et environnemental pour la société.

VOIR LE SITE
Projet

Site Internet collaboratif

Client

Afhypac

Notre rôle

Identité, UX Design, UI Design, Développement web

Brief

Problème

Le site Internet vieillissant ne reflètent pas le dynamisme de l’association. Une modernisation graphique et technique est nécessaire afin de faire face aux nouvelles exigences des membres et du public.

Challenge

  • Concevoir des moyens de communication sur les enjeux de la filière, sur les bénéfices et les caractéristiques des technologies de l’hydrogène et des piles à combustible.
  • Favoriser l’acceptabilité sociétale des technologies de l’hydrogène.
  • Continuer à positionner l’Afhypac comme l’association de référence en France pour la filière et les prescripteurs.
  • Faire connaître et amplifier les actions de l’Afhypac et, à travers elle, celles de ses membres.
  • Recruter de nouveaux adhérents.

Exploration

Définition des utilisateurs

S’adressant aux professionnels de l’industrie mais aussi au grand public et à la presse, le site de l’Afhypac doit répondre à des attentes variées.

Architecture

Arborescence

En utilisant la méthode de tri de cartes, l’arborescence du site a été définie. 7 grandes sections dont un espace privé réservé aux membres composent le site.

User flows

À partir des différents profils d’utilisateurs définis, des user flows ont été imaginés.

Conception

Wireframes

Les wireframes permettent de hiérarchiser et d’organiser les éléments des pages. Les principaux user flows ont ainsi pû être testés et optimisés.

UI Design

Formes

L’utilisation de cercles concentriques renforce l’idée de diffusion. Les formes épaisses et minimalistes retranscrivent un univers industriel et institutionnel.

Illustrations

La prédominance des formes épaisses est sublimée par la présence de quelques éléments fins traduisant la précision et l’agilité.
La simplicité conceptuelle des illustrations et leur qualité graphique sont primordiales pour la pédagogie, notamment en direction du grand public.

Développement web

Un CMS unique

Un espace dédié est réservé à chaque membre de l’Afhypac qui peut effectuer de nombreuses actions sur une interface unique comme réserver une salle, échanger des documents avec d’autres membres, etc.
Afin de faire face aux demandes spécifiques, nous avons développés spécialement un CMS unique et adapté.