Cahier des charges UI/UX - Design de site web
| Nom de l’entreprise | Établissements Gallois Sisal |
|---|---|
| Nom du projet | Site web |
| Personne à contacter dans l’entreprise | Karen Raza |
| Adresse | 15 rue Benyowsky Isoraka |
| Téléphone | +261 38 09 939 74 |
| karen.raza@gallois-sisal.com |
TABLE DES MATIÈRES
A.1. Présentation de l’entreprise 2
B.1. Expérience utilisateur (UX) 6
B.2. Interfaces et esthétique (UI) 7
B.3. Interactivité et animations 8
C. Architecture et fonctionnalités du site 9
C.1. Arborescence et navigation 9
¶
¶
A. Contexte de l’entreprise¶
A.1. Présentation de l’entreprise¶
| Date de création | 1945 |
|---|---|
| Activité principale | Producteurs et exportateurs de produits agricoles |
| Services ou produits proposés | Balles de sisal premium à l’export en B2B |
| Nombre de salariés | 300 collaborateurs, 1800 employés temporaires (ouvriers, champs) |
| Principaux concurrents | Autres producteurs de la filière, autres pays producteurs |
| Présence digitale actuelle (site web, applications, réseaux sociaux, etc.) | Site web temporaire (www.gallois-sisal.com) LinkedIn (pas encore de communication active) Youtube |
A.2. Objectifs du projet¶
| Pourquoi souhaitez-vous refondre ou créer un site web ? |
|---|
| Ressources : Cf. stratégie site web Gallois Sisal souhaite que son site web évolue pour devenir un outil stratégique essentiel : non seulement une vitrine, mais une plateforme qui pilote la communication, permet de mieux comprendre les dynamiques du marché international, et valorise la marque de façon cohérente. Le site devra aussi être doté d’un dispositif complet de suivi et d’analyse de performance, afin de mesurer son impact sur la visibilité, la notoriété, et la génération de prospects qualifiés. |
| Quels sont les objectifs attendus du design UI/UX ? (Expérience utilisateur améliorée, accessibilité, conversion, branding, etc.) |
|---|
| Le design UI/UX du nouveau site web doit poursuivre plusieurs objectifs clés, à la fois techniques, stratégiques et émotionnels. Voici ce qu’il doit permettre de réaliser : Améliorer l’expérience utilisateur Rendre le site fluide, intuitif, avec une navigation claire, des pages bien structurées, un parcours utilisateur logique, et des interactions faciles. L’idée est de minimiser les frictions (pages difficiles à comprendre, menus peu clairs, formulaires complexes), de réduire les erreurs et de rendre l’accès à l’information immédiat. (Usability, simplicité, efficience) Accessibilité et inclusion Veiller à ce que le site soit accessible à tous, sur divers appareils (mobiles, tablettes, desktop), et dans des conditions de connexion variables. Conversion & génération de leads Le design doit guider les visiteurs vers les actions importantes (formulaire de contact, demande d’information, téléchargement, etc.), en optimisant les appels à l’action (CTA), la visibilité des formulaires, la clarté du message, et en réduisant le temps et les étapes nécessaires pour convertir. On vise également à attribuer les conversions selon les sources de trafic, pour mesurer ce qui fonctionne. Renforcement de la marque & cohérence visuelle Le site doit refléter l’identité de marque de Gallois Sisal : premium, durable, authentique, ancrée à Madagascar. Cela passe par une charte graphique forte, des éléments visuels cohérents (couleurs, typographies, images), un style photographique et iconographique identitaire, et une voix/design qui véhicule vos valeurs (cf. charte éditoriale) Engagement & storytelling Le design doit raconter une histoire : montrer qui nous sommes, ce que nous faisons, notre vision du développement durable, notre impact dans la région, notre lien avec les communautés. Il doit engager l’audience, susciter l’émotion, la confiance, à travers des visuels, des témoignages, une mise en avant des projets concrets (cf. contenu et architecture) Performance technique et optimisations Un site performant en termes de vitesse de chargement, de compatibilité mobile, de SEO, avec des pages bien optimisées, des images compressées, un code propre. Cela influence directement l’expérience utilisateur, le référencement naturel, et la rétention des visiteurs. Mesurabilité & amélioration continue Intégrer des outils de suivi, de test (A/B testing, heatmaps, analytics) pour observer ce que font les utilisateurs, comprendre ce qui marche ou pas, et ajuster le design au fil du temps. Le design ne doit pas être figé, mais évoluer avec les retours utilisateurs et les données. |
| Quel est le positionnement de l’entreprise et l’image que le site doit refléter ? |
|---|
| Gallois Sisal est un producteur-exportateur premium de fibres de sisal, enraciné dans le Grand Sud de Madagascar, alliant 80 ans de savoir-faire et un engagement fort en faveur de durabilité. En maîtrisant toute la chaîne — de la plantation à l’export — l’entreprise se distingue par la qualité, la traçabilité, et l’origine naturelle de ses fibres, reconnues sur les marchés internationaux. Son positionnement vise à incarner un modèle de filière résiliente : alliant innovation agro-écologique, impact social équitable et vision à long terme, tout en renforçant sa marque comme une référence haut de gamme pour les marchés sensibles à l’environnement. |
A.3. Cibles du projet¶
| Qui sont vos utilisateurs cibles ? (âge, localisation, habitudes de navigation, appareils utilisés) |
|---|
| Catégories de cibles Cible Profil principal Clients négoce & industriels Acheteurs professionnels, importateurs, entreprises manufacturières recherchant des fibres sisal robustes, traçables, durables. Investisseurs & bailleurs de fonds Institutions, fonds ESG, ONG, organismes de financement cherchant impact social & environnemental, transparence, résultats mesurables. Collaborateurs actuels & futurs talents Jeunes actifs et professionnels expérimentés sensibles aux valeurs, vision durable, développement personnel et contribution significative. Audience grand public / parties prenantes Intéressés par l’agriculture durable, les matériaux écologiques, le patrimoine malgache, les bonnes initiatives, les consommateurs finaux à la recherche de traçabilité et authenticité. Nouveaux acteurs (publics / privés / société civile) Partenaires potentiels : gouvernements, universités, ONG, entreprises tech/agro, cherchant collaboration, innovation, impact local. |
| Données démographiques et comportementales Aspect Détail estimé chez vos utilisateurs / cibles Âge Majoritairement entre 30-55 ans pour les clients B2B, investisseurs, experts. Jeunes actifs aussi (25-35 ans) pour collaborateurs, nouveaux talents. Localisation Internationale — Europe, Asie, Afrique, marchés export. Mais aussi forte audience locale / régionale (Madagascar / Grand Sud) pour engagements communautaires, visibilité territoriale. Appareils utilisés Mélange d’ordinateurs de bureau / portables pour recherches professionnelles (clients, investisseurs), mais usage mobile important (smartphones/tablettes) surtout pour navigation en déplacement, réseaux sociaux, contenus visuels. Habitudes de navigation - Professionnels & experts : recherche via Google / moteurs de recherche, consultation de fiches techniques ou documents PDF, navigation sur desktops pour lectures longues. - Jeunes talents / grand public : plus de navigation sur mobile, usage des réseaux sociaux, vidéos, contenus courts, visuels, très attirés par le visuel, storytelling. - Attente de clarté, rapidité, fiabilité, transparence des données produits / impact / origine. |
| Quels sont leurs besoins et attentes vis-à-vis du site ? |
|---|
| Transparence : sur l’origine, la qualité, la durabilité des fibres, la chaîne de production, les pratiques ESG. Information utile & pertinente : fiches techniques, témoignages, cas d’usage, données chiffrées, études de cas ou preuve de concept local. Navigation fluide & expérience agréable : site rapide, responsive (mobile), design intuitif, accès facile aux informations clés (contact, produits, certifications). Crédibilité & image premium : design soigné, visuels de qualité, discours professionnel, conformité aux normes internationales, certifications visibles. Interaction & contact facilité : formulaires accessibles, réponses rapides, possibilité de joindre un expert ou de demander des devis, contacts personnalisés. Veille, innovation & preuve d'engagement : contenus sur projets en cours, R\&D, initiatives locales, impact social, développement durable, etc. |
| Budget estimatif alloué au projet | entre 3 et 7 millions Ariary (le budget pourra être renégocié selon la complexité du site, dans l’attente des conseils et de l’offre de l’agence) |
|---|---|
B. Spécifications UI/UX¶
B.1. Expérience utilisateur (UX)¶
| Quels parcours utilisateurs clés souhaitez-vous optimiser ? (achat en ligne, prise de contact, navigation, etc.) |
|---|
| Prise de contact / demande d’information : faciliter l’accès au formulaire, réduire le nombre d’étapes, rendre le bouton d’appel à l’action (CTA) visible dans tous les contextes (haut et bas de page, mobile, etc.). Navigation et recherche de produits (fibres de sisal, qualités) : permettre de trouver rapidement les informations sur les produits via un menu clair, des filtres ou une recherche. Parcours investisseurs / bailleurs : accès rapide aux rapports ESG, aux projets, à la vision, à la gouvernance, aux résultats, avec des contenus dédiés (blog/actualités, rapports téléchargeables, vidéos …) facilement accessibles. Attirer les talents / collaborateurs : pages de présentation de la culture, valeurs, opportunités, témoignages des équipes, visibilité des projets de terrain Ajouts relatifs au cross-platform / omnicanal à intégrer : Assurer une expérience cohérente entre plateformes Garantir la continuité de l’expérience utilisateur quel que soit le point d’entrée (réseaux sociaux, site web, mobile), afin de fluidifier les transitions cross-platform. Proposer des contenus et parcours qui s’adaptent selon la plateforme et le support (mobile/desktop), tout en maintenant une identité visuelle, un message et une tonalité de marque uniformes (omnichannel strategy). |
| Y a-t-il des problématiques existantes sur le site actuel ? |
|---|
| Site actuellement sur WordPress ; une landing page temporaire a été créée durant le développement du nouveau site web |
| Quels sont les éléments prioritaires en matière d’ergonomie et d’accessibilité ? |
|---|
| Responsive design total et performance mobile : pages rapides à charger, design adapté pour smartphones/tablettes. Accessibilité selon les normes (contraste, navigation clavier, alt text pour images, vidéos transcrites), pour maximiser l’inclusion. Hiérarchie visuelle claire : menus simples, structure des pages logique, titres/sous-titres, repères visuels constants. Formulaires optimisés : champs nécessaires seulement, validations en temps réel, indicateur de progression si plusieurs étapes, etc. Navigation fluide entre contenus cross-platform : liens explicites vers vidéos, blog, fiches produits, etc., pour encourager l’utilisateur à explorer sans être bloqué. |
B.2. Interfaces et esthétique (UI)¶
| Quelle est l’identité visuelle du site ? (inspirations, références, univers graphique) | Cf. identité visuelle |
|---|---|
| Y a-t-il une charte graphique existante à respecter ? | |
| Quelles sont les couleurs, typographies et styles visuels souhaités ? | |
| Exemples de sites web que vous aimez/détestez et pourquoi : | Unima → Madagascar, ancrage territoriale et engagements, expérience Axian → Engagement, performance, groupe, international, corporate et expérience |
B.3. Interactivité et animations¶
| Souhaitez-vous intégrer des animations ? (micro-interactions, transitions, effets visuels) |
|---|
| Oui, mais avec modération et avec un objectif clair. Gallois Sisal souhaite des animations mineures et subtiles (micro-interactions, feedback visuel après clic, transitions douces, survol de boutons, etc.) pour rendre la navigation plus agréable, indiquer clairement quand une action est prise en compte, et renforcer l’identité de marque sans distraire ou alourdir le site. |
| Quel niveau d’interactivité souhaitez-vous sur le site ? |
|---|
| Call-to-Action (CTA) clairs et interactifs sur toutes les pages (haut de page, pied de page, sections “produits”, “contact”, etc.) Formulaires (prise de contact, demande d’information) avec validation en temps réel, feedback immédiat, retour visuel après soumission Effets de survol (hover), transitions de menu ou d’onglets pour fluidifier la navigation Liens redirectionnels explicites entre plateformes pour créer une expérience cross-platform / omnicanal |
| Y a-t-il des restrictions techniques à prendre en compte ? |
|---|
| La plateforme actuellement utilisée pour le site est WordPress. Est-ce que cette plateforme constitue un frein au regard des besoins exprimés dans cette charte, notamment en matière de performance, d’interactivité cross-platform, d’animation fluide, et de diffusion omnicanale du contenu ? Si oui, doit-on envisager une technologie alternative pour répondre aux attentes de vitesse, de flexibilité, d’expérience utilisateur, et de scalabilité ? |
C. Architecture et fonctionnalités du site¶
C.1. Arborescence et navigation¶
| Quelles sont les principales pages que vous souhaitez voir sur le site ? |
|---|
| Ressources : Cf. architecture dans document site web L’arborescence actuelle doit refléter le storytelling du site : du territoire à la transformation, jusqu’à la collaboration et l’impact. N.B. L’architecture proposée pourra servir de baseline. Cependant, l’agence, si elle en juge la nécessité, pourra émettre des commentaires et des conseils afin d’améliorer l’expérience tout en gardant en tête les contraintes techniques et budgétaires. |
| Quels sont les éléments de navigation essentiels ? |
|---|
| Accueil – porte d’entrée vers le récit et les actualités. À propos – pour comprendre l’histoire, la vision et les valeurs. Produits – pour les partenaires commerciaux, exportateurs et clients B2B. Transition & impacts – pour les investisseurs, bailleurs, et parties prenantes institutionnelles. Construire ensemble – pour les talents, collaborateurs et partenaires d’innovation. Contacts – pour l’accès direct à l’entreprise. Un CTA visible (“Nous contacter”, “Rejoindre le mouvement”, ou “En savoir plus”) doit rester accessible sur toutes les pages — notamment sur mobile — afin de renforcer la conversion. |
| Faut-il prévoir une navigation en plusieurs niveaux (menus déroulants, mégamenu) ? |
|---|
| Oui, il faudrait prévoir une navigation à deux niveaux – sans aller jusqu’au mégamenu. Premier niveau (barre principale) : les 6 rubriques majeures listées ci-dessus. Deuxième niveau (menu déroulant ou sous-menu) : pour les rubriques riches en contenu, notamment : À propos → Histoire / Vision / Valeurs Transition & impacts → Trois axes de transformation (Économie circulaire, Agriculture durable, Innovation & recherche) Construire ensemble → Recrutement / Innovation / Candidature spontanée Un mégamenu n’est pas nécessaire : il serait disproportionné pour un site institutionnel à contenu éditorial. Un menu déroulant simple, fluide et clair suffirait pour maintenir la lisibilité et la cohérence de l’expérience. |
| Faut-il une recherche interne sur le site ? |
|---|
| Oui, une recherche interne serait intéressante, pour trois raisons principales : Accessibilité rapide au contenu : les utilisateurs B2B ou investisseurs chercheront directement des termes comme certifications ESG, rapport d’impact, fibres export, etc. Optimisation SEO interne : une recherche permet d’observer les mots-clés utilisés par les visiteurs, utile pour affiner la stratégie de contenu. Expérience omnicanale : si le site s’intègre à d’autres plateformes (réseaux, base de données produit, blog, etc.), une recherche centralisée fluidifie la navigation cross-platform. |
C.2. Fonctionnalités clés
Vous pourrez répondre par oui ou non les fonctionnalités inclus dans le site et vous pourrez préciser si besoin d’informations spécifiques
| Fonctionnalité | Inclus ? | Commentaires |
|---|---|---|
| Blog / Actualités | Oui | Inclure un système de gestion de blog / articles (texte, images, vidéos). |
| E-commerce / Catalogue produit | Non | Possibilité de prévoir un catalogue produit informatif (fiches de fibres, grades, spécificités) sans nécessairement inclure d’interface de paiement. A discuter avec l’agence pour conseil. |
| Formulaires de contact / devis | Oui | Prévoir des formulaires de contact simples. Ces formulaires doivent être extensibles (ajout futur de champs, workflows, validations conditionnelles, upload de fichiers, etc.). |
| Système d’authentification (espace client) | Non (initialement) | Pas requis pour la version de lancement. Mais préconfigurer l’architecture pour permettre ultérieurement un espace client sécurisé (accès à documents, historique, tarifs réservés, suivi de projet, etc.). A discuter avec l’agence pour conseil. |
| Intégrations externes (CRM, outils marketing, API, etc.) | Oui | Intégrer dès le lancement les modules CRM, marketing automation, analytics, APIs externes (emailing, newsletter, gestion des leads). L’agence doit prévoir des connecteurs modulaires, pour pouvoir ajouter d'autres intégrations à l'avenir (ERP, plateformes tierces, services tiers). |
| Précisez si oui : outils marketing, google Analytics |
|---|
| L’agence est invitée à proposer les outils et intégrations les plus pertinents pour satisfaire les besoins de suivi des KPI décrits. La décision finale sera prise en fonction du coût de ces outils, de leur fiabilité, de leur facilité d’intégration, ainsi que de la conformité aux exigences réglementaires (RGPD, protection des données). Voici, dans le tableau ci-dessous, une liste d’outils / fonctionnalités à envisager pour ce dispositif. |
| Priorité | Outil / Intégration | Rôle essentiel pour Gallois Sisal dès le lancement |
|---|---|---|
| 1 | Traitement des formulaires (avec envoi vers CRM ou base de données leads) | Assurer la collecte fiable des demandes de contact/de devis, avec des notifications et feedback utilisateur. |
| 2 | Analytics / Outil de mesure de performance web | Suivi du trafic, des sources d’acquisition, du comportement utilisateur (vues pages, temps passé, taux de scroll), géographie des visiteurs. |
| 3 | SEO / suivi référencement naturel | Visibilité organique, optimisation mots-clés, audit SEO, balises meta, structure des URL. |
| 4 | CRM léger ou marketing automation simple | Pour gérer les leads récoltés depuis le site, segmenter, éventuellement automatiser quelques réponses ou actions de suivi. |
| 5 | Heatmaps / UX insights (micro-interactions, enregistrements de session) | Pour comprendre les points d’abandon, optimiser l’expérience utilisateur, UX plus fluide. |
| 6 | Outils de lien cross-platform / omnicanal (liens vers YouTube, LinkedIn, contenus externes) | Pour relier les plateformes, maximiser la cohérence du message, favoriser le parcours utilisateur entre les médias. |
| 7 | Espace client / authentification privée | Fonctionnalité moins prioritaire pour le moment, mais à prévoir comme extension possible (accès réservé, contenus privés, historique). |