Documentation Phase UX - EGS Website Project¶

Stack Technique : Figma → WordPress + Breakdance + WooCommerce Équipe : Fenohery (UX Designer), Mickaël (Coordinateur), Andrianina (PM) Client : EGS (Gallois Sisal)

1. Contexte et Objectifs UX¶

1.1 Projet Overview¶

• Client : Gallois Sisal - Producteur premium de fibres de sisal depuis 1945
• Objectif : Transformation du site vitrine en outil business stratégique
• Stack Technique : WordPress + Breakdance (builder) + WooCommerce (produits)
• Design : Figma pour maquettes et prototypage

1.2 Cibles Principales Identifiées¶

1. Clients B2B - Importateurs, industriels (40%)
2. Investisseurs & Bailleurs - ESG, institutions (25%)
3. Talents & Collaborateurs - Recrutement (20%)
4. Grand Public & Partenaires - Innovation, territoire (15%)

1.3 Pages Clés (6 pages principales)¶

1. Accueil - Storytelling et redirections
2. À propos - Histoire, vision, valeurs
3. Produits - Avec quiz/évaluation + WooCommerce
4. Transition & Impacts - ESG et développement durable
5. Construire Ensemble - Recrutement et partenariats
6. Contacts - Coordination commerciale

2. Méthodologie UX Research¶

2.1 Phase 1 : Audit et Analyse (Semaine 1)¶

Objectif : Comprendre l'existant et les besoins spécifiques

Livrables : - Analyse de l'existant : Site WordPress actuel + guidelines EGS - Benchmark concurrentiel : Unima, Axian + 3 sites internationaux - Analyse des personas : Profils détaillés par cible - Cartographie des parcours utilisateurs : User journeys clés

Méthodes : - Revue documentaire (cahier des charges, guidelines) - Analyse des sites concurrents - Création des personas basés sur les profils identifiés - Mapping des flows utilisateurs principaux

2.2 Phase 2 : Architecture de l'Information (Semaine 2)¶

Objectif : Structurer le contenu pour WordPress/Breakdance

Livrables : - Arborescence détaillée : Structure WordPress compatible - Wireframes basse-fidélité : Structure des 6 pages principales - Spécifications fonctionnelles : Features par page - Plan de contenu : Mapping contenu WordPress

Focus Breakdance : - Composants réutilisables - Structure modulaire - Optimisation pour le builder visuel

2.3 Phase 3 : Design et Prototypage (Semaines 3-4)¶

Objectif : Créer les maquettes Figma complètes

Livrables : - Maquettes Desktop : 6 pages principales + composants - Maquettes Mobile : Version responsive complète - Composants Breakdance : Library réutilisable - Prototype interactif : Pour validation client - Spécifications WooCommerce : Page produits avec quiz

Points Critiques : - Quiz interactif page produits - Bloc redirection accueil vers produits - Design ESG premium - Responsive parfait

2.4 Phase 4 : Validation et Handoff (Semaine 5)¶

Objectif : Validation finale et préparation intégration

Livrables : - Design system complet : Tokens, composants, guidelines - Specifications Breakdance : Guide d'intégration - Documentation WooCommerce : Configuration produits - Test plan : Protocole de validation

3. Personas Détaillés¶

3.1 Persona Principal : Jean-Marc - Importateur B2B¶

Profil : 45 ans, Directeur Achats, Europe Objectifs : Sourcer des fibres premium traçables Frustrations : Information technique incomplète ** parcours :** Recherche Google → Page produits → Contact

3.2 Persona Secondaire : Sophie - Investisseur ESG¶

Profil : 38 ans, Analyste ESG, Fund international Objectifs : Évaluer l'impact et la rentabilité Frustrations : Données chiffrées manquantes Parcours : LinkedIn → Site → Transition & Impacts → Rapports

3.3 Persona Tertiaire : Thomas - Talent Potentiel¶

Profil : 28 ans, Ingénieur agronome, Madagascar Objectifs : Carrière avec impact social Frustrations : Opportunités peu visibles Parcours : Recherche d'emploi → Construire Ensemble → Candidature

4. User Journeys Clés¶

4.1 Journey B2B : Découverte → Contact¶

1. Découverte : Accueil → Présentation EGS
2. Évaluation : Page produits avec quiz
3. Validation : Grades et spécifications
4. Conversion : Formulaire contact qualifié

4.2 Journey Investisseur : Analyse → Décision¶

1. Recherche : Transition & Impacts
2. Analyse : Données ESG et chiffres clés
3. Validation : Témoignages et partenariats
4. Contact : Prise de rendez-vous

4.3 Journey Recrutement : Inspiration → Candidature¶

1. Découverte : Valeurs et vision
2. Exploration : Opportunités et culture
3. Décision : Postes ouverts ou spontanée
4. Action : Formulaire candidature

5. Architecture de l'Information WordPress¶

5.1 Structure Pages WordPress¶

Homepage (Front Page)
├── header (Breakdance component)
├── hero section
├── storytelling blocks
├── redirection produits
└── footer (Breakdance component)

About (Page)
├── histoire
├── vision 4 piliers
├── valeurs en action
└── CTA recrutement

Products (Page + WooCommerce)
├── présentation sisal
├── grades tableau
├── quiz interactif
└── formulaire devis

Transition (Page)
├── 3 axes transformation
├── projets concrets
├── partenaires
└── CTA innovation

Build Together (Page)
├── recrutement
├── postes ouverts
├── candidature spontanée
└── projets innovation

Contact (Page)
├── coordination
├── formulaires par type
└── coordonnées

5.2 Composants Breakdance Réutilisables¶

• Header Navigation
• Footer
• Hero Section
• CTA Blocks
• Testimonial Cards
• Partner Logos
• Form Components
• Team Cards

6. Spécifications Quiz Page Produits¶

6.1 Flow Quiz¶

1. Introduction : "Trouvez votre fibre idéale"
2. Questions (5-7) :
3. Type d'application ?
4. Volume requis ?
5. Niveau de qualité ?
6. Délai souhaité ?
7. Budget indicatif ?
8. Résultats : Grade recommandé + caractéristiques
9. Conversion : Formulaire devis pré-rempli

6.2 Intégration WooCommerce¶

• Produits configurables par grade
• Système de devis (pas vente directe)
• Validation technique avant devis

7. Processus de Validation¶

7.1 Points de Validation Clés¶

1. Validation UX Research : Équipe EGS + Riake
2. Validation Architecture : Mickaël + Karen
3. Validation Maquettes : EGS complet
4. Validation Composants : Développeur WordPress

7.2 Outils de Collaboration¶

• Figma : Design et commentaires
• WhatsApp : Communication rapide
• Email : Validations officielles
• Google Drive : Documentation partagée

8. Livrables Finaux Phase UX¶

1. Documentation UX complète (PDF)
2. Maquettes Figma Desktop + Mobile
3. Prototype interactif (lien Figma)
4. Design System (Composants Breakdance)
5. Spécifications WooCommerce (Quiz produits)
6. Plan de test (Checklist validation)

9. Prochaine Étape¶

Après validation UX par EGS : - Handoff à l'équipe d'intégration WordPress - Configuration WooCommerce - Développement Breakdance - Tests et validation finale

Préparé par Fenohery - Product Designer UX Date : 17 Novembre 2025