refonte site web agence UX

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

refonte site web agence UX

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.

interfaces web visiativ
No items found.

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.

persona design utilisateurs
No items found.

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

cas client 40/60 visiativ
mockup visiativ ux mobile
interface web ux visiativ
interface mobile visiativ
interface UX UI visiativ
interface site web agence ux visiativ
No items found.

PHASE 4 : LE DESIGN SYSTEM

Design system agence ux visiativ
No items found.
No items found.

"

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

Nos autres projets

Création d'une application multiservice

Hjaelp

Création d'une application multiservice

Application danoise proposant des services B2B et B2C.

Découvrir le projet

SNCF Transilien

Accompagner la SNCF sur la stratégie fonctionnel de l'app "Ma ligne C".

Aider la SNCF dans leur stratégie d'innovation pour augmenter l’acquisition et la satisfaction client.

Découvrir le projet

Simplon

Concevoir l'UX de simplonline en Agile

Repenser l’innovation pédagogique au service de l’impact social.

Découvrir le projet

Heineken

Co-construire une innovation foodtech

Proposer un service de location de tireuses à bière sur Paris en 30 minutes.

Découvrir le projet

Live for Good

Refondre le site d'un incubateur social

Un nouveau site pour présenter les programmes de l'association et des entrepreneurs, tous porteurs de projets à impacts positifs.

Découvrir le projet

Derichebourg

Concevoir un objet connecté en Smart office

Élaborer une innovation grâce aux nouvelles technologies pour créer les bureaux de demain.

Découvrir le projet

Mon bureau d'études

Plateforme d'analyse d'infrastructure

Accompagner un bureau d'étude dans la refonte de leur plateforme métier spécialisée dans l'infrastructure technique.

Découvrir le projet