
Refonte site web de transformation digitale
Visiativ
Site web
Brief
Suite à un travail effectué sur leur image de marque, Visiativ a fait appel à notre équipe de designers pour réaliser la refonte UX/UI de leur site.
Compétences
UX design
UI design

PHASE 1 : KICK-OFF DECOUVERTE
Lors de la réunion Kick-Off, l’équipe Visiativ nous a présenté le travail réalisé sur leur nouvelle charte graphique et la nouvelle arborescence de leur site. Celle-ci représente les 3 piliers définis par la nouvelle architecture de marque ainsi qu’une rubrique “corporate” :
- Visiativ Consult : offre diagnostic et financement
- Visiativ Engage : offre produits (ou services) des différents secteurs d’activités
- Visiativ Connect : partenaires et communautés (dirigeants clients, utilisateurs clients ou non, et dirigeants PME/ETI)
- Le groupe Visiativ : présentation du groupe
Le Kick-Off nous a également permis de définir les choix technologiques et les contraintes techniques à prendre en compte ainsi que le planning des sprints et des reviews, qui rythmeront le projet.

PHASE 2 : CONCEPTION DE L'EXPERIENCE UTILISATEUR
Suite à cela, nous avons mené avec l’équipe Visisativ un atelier de challenge de l’arborescence et des parcours utilisateur de leur site. L’atelier s’est déroulé en plusieurs étapes :
- Cartographie des utilisateurs primaires et secondaires de Visiativ.com afin de mieux comprendre ceux à qui nous adressons le site.
- Réalisation du proto-persona “Directeur Industrialisation et Fabrication” pour comprendre ses drivers, ses besoins et ses potentielles frustrations.
- Création d'un blue print qui détaille le parcours de notre proto-persona afin d’approfondir notre compréhension de l’arborescence existante et du maillage interne du site et de déterminer les liens qui relient les blocs pour permettre un parcours cohérent et orienter vers la conversion.
- Présentation du mur des inspirations pour recueillir les retours de Visiativ sur les différentes interfaces et comprendre de façon précise leurs attentes pour cette refonte.

PHASE 3 : CONCEPTION DE L'UI
L’enjeu du projet était d’adapter une charte graphique créée par un prestataire extérieur. Cette charte devait être :
- applicable au digital
- réalisable par les développeurs
- appropriée aux enjeux d’animation
- adaptée aux besoins d’accessibilité
Pour cela, en amont de la phase UI, nous avons réalisé une réunion de passation entre notre équipe UI et le prestataire de cette refonte identitaire. Nous avons profité de cet échange pour recueillir l’ensemble des guidelines de la nouvelle charte et apporter nos préconisations UX/UI.
La phase UI a été réalisée selon une approche atomique : atome, molécule puis organisme. Grâce à cette logique, nous avons produit efficacement tous les écrans complets. Notre production était ponctuée de deux rituels par semaine:
- Les réunions de présentation des micro-animations et intégration auprès de l’équipe externe de développeurs
- Les réunions de validaton des principes UX/UI et wording avec les équipes Visiativ






PHASE 4 : LE DESIGN SYSTEM

"
Créez avec nous votre site web, plateforme ou appli sur mesure, de A à Z.
Camille Hautreux, Expert Projets Digitaux
Contactez-nous pour votre projet