Comment pourrions-nous faciliter la compréhension des informations du site web ?
Comment pourrions-nous faciliter et favoriser la compréhension et la complétion des formulaires ?
Comment pourrions-nous faciliter et favoriser les interactions entre les utilisateurs cibles et Mon Entrepreneur Social ?
DATES
14 décembre 2020 - 18 décembre 2020
TYPE DE PROJET
Projet scolaire
SOLUTION
Site web (version desktop & mobile)
OUTILS
Figma & Google Workspace
PARTICIPANT.E.S
- Nandia Brice
- Morgane Le Tennier
- Lorraine Osne
- Franck Livolant
- Dawan Be
Introduction
Être un acteur à impact positif passe tout d’abord par la considération et le respect des valeurs positives au sein de son propre environnement ; or, force est de constater que nombre d’entreprises à impact positif manifestent un décalage entre valeurs véhiculées et procédés appliqués. Dans le cas présent, il est tout particulièrement question de celles (les entreprises) qui délèguent ces responsabilités aux prestataires auxquelles elles font appel pour certains services (entretien, sécurité, accueil, etc.).
Cette délégation fait que les agents assurant ces services sont traités différemment (notamment les conditions de travail), peu reconnus voir même oubliés. D’une certaine manière, ces agents s’apparentent à ce qu’on appelle les “travailleurs invisibles”.
Pourquoi un tel décalage ? Le manque d’intérêt n’est pas l'unique raison, si ce n’est une des nombreuses recensées aux côtés du manque d’information, de sensibilisation, de temps ou encore de ressources humaines.
C’est pour pallier cette situation que Mon Entrepreneur Social (abrégé MES) est né. MES est une entreprise à mission d’utilité sociale (ESS) qui accompagne les entreprises et prestataires dans leur transformation responsable.
Cependant, MES fait face à plusieurs problématiques comme le fait de rendre compréhensible - ses aspects techniques et son jargon - et faire valoir son offre et sa proposition de valeur auprès de ses cibles (entreprises, prestataires) ; c’est dans ces circonstances que nous avons été sollicités. Ce hackaton s’est inscrit dans le cadre de ma première année de mastère ; il s’est déroulé en groupe et a duré une semaine. Deux éléments étaient tout particulièrement attendus ; le premier étant l’audit (UX, technique, SEO) du site web existant et le second les maquettes traduisant les recommandations formulées.
Ci-contre, une synthèse de la méthodologie adoptée ; nous reviendrons en détail sur les différentes étapes dans les parties suivantes.
Comprendre le contexte et les besoins
L'étape suivant la présentation du client et de son environnement a été la recherche utilisateur ; elle est constituée données quantitatives et qualitatives transmises par le client et de données collectées par nos soins (notamment en étudiant les réseaux sociaux, les interviews, les résultats de questionnaires et les données analytics de MES).
PERSONAE
Ce faisant, nous avons pu dresser deux personae, entreprise et prestataire, incarnant leurs besoins, problèmes et motivations.
Les informations remontées font écho à celles mentionnées plus haut c’est-à-dire que les besoins se veulent responsables, axés sur des valeurs positives toutefois plusieurs problèmes comme le manque d’information ou la multitude d’approches possibles s’interposent.
JTBD
En complément de ces personae, des JTBD (Job To Be Done, ou travail à réaliser en français) ont été dressés afin d’être au plus proche de leurs problématiques, de ce qu’ils souhaitent accomplir et des résultats attendus.
POV STATEMENT
Enfin, des POV Statement ont permis de résumer les problèmes qui ont besoin d’être résolus.
Analyser l'existant
Nous avons ensuite cherché à consolider les premières informations que sont le contexte, les problématiques et les personae. Pour ce faire, deux audits ont été réalisés ; un analytics et un ergonomique. L’audit consiste à réaliser une analyse approfondie de l’existant afin d’identifier les points problématiques et de formuler une série de recommandations ayant pour objectif d’y remédier et donc d’améliorer la solution.
AUDIT ANALYTICS
L’audit, dont les chiffres ont été tirés de la solution Google Analytics, a permis de mettre en exergue des opportunités :
- La tendance des visiteurs. D’après les chiffres, 69% des sessions enregistrées entre le 4 et le 10 décembre ont été effectuées via un ordinateur.
- L’affirmation que la page d’accueil est stratégique. D’après les chiffres, la page d’accueil a été vue 81 fois entre le 4 et le 10 décembre.
- 258 personnes ont visité le site durant les 28 derniers jours.
Toutefois, malgré un nombre de visites encourageant, les chiffres ont mis en exergue des menaces faisant écho aux problématiques.
- 1m49s, c’est la durée des sessions enregistrées entre le 4 et le 10 décembre.
- 69%, c’est le taux de rebond enregistré entre le 4 et le 10 décembre.
- 55% c’est le taux de sortie moyen qu’enregistrait la page d’accueil.
AUDIT ERGONOMIQUE
Ensuite, l’audit ergonomique réalisé - en équipe, en se répartissant les pages - en s’appuyant sur les heuristiques de Bastien et Scapin. Les 8 familles de critères ont permis de recenser et catégoriser les défauts d’ergonomie présents sur les 6 pages du site web de MES, de définir leur degré de sévérité et de dresser des recommandations pour amélioration. J’ai principalement analysé la page "prestataire" du site, et les autres pages dans une moindre mesure.
Pour consulter l'analyse détaillée cliquez : ici
Au fur et à mesure de l’audit, certains problèmes recensés se sont avérés récurrents ; entre autres :
- Présences d’éléments incohérents avec la charte graphique.
- Manque de cohérence entre les images et le texte ; la compréhension du message est donc difficile.
- Les données analytics ont montré une performance faible (taux de rebond élevé, durée moyenne de session courte).
- Problèmes de structure et de hiérarchisation de l’information.
- Comportement responsive non optimal (casse de certains éléments).
- Formulaire difficile d’accès et CTA peu mis en avant.
- Blancs tournants peu présents, ce qui rend difficile la mise en avant de l’information.
- Vocabulaire parfois technique, parfois imprécis.
Idéation, les solutions envisagées
Cette phase s’inscrit à la suite de la recherche, de la définition et de l’audit ; les éléments recueillis nous ont permis de nourrir notre réflexion et ainsi de formuler plusieurs propositions de solutions.
REFONTE DU SITE WEB
En intégrant les recommandations (structure, hiérarchisation, accessibilité, etc.) formulées dans l’audit nous aspirons à rendre l’expérience et les performances meilleures, et surtout le site plus humain.
RETRAVAILLER LE WORDING
L’objectif ici est de spécifier le vocabulaire afin de le rendre plus clair (le message, les actions par exemple) et compréhensible ; le tout sans oublier les enjeux relatifs au SEO. Les pictogrammes et illustrations seront également retravaillés et/ou intégrés afin de renforcer l’accompagnement et l’expérience de l’utilisateur. Par ailleurs, cela permettra de réduire la quantité de texte et donc de donner de la légèreté aux différents contenus textuels.
RETRAVAILLER LE FORMULAIRE
En commençant par les intégrer directement dans le site web. Ainsi la collecte et la transmission du besoin (des entreprises) n’en seront que plus faciles et directes. Le second formulaire, adressé aux prestataires, a été retravaillé et divisé en plusieurs parties afin de le rendre plus digeste et moins complexe.
INTÉGRER LA CRÉATION ET LA GESTION DES COMPTES
La création et gestion de compte va permettre aux utilisateurs de s’inscrire sur le site web. Mon Entrepreneur Social va ainsi pouvoir gérer et suivre plus facilement ses utilisateurs qu’ils soient prestataires ou entreprises. La mise en relation, la prise de contact ou encore le suivi des prestations pour les utilisateurs seront plus rapides et simples. Enfin, les dashboards permettront de gérer les demandes et besoins, d’avoir une vue globale sur les partenaires et leurs activités.
INTÉGRER DES VIDÉOS
Des contenus vidéos seront intégrés afin de renforcer le côté humain et chaleureux du site web ; de plus, elles rendront le site plus dynamique et plus digeste en se substituant à certains blocs de texte. L’intégration de vidéos témoignages (de prestataires ou d’entreprises) pourrait s’avérer plus efficace pour faire passer un message.
METTRE EN PLACE UN CHATBOT
Pour booster et faciliter l’échange et les interactions avec les utilisateurs (réponses aux questions, complétion du formulaire). Le chatbot s’appuiera sur une base de données préalablement travaillée.
GAMIFIER L'EXPÉRIENCE
Pour rendre les tâches, comme la complétion de formulaire, plus ludiques et incitatives. En échange de leurs efforts, et proportionnellement à ces derniers, les utilisateurs se verront attribuer différentes récompenses (badges donnant accès à des avantages - par exemple un meilleur référencement, etc.).
Prototype, les coulisses et la solution
Morgane s’est occupée de la plupart des aspects liés à l’identité graphique.
LOGOTYPE
Pour le logotype, nous avons voulu garder l’idée de l’oeil qui fait directement référence à la phrase d’accroche : “Rendre visibles les invisibles en entreprise”. Deux regards s’observent dans l’obscurité, les yeux bleus représentent les entreprises et les yeux verts les prestataires. Mon Entrepreneur Social est la lumière qui les éclairent pour mieux se voir et se rencontrer.
Sur fond blanc le logotype sera accompagné d’un cartouche couleur “bleu nuit” (ci-dessus), pareil s’il est appliqué sur un fond de couleur autre que le bleu nuit déterminé dans cette charte graphique. S’il ne peut être appliqué en couleur sur le support, se référer à sa version noir et blanc, ci-dessus.
LES COULEURS
Pour les couleurs, nous avons choisi des couleurs symboliques :
- Le bleu nuit pour l’invisibilité des agents de prestations.
- Le bleu ciel pour les entreprises, une couleur souvent associée à la sagesse.
- Le vert pour les prestataires, pour la chance qu’elle symbolise mais aussi pour l’écologie.
- Le dégradé pour les contenus entreprise/prestataire.
LES TYPOGRAPHIES
Poppins est une google font designée par le typographe Jonny Pinhorn. Sa graphie est ronde, chaleureuse. C’est une typographie généreuse, à la hauteur du beau projet qu’est “Mon entrepreneur social”.
LES ICÔNES
Le set d’icône Coolicons est gratuit et a été designé par Kryston Schwarze. Cet ensemble d’icônes complet permettra d’habiller le site web tout en y apportant une réelle cohérence graphique (les icônes ci-dessus ne sont qu’un extrait du set).
LES ILLUSTRATIONS
Set d’illustrations gratuit disponible sur www.pixeltrue.com. Nous les avons choisies pour le style simple, spontané. À l’inverse de photo, nous voulions que tout un chacun puisse s’identifier à chaque instant sur le site web.
LES IMAGES
Pour apporter une cohérence graphique, les images seront monochromes (se référer à la page couleur).
- Les images “entreprise” seront bleu ciel.
- Les images “prestataire” seront vertes.
- Les images “MES” seront bleu nuit.
Enfin, le prototype, proposition de réponse aux problématiques énoncées. Sélectionnez dans options (en haut à droite du prototype ci-contre) "fit width" pour une visualisation optimale.
