La refonte d'un site web
L
L'entreprise avait des projets d'évolution avec le développement de nouvelles fonctionnalités. Une refonte de leur site était donc nécessaire.
Suite à des problèmes sur le site internet au début de mon stage dans l'entreprise, j'ai pris l'initiative de réaliser un "audit ergonomique" du site. Mon audit à mis en avant plusieurs points d'amélioration confortés par les statistiques de google analytics présentant notamment un fort taux de rebond.
L'entreprise avait des projets d'évolution avec le développement de nouvelles fonctionnalités. Une refonte de leur site était donc nécessaire.
Pour ces raisons j'ai pris l'initiative de proposer des maquettes et de rédiger le cahier des charges fonctionnel.
Client
Fabricant d’éclairages à LED, dédiés aux professionnels de l’évènementiel, l'hôtellerie et la restauration. Innled conçoit des modèles uniques sans fil, alliant innovation et performance.
Objectif
Améliorer l'expérience utilisateur au sein du site afin de diminuer le taux de rebond.
Concevoir de nouvelles fonctionnalités notamment un "configurateur" pour la nouvelle gamme des lampes Hariz.
Concevoir de nouvelles fonctionnalités notamment un "configurateur" pour la nouvelle gamme des lampes Hariz.
Livrables
- Cahier des charges fonctionnel
- Contenu (vignettes, visuels, montage sur Photoshop)
- Maquettes balsamique/ Adobe XD (basse fidélité)
- Catalogue de lampes sur Adobe Illustrator (trie, rangement)
- Charte graphique
Durée
4 mois
( avril à juillet 2018)
( avril à juillet 2018)
Équipe
L'équipe marketing se limitait à ma tutrice, une stagiaire Réseaux Sociaux et moi-même. Il s'agit de projets entrepris en grande partie seule et pour lesquels j'ai pris beaucoup d'initiatives.
Rôles
- UX Designer
- Graphiste (création de contenus visuels)
Outils
Recherche utilisateur
Google Analytics
Questionnaires clients/prospects
Veille concurrentielle
Idéation
Panneau d'affichage
Miro (ex. RTB)
Post-it
Papier/crayon
Conception
Papier/crayon
Balsamiq
Adobe XD
Photoshop
Illustrator
InDesign
After Effect
Méthodologie
1. Phase d'Empathie
- Phase d'observation et de compréhension des besoins de l'entreprise.
- Récolte des besoins et divers feedbacks de prospects/clients remontés lors du salon Prolight and Sound puis lors d'un questionnaire établit pour sonder l'intérêt des prospects/clients concernant les nouveaux produits ou connaître les besoins d'amélioration des produits existants.
- Création de planches "concepts" afin de déterminer les besoins et collecter des avis prospects/clients sur des futurs produits de la marque.
2. Phase de Définition
L'enquête a montré un intérêt des participants pour les nouvelles gammes de lampes Hariz et leur personnalisation ainsi que le produit "star" d'Innled : le Tecnopar et sa nouvelle génération confirmant les retours collectés au salon en Allemagne.
La réalisation d'un audit ergonomique basé sur les critères de Bastien et Scapin de l'ancien site a permis l'identification et la présentation des axes d'amélioration à ma responsable.
- La fonctionnalité du configurateur intéressante à ajouter au site
- Besoin d'une refonte en profondeur du site (ajout de call to action, retour à l'accueil par clic sur le logo, changement de langue sans retour systématique à l'accueil, ajout d'une fonctionnalité de recherche interne…)
3. Phase d'Idéation
Veille concurrentielle sur les entreprises du même secteur (fabriquant de lampes dans l’événementiel)
Veille technologique sur les fonctionnalités originales de sites vitrines de Designer ayant le même positionnement qu'Innled
- Site vitrine dans l’événementiel : intérêt d'un Design immersif
Idée d'ajout d'animation en SVG, pour montrer la facilité d'installation par exemple
- Personnalisation intéressante à mettre en place avec une fonctionnalité du configurateur pour les nouvelles gammes de la lampe Hariz.
4. Phase de Conception
Création de prototypes "basse définition" avec papier et crayon puis sur balsamiq.
Afin de collecter des feedbacks de la part de l'ensemble du personnel de l'entreprise, j'ai affiché les prototypes dans la salle de repos. J'ai également laissé le choix aux personnes de consulter ses prototypes via un tableau virtuel (Miro) sur lequel ils pouvaient laisser des commentaires. La majorité des commentaires m'ont été fait autour d'un café plutôt qu'en ligne.
Afin de collecter des feedbacks de la part de l'ensemble du personnel de l'entreprise, j'ai affiché les prototypes dans la salle de repos. J'ai également laissé le choix aux personnes de consulter ses prototypes via un tableau virtuel (Miro) sur lequel ils pouvaient laisser des commentaires. La majorité des commentaires m'ont été fait autour d'un café plutôt qu'en ligne.
Après prise en compte des retours, j'ai rendu les prototypes intéractifs avec Adobe XD en vue de les tester sur les différents membres de l'équipe.
Phases de Test
Phases de Révision
Réalisation de séries de test sur les prototypes interactifs.
Tests réalisés systématiquement sur des groupes de personnes :
L'utilisateur disposait de 5 à 10 minutes pour découvrir le site sans intervention de ma part. Une fois familiarisé, je lui demandais de réaliser une action précise tout en commentant son expérience de navigation.
J'ai accompagnées ces deux phases de prises de notes concernant le comportement de chaque utilisateur au cours de l'ensemble de sa navigation.
Une dernière phase consistait en des questions ouvertes sur le ressenti général et des retours divers.
1 ◦ Test sur 5 techniciens
1 • Modifications des maquettes principalement sur l'aspect technique (catégorisation des produits et présentation de leurs spécifications techniques)
2 ◦ Reste du personnel de l'atelier :
4 techniciens
1 responsable des commandes
4 techniciens
1 responsable des commandes
2 • Révisions sur les pages du configurateur et les formulaires de demande de devis et prise de contact
3 ◦ Personnel du bureau :
3 technico-commercial
3 technico-commercial
2 stagiaires
3 • Révisions diverses notamment sur les questionnaires de contact/demande de devis et la partie "Où louer/Où acheter"
4 ◦ Restant des bureaux :
3 CEO
1 responsable Marketing
3 CEO
1 responsable Marketing
4 • Ajustement final avant la rédaction du cahier des charges fonctionnel, questionnement de l'ajout d'autres langues, réponses à des questionnements sur la sécurité des formulaires, l'évolution possible vers un site marchand...
Critiques
- Réalisation de la charte graphique à la suite du cahier des charges fonctionnel
- Contrainte de temps, 4 mois de stage : pas de maquette haute fidélité (fin du stage) uniquement une "ébauche" de la homepage.
- Autres travaux réalisés en parallèle :
• Prototypages de deux applications : une de contrôle des lampes et une autre de contrôle son et lumière.
• Créations de profils de lampe pour des soirées de galas d'entreprises
• Création de visuels publicitaires pour certains clients
Points positifs
- Prise d'initiatives nombreuses
- Expérience de tests utilisateurs
- Autoformation/documentation/recherche sur les technologies notamment sur les animations en SVG.
Points d'amélioration
- Force de proposition notamment face à des personnalités fortes
- Amélioration et remontée d'alerte
- Amélioration de la mise en place de processus de conception UX
