Aller au contenu

Études de cas en finalisationQuelques études de cas sont encore en cours de finalisation.

← Tous les projets

UX web · Architecture de l’information · Storytelling visuel

Relier l’héritage, la découverte des produits et une industrie en transition.

Une expérience web institutionnelle responsive pour Gallois Sisal, producteur malgache de sisal. La conception articule l’histoire de l’entreprise, les différentes qualités de fibres, les initiatives de transition, les actualités et les opportunités professionnelles autour d’une architecture d’information claire et d’un storytelling éditorial.

Entreprise
Établissements Gallois Sisal (EGS)
Crédit
Gallois Sisal · Avec Riake Agency
Localisation
Amboasary-Atsimo, Madagascar
Secteur
Production de fibre de sisal
Format
Site web institutionnel responsive
Périmètre
UX web · Architecture de l’information · Storytelling visuel
Statut
Aperçu · maquettes approuvées montrées
Gallois Sisal : la page d’accueil mobile du site sur un paysage brumeux d’Amboasary-Atsimo

Aperçu du projet · écrans approuvés du fichier de design · Avec Riake Agency

01 / Ce que le site réunit

Un site institutionnel, plusieurs types de contenus.

Hero de la page d’accueil du site Gallois Sisal : une photographie aérienne des champs de sisal, la navigation Accueil, À propos, L’équipe, Nos produits, Les impacts, Transition et un bouton « Nous contacter », le titre « Bienvenue à Amboasary-Atsimo », deux boutons, « Découvrir nos grades » et « Notre histoire », et trois chiffres de l’entreprise.
Maquette approuvée · Accueil, 1440L’accueil s’ouvre sur le territoire avant les produits : deux entrées, grades et histoire ; les chiffres sont le contenu de l’entreprise.

L’expérience rassemble des contenus jusque-là dispersés, pour que chaque visiteur trouve la partie de l’entreprise qui le concerne :

  • Histoire et héritage

    Le récit de l’entreprise et ses racines à Amboasary-Atsimo.

  • Qualités de fibres

    Les produits en fibre de sisal et ce qui distingue les différentes qualités.

  • Initiatives de transition

    Les initiatives de transition et de durabilité dans lesquelles l’entreprise est engagée.

  • Actualités et carrières

    Les actualités de l’entreprise et les opportunités professionnelles.

02 / L’angle UX

Un site éditorial qui organise plusieurs parcours.

Un site institutionnel éditorial qui tient ensemble plusieurs parcours : comprendre l’entreprise, découvrir les qualités, explorer la transition, prendre contact ; une structure plus claire et un storytelling visuel les relient au lieu d’empiler des pages.

  • Comprendre l’entreprise

    Qui est Gallois Sisal, où elle opère et ce qu’elle défend.

  • Découvrir les qualités

    Trouver les bons produits en fibre et comprendre ce qui les distingue.

  • Explorer la transition

    Suivre les initiatives qui accompagnent une industrie en mutation.

  • Prendre contact

    Joindre l’entreprise pour des produits, des partenariats ou des carrières.

Hero de la page produits : une photographie d’un champ de sisal avec un bâtiment blanc, le titre « Sourcer des fibres premium ; produire différemment » et deux boutons, « Trouver mon grade » et « Nous contacter ».
Maquette approuvée · Page produitsProduits : la promesse en deux lignes et l’entrée vers le guide des grades.
Hero de la page impacts : une photographie d’un ouvrier portant des feuilles de sisal sur une piste, l’étiquette « Concrétiser le changement », le titre « Mesurer les impacts » et deux boutons, « Voir nos impacts » et « Nous soutenir ».
Maquette approuvée · Page impactsImpacts : la même grammaire de hero avec ses deux actions propres.

Gallois Sisal · site institutionnel

Sept pages, une seule grammaire de sections

  • À propos et équipe

    • L’histoire depuis 1945
    • L’équipe

  • Produits

    • Les qualités de fibres
    • Entrée vers le guide des grades

  • Impacts

    • Impacts mesurés
    • Façons de soutenir

  • Transition

    • Initiatives de transition
    • Territoire

  • Contact, actualités et carrières

    • Contact et FAQ
    • Actualités
    • Postes ouverts
Pages de la structure approuvée : la même grammaire, hero, blocs de récit, appels à l’action, en quatre largeurs (1440, 1024, 744, 393).

Une grammaire pour sept pages

Problème
Sept pages aux contenus différents, lues par les mêmes visiteurs sur quatre largeurs.
Principe UX
Consistency and standards  (s’ouvre dans un nouvel onglet, en anglais) · Nielsen Norman GroupLa structure approuvée illustre ce principe : même hero, mêmes blocs de récit et actions sur chaque page, pour qu’une page apprenne à lire la suivante.
Décision de design
Une grammaire de sections commune aux pages et aux points de rupture ; chaque page garde sa photographie, son titre et sa paire d’actions.
Preuve visuelle
Heros accueil, produits et impacts ci-dessus · section 03.
Résultat · statut
Maquettes approuvées · répartition du travail avec l’agence non publiée.

Maquettes responsives approuvées du site, conçues avec Riake Agency ; la répartition détaillée du travail entre l’agence et moi n’est pas publiée.

03 / Responsive et explorations

La même grammaire de 1440 à 393.

Le bloc de récit et le hero mobile montrent les sections aux deux extrémités : la photographie garde sa place, la colonne de texte se resserre, les actions s’empilent.

Bloc de récit de la page d’accueil : l’étiquette « Pourquoi le sisal Gallois », le titre « Sisal premium, héritage et engagement », deux courts paragraphes depuis 1945 et un bouton « Notre territoire » à côté d’une photographie aérienne de la plantation.
Maquette approuvée · Bloc de récit de l’accueil, 1440Le bloc de récit : étiquette, titre, deux paragraphes, une action, une photographie.
Hero mobile de la page d’accueil : le logo et un bouton de menu, le titre « Bienvenue à Amboasary-Atsimo », une courte ligne, deux boutons empilés et les trois chiffres de l’entreprise sur une ligne.
Maquette approuvée · Accueil, 393À la largeur d’un téléphone, le hero garde son ordre : lieu, titre, ligne, deux actions, chiffres.

Le fichier explore aussi un court questionnaire qui oriente les visiteurs vers la bonne qualité, accessible depuis « Trouver mon grade » : un sujet candidat pour une future étude de cas.

Explorations d’interface issues du fichier de design — non présentées comme des fonctionnalités développées ou déployées.

04 / En séquence

Trois pages, une grammaire, en mouvement.

Les pages accueil, produits et impacts lues l’une après l’autre : la photographie, le titre et la paire d’actions gardent leur place d’une page à la suivante. Trois maquettes approuvées montrées plus haut, aucune interaction produit : les transitions sont une mise en scène, rien de plus.

Scène 1 sur 3 · Accueil · le territoire d’abordPhotographie aérienne des champs, deux entrées, grades et histoire, les chiffres de l’entreprise.

Séquence construite à partir des maquettes approuvées de cette page ; rien n’est enregistré depuis un site en ligne, aucune fonctionnalité n’est présentée comme développée.

05 / Statut

Ce qu’est cette page, et la suite.

Un aperçu du projet : écrans approuvés et faits vérifiés seulement. La contribution détaillée, les décisions et les compromis seront publiés une fois confirmés ; aucun résultat ni indicateur n’est revendiqué.

Aperçu du projet ↗