Designer UX UI pour la refonte du site de l'association Promotelec

  • Ui Design
  • Ux design

Association à but non lucratif, Promotelec accompagne la réflexion et le choix de solutions de confort dans l’habitat. Pour la refonte du portail, l’association recherchait un Designer UX consultant pour concevoir la refonte du service, son ergonomie et l’expérience utilisateur. Pour mener à bien le projet nous avons réalisé un audit du service, une étude utilisateurs, conçu les plans & Wireframes, créé un prototype, créé le look & feel décliné sur les 36 pages du portail.

 

UX Designer - Promotelec - presentation ipad

 

Design UX, Etude du service, conception des Wireframes.

Pour faire du portail un acteur incontournable du conseil en énergie, nous nous sommes assuré de répondre aux attentes utilisateursNous avons pour cela étudié leurs profiles, qui ils sont, ce qu’ils recherchent, leurs attentes, leurs comportements. Nous avons ainsi identifié 4 typologies d’utilisateurs: particuliers, professionnels, collectivités et presse, puis orienté la plateforme vers 4 espaces distincts qui répondent à leurs problématiques. Nous avons conçu 36 Wireframes  représentant la vision global du nouveau portail. Cela nous a permis d’apprécier la distribution générale du contenu, la fluidité des parcours utilisateurs et la bonne orientation du projet.

Promotelec---UX-Design---Wireframes

Prototypage, tests utilisateurs.

Une fois les plans tracés, nous avons créé un prototype pour confronter ce premier modèle à un panel d’utilisateurs et ainsi observer leurs réactions, leurs comportements. Nous avons pour cela utilisé Invision, une plateforme en ligne de prototypage et de travail collaboratif permettant de rendre interactifs et navigables les Wireframes que nous avions conçus. Nous avons pu ainsi effectué des tests sur un panel d’utilisateurs. Cette étape de prototypage nous a permis de valider la bonne conception du service et éviter d’éventuelles erreurs en développement.

 

 Promotelec---UX-Design---Prototype---Invision

Identité visuelle du service, Design UI.

Une fois les plans tracés, la navigation validée, nous pouvions avancer sur la création de l’identité visuelle, de l’ambiance et de l’univers du site. S’adressant au grand public, nous avons mis en place une identité simple et claire, qui reflète les valeurs désintéressées et non commerciales de l’association. Le Design UI des interfaces est sobre, des aplats et des touches de couleurs vives donnent vie à l’ensemble. Les menus, boutons, champs de recherche et éléments importants de navigation attirent l’attention et sont mis en avant par une couleur vive. Ces touches de couleur orientent visuellement l’utilisateur, l’invite à progresser de page en page et améliore la navigation, l’ergonomie générale du service.

 

Promotelec---UI-Design---Branding Promotelec---UI-Design---Branding-02

Eléments contextuels en fonction d’où se situe l’utilisateur.

Moteur de recherche à facettes, panneaux contextuels, menus interactifs, comportements au défilement, notifications, partage sur réseaux sociaux. Ces éléments contextuels apparaissent en fonction d’où se situe l’utilisateur et de ce qu’il recherche. Ces éléments le guident et lui donnent des informations complémentaires, l’invitent à découvrir un article, à consulter une vidéo ou à remplir un questionnaire de connaissances. Ces éléments accompagnent  la navigation, rendent le service ludique, interactif, intuitif et agréable à utiliser.

 

Promotelec---UX-UI-Design---Quizz

Sous-menu, accès rapide aux différents contenus.

6 sous-menus, dans les 4 espaces, permettent d’orienter l’utilisateur vers le contenu qui l’intéresse. En parcourant ces sous-menus l’utilisateur peut se faire rapidement une projection de l’arborescence du portail, améliorant sa compréhension de la distribution des pages du service. Les 4 espaces utilisateurs sont symbolisées par un pictogramme à gauche du menu.  Les visiteurs peuvent ainsi comprendre dans quel espace ils se trouvent. 

Promotelec---UX-UI-Design---Sub-Menu

Responsive design en mobile first.

L’ensemble des pages du portail est conçu sur le principe de « Mobile First ». Une mise en page simple à base d’éléments qui se ré-agencent en fonction de la résolution d’écran de l’utilisateur: ordinateurs fixes, ordinateurs portables, tablettes et téléphones mobiles. Le responsive design des interfaces, »fluide », s’adapte proportionnellement à la résolution d’écran, les breakpoints sont ainsi optimisés, à peine visibles. La lisibilité du contenu et l’accessibilité du service restent constants et optimum sur tous supports.

Promotelec---UX-Design---Elements-interactifs

Création et déclinaisons des interfaces.

26 interfaces ont été crées, gabarits des pages principales qui structurent le service. Chaque espace du portail utilise une mise en page différente, pour mieux distinguer où se situe le visiteur. Les couleurs vives, en complément des interactions, rendent l’utilisation du service attrayant et améliore la navigation générale. L’utilisation de larges photos immersives projette l’utilisateur dans des univers auquel il s’identifie. La signalétique et les pictogrammes permettent d’améliorer la compréhension globale du service et ajoute un coté graphique à l’ensemble.

 

Promotelec-UI-Design-Interfaces-01 Promotelec-UI-Design-Interfaces-02 Promotelec-UI-Design-Interfaces-03

Promotelec dispose désormais d’un portail actuel et moderne, ergonomique et consultable sur tous supports, tablettes et téléphones mobiles. L’important volume de contenus: guides, articles, questionnaires, vidéos est valorisé et facilement accessible. Les interfaces donnent envie à l’utilisateur d’expérimenter et d’utiliser  le service. Les éléments interactifs et contextuels, les couleurs vives l’invitent à progresser de page en page. La refonte du portail Promotelec est un succès.