Refonte UX, optimisation des parcours, interactions de la plateforme Promotelec.com

  • Ui Design
  • Ux design

Association à but non lucratif, Promotelec accompagne la réflexion et le choix de solutions de confort dans l’habitat. La plateforme marquant les années celle-ci ne répondait ni aux attentes utilisateurs ni aux nouveaux usage en mobile first. J’ai été ainsi missionné pour auditer l’état actuel du service, mettre en place différents outils pour mieux comprendre les utilisateurs, qui ils sont, leurs attentes, les points de friction qu’ils rencontraient. Ces études faites nous avons pu amorcer une refonte complète des 36 interfaces du service en orientant l’architecture de l’information et les parcours utilisateurs au plus prêt de leurs attentes.

 

 

Design UX, Etude du service, conception des Wireframes.

Pour faire du portail un acteur incontournable du conseil en énergie, il était essentiel d’orienter cette refonte sur l’utilisateur et de répondre à leurs attentes4 typologies d’utilisateurs sont mis en exergue: particuliers, professionnels, collectivités et presse. La refonte à ainsi été orientée vers 4 espaces distincts pour répondre à chaque problématique. 36 Wireframes ont été conçus pour représenter la vision global du nouveau portail. Nous avons ains appréciié 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 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.