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. 

Page d'accueil du site Emoface

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.

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

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

Design System : typographies du site Emoface
Design System : couleurs 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

Contactez-moi

melaniedrevet.pro@gmail.com





    Retour en haut