Documentation UX - EGS Gallois Sisal¶

1. Vision & Stratégie¶

Objectif Principal : Repositionner EGS Gallois Sisal non plus comme un simple producteur de matière première, mais comme un acteur clé de la transition écologique et sociale dans le Grand Sud de Madagascar.

Valeurs Clés : - Héritage : Une histoire qui commence en 1945. - Innovation : Transformation de la filière, nouveaux usages du sisal. - Impact : Engagement social et environnemental fort. - Excellence : Qualité premium, traçabilité.

2. Cibles (Personas)¶

A. L'Acheteur Industriel (B2B)¶

• Profil : Responsable Achat dans le textile, l'automobile ou la construction (plâtre).
• Besoin : Fiabilité, qualité constante (grades précis), certification, volume.
• Frustrations : Ruptures de stock, qualité variable, manque de traçabilité.
• Objectif sur le site : Trouver rapidement les spécifications techniques (Grades), demander un devis ou des échantillons.

B. Le Partenaire Institutionnel / Investisseur¶

• Profil : Représentant d'ONG, bailleur de fonds, investisseur à impact.
• Besoin : Comprendre l'impact social et environnemental, vérifier la gouvernance (ESG).
• Objectif sur le site : Lire les rapports d'impact, voir les projets en cours (Transition), contacter l'équipe RSE.

C. Le Candidat / Talent¶

• Profil : Ingénieur agronome, technicien, jeune diplômé malgache ou international.
• Besoin : Sens au travail, opportunités de carrière, cadre de vie.
• Objectif sur le site : Découvrir la culture d'entreprise, voir les offres d'emploi (Construire Ensemble).

3. Architecture de l'Information (Sitemap)¶

• Accueil (index.html)

  • Hero (Vidéo/Image impactante)
  • Storytelling (L'Androy, Héritage)
  • Teaser Produits (Le Sisal)
  • Teaser Impact (Transition)
  • Footer

• À Propos (about.html)

  • Histoire (Timeline 1945-2025)
  • Vision (4 Piliers)
  • Équipe

• Nos Produits (products.html)

  • Intro (Pourquoi le sisal ?)
  • Quiz Interactif ("Trouvez votre fibre")
  • Tableau des Grades (3L, 3, R, D, etc.)
  • Applications

• Transition & Impacts (transition.html)

  • 3 Axes (Économie circulaire, Agri durable, R&D)
  • Partenaires
  • Appel à l'innovation

• Construire Ensemble (build-together.html)

  • Culture d'entreprise
  • Offres d'emploi
  • Candidature spontanée

• Contact (contact.html)

  • Coordonnées (Siège, Usine)
  • Formulaire multi-sujets

4. Parcours Utilisateurs Clés (User Journeys)¶

Parcours 1 : L'Acheteur pressé¶

1. Arrive sur la Home.
2. Voit "Fibres Premium" -> Clique sur Nos Produits.
3. Consulte le Tableau des Grades pour vérifier la disponibilité du Grade 3L.
4. Clique sur "Contacter le service commercial".
5. Remplit le formulaire sur la page Contact avec le sujet "Renseignements Produits".

Parcours 2 : L'Investisseur à impact¶

1. Arrive sur la Home.
2. Est interpellé par "Changer le narratif" -> Clique sur En savoir plus (Transition).
3. Lit les 3 Axes de transformation sur la page Transition.
4. Voit les logos des partenaires (Kinomé, Miarakap).
5. Rassuré, il va sur Contact pour proposer un partenariat.

Parcours 3 : L'Ingénieur en recherche d'emploi¶

1. Arrive sur la page Construire Ensemble via LinkedIn.
2. Lit la section "Notre Culture".
3. Consulte les Postes ouverts.
4. Ne trouve pas son poste -> Clique sur "Candidature spontanée".
5. Est redirigé vers le Google Form de recrutement.

5. Design System (UI Kit)¶

Couleurs¶

• Primaire (Vert EGS) : #071915 (Castleton Green) - Utilisé pour les fonds sombres, textes principaux.
• Secondaire (Or/Poire) : #D1D926 (Pear) - Utilisé pour les accents, boutons CTA, hover.
• Fond (Blanc Floral) : #FFFAF0 (Floral White) - Utilisé pour les sections claires.
• Texte : #333333 (Gris foncé) et #FFFFFF (Blanc sur fond sombre).

Typographie¶

• Titres : Outfit (Sans-serif, moderne, géométrique).
• Corps : Inter (Sans-serif, lisible, neutre).

Composants Clés¶

• Boutons :
  • Primaire : Fond Pear (#D1D926), Texte Night (#071915).
  • Secondaire : Bordure Pear, Fond Transparent, Texte Night.
• Cartes : Fond blanc, ombre légère (box-shadow), coins arrondis (8px).
• Navigation : Sticky header, devient opaque au scroll.

6. Interactions & Prototypage¶

• Quiz Produit : Logique JS simple pour guider l'utilisateur vers le bon grade selon son usage (Plâtre vs Corderie).
• Animations :
  • Hover sur les cartes (légère élévation).
  • Hover sur les liens (changement de couleur).
  • Smooth scroll pour la navigation.