Site web Emoface
Pendant mon Master en UX/UI Design, j’ai travaillé en alternance chez Emoface, où j’ai contribué à la conception d’outils numériques favorisant l’apprentissage socio-émotionnel chez les personnes autistes.
Rôle
UX/UI Designer - Développeur web
Équipe
Équipe pluridisciplinaire de 7 personnes
Durée
Janvier 2024 · Juillet 2025
Outils
Figma, WordPress
Résumé
Une de mes missions chez Emoface a été la refonte du site web, afin de mieux présenter leurs outils et d’améliorer l’expérience utilisateur. Cela a impliqué une réévaluation de la structure du site ainsi qu’une mise à jour du design.
Objectifs
L’objectif principal de cette refonte était de créer un site web moderne et accessible, répondant aux besoins des utilisateurs tout en renforçant la présence en ligne de l’entreprise. Les principaux objectifs étaient :
🧑🏻💻
Améliorer l’expérience utilisateur
🌐
Optimiser le référencement
🖥️
Mettre en avant les produits / services de l’entreprise
ℹ️
Faciliter la navigation et l’accès à l’information
Défis
Pendant cette refonte, plusieurs défis ont été rencontrés :
🔎
Assurer une meilleur visibilité sur les moteurs de recherche
👥
Créer une navigation intuitive et des interfaces adaptés à des utilisateurs variés (parents, professionnels de santé)
🇬🇧
Gérer les contenus en plusieurs langues
En interne, le défi a été de prendre en compte les différents besoins des parties prenantes, notamment la direction, le marketing, le développement.
Processus
01. Structure du site et navigation
A l’origine, le menu principal du site était composé des pages suivantes : Accueil, l’application Emoface Play & Learn Emotions, A propos, Help Center, Blog et Contact.
Avec l’aide d’un intervenant extérieur, nous avons restructuré l’architecture du site afin de mieux cibler les utilisateurs selon leur profession. L’objectif était de présenter l’ensemble des outils développés par Emoface et de proposer, pour chaque profil, ceux répondant le mieux à leurs besoins spécifiques.
Arborescence du site Emoface
02. Design itératif
1
Recherche d'inspiration design
Avant de commencer les maquettes, j’ai effectué une veille des tendances UX/UI en consultant des plateformes telles que Mobbin, Dribbble ou Refero Design. Cette recherche m’a guidé tout au long de la phase de conception pour créer un design moderne et adapté aux utilisateurs.
2
Création d’un UI Kit
J’ai créé un UI Kit regroupant les couleurs, typographies et principaux composants du site, afin de garantir une cohérence visuelle sur l’ensemble du projet.
Design system du site Emoface
3
Wireframes et Prototypes
J’ai commencé par concevoir des wireframes pour valider la structure de chaque page du site, puis j’ai créé un prototype fonctionnel et haute fidélité en intégrant les couleurs, les typographies et les images.
4
Partage et itération
Au cours de la conception des maquettes, je les ai partagées avec mon équipe pour avoir des retours et des améliorations, jusqu’à obtenir une interface optimisée.
03. Optimisation SEO
Pour améliorer la visibilité du site sur les moteurs de recherche, nous avons optimisé le SEO en travaillant sur des mots-clés pertinents, des URLs claires, les balises meta et les textes alternatifs des images. J’ai également organisé le contenu de manière hiérarchique afin de renforcer la structure et la lisibilité des pages.
04. Intégration dans WordPress
Lorsque les maquettes ont été validées, j’ai développé les différentes pages du site sur WordPress, avec l’aide d’Elementor.
Au cours du développement, j’ai installé les extensions nécessaires pour améliorer les fonctionnalités du site. Voici quelques exemples de plugins :
💬
Contact Form 7 pour créer des formulaires de contact
🇬🇧
Polylang pour gérer les traductions en plusieurs langues
📊
MonsterInsights – Google Analytics pour suivre les performances
Maquettes
Page « Nos outils / Émotions »
Page « Nos outils / Santé »
Page « Nos outils / Multilingue »
Page « Nos outils / Éducation »
Résultats
La refonte du site web d’Emoface a apporté de nombreux bénéfices pour les utilisateurs comme pour l’entreprise :
🧑🏻💻
Amélioration de l’expérience utilisateur grâce à une navigation intuitive
🌐
Augmentation du trafic et meilleure visibilité en ligne
🖥️
Accessibilité renforcée pour tous les profils d’utilisateurs