Site web Emoface
Lors de ma première année de Master en UX/UI Design, j’ai fait mon alternance chez Emoface, une entreprise qui développe des outils numériques conçus pour favoriser l’apprentissage socio-émotionnel des 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 à Emoface a été de faire une refonte de leur site web afin de mieux présenter leurs outils et d’améliorer l’expérience utilisateur. Cela inclut notamment une réévaluation de la structure du site et une mise à jour du design.
Objectifs
L’objectif principal de cette refonte était de créer un site web moderne et accessible qui répond aux besoins des utilisateurs, tout en renforçant la présence en ligne de l’entreprise. Les principaux objectifs incluaient :
🧑🏻💻
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, à propos, help center, blog et contact.
Avec l’aide d’un intervenant extérieur, nous avons repensé l’architecture du site pour mieux cibler les utilisateurs en fonction de leur profession. L’objectif était de présenter tous les outils développés par Emoface et de proposer, pour chaque métier, ceux qui répondent à leurs besoins spécifiques.
Arborescence du site Emoface
02. Design itératif
1
Recherche d'inspiration design
Avant de commencer à faire les maquettes, j’ai regardé les tendances actuelles en UX/UI design. Tout au long de la phase de conception, j’ai réalisé une veille design sur des sites comme Mobbin, Dribbble ou Refero Design.
2
Création d’un Design System
J’ai créé un Design System pour définir les couleurs, typographies et principaux composants du site afin d’avoir une cohérence visuelle.
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
Afin d’avoir une meilleure visibilité sur les moteurs de recherche, nous avons amélioré le SEO du site. Pour cela, nous avons travaillé avec des mots-clés pertinents, créé des URLs claires, optimisé les balises “meta” et ajouté des textes alternatifs aux images. J’ai aussi organisé le contenu de façon hiérarchique pour améliorer la structure des pages.
04. Intégration dans WordPress
Lorsque les maquettes ont été validées, j’ai commencé à développer 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 avantages, que ce soit pour les utilisateurs ou l’entreprise.
🧑🏻💻
Amélioration de l’expérience utilisateur
🌐
Augmentation du trafic et meilleure visibilité
🖥️
Site web accessible