WEB / UX / CONTENT

SICA ADVISORS CAPITALUNE EXPERTISE COMPLEXE.RENDUE CLAIRE.

Accueil, en-tête : ville et tour vitrée, accroche sur le développement des économies africaines. Archive du site livré.

ARCHIVE 01 / 06 — ACCUEIL, EN-TÊTE

Copywriting, architecture de contenu, identité visuelle, UX/UI et développement web pour traduire une expertise d’infrastructure et d’investissement en présence digitale crédible et lisible.

COPYWRITING — CONTENT STRATEGY — UX/UI — WEB DESIGN — DEVELOPMENT

Le site original n’est plus en ligne. Cette étude de cas est documentée à partir des archives visuelles du projet.

L’archive : de la page complète à l’expérience

L’ARCHIVE

02
  1. 01 ARCHIVE
  2. 02 FRAGMENT
  3. 03 INTERFACE
  4. 04 EXPERIENCE
Page « Accueil », capture complète. Archive du site livré.

ARCHIVE 01 / 06

Accueil, en-tête : ville et tour vitrée, accroche sur le développement des économies africaines. Archive du site livré.

Nous propulsons le développement des économies africaines et des marchés émergents en développant des projets d’avenir.

— Découvrir

Page d’accueil, archive 01 / 06. L’accroche est retranscrite en texte, l’image reste celle du site livré.

LE DÉFI

03

DES PROJETS COMPLEXES.UNE INFORMATION QUI DEVAIT RESTER SIMPLE.

Rendre compréhensible une société active dans plusieurs secteurs d’infrastructure et d’investissement : quatre filiales, des activités d’investissement, de construction et de trade finance, des bureaux sur trois continents.

  1. 01STRUCTURER L’INFORMATION
  2. 02CLARIFIER L’OFFRE
  3. 03HIÉRARCHISER LES MESSAGES
  4. 04CONSTRUIRE LA CRÉDIBILITÉ
  5. 05FACILITER L’ACCÈS
  6. 06ORIENTER VERS LE CONTACT

CONTENT FIRST

04

AVANT DE REDESSINER LE SITE,IL FALLAIT REDESSINER LE DISCOURS.

SIMPLE! n’a pas seulement dessiné une interface. Le travail commence par le texte : restructurer, réécrire, hiérarchiser, puis convaincre.

  1. 01 →

    RESTRUCTURER

    Une société, quatre filiales, une colonne chacune.

    Accueil, « Nos filiales » : quatre colonnes numérotées 01 à 04. Archive du site livré.

  2. 02 →

    RÉÉCRIRE

    Une accroche qui dit le projet en une phrase.

    Accueil, en-tête : ville et tour vitrée, accroche sur le développement des économies africaines. Archive du site livré.

  3. 03 →

    HIÉRARCHISER

    Principes, vision, mission : un ordre de lecture.

    Accueil, bandeau vert : quatre principes clés, cartes Vision et Mission. Archive du site livré.

  4. 04 !

    CONVAINCRE

    « partenaire N°1 du développement des pays émergents. » Puis : Contactez-nous.

    Bandeau de conversion sur vue aérienne : « partenaire N°1 du développement des pays émergents », bouton Contactez-nous. Archive du site livré.

Captures de l’archive. Les textes trop petits pour être lus restent des images : ils ne sont pas reconstitués.

ARCHITECTURE

05

FAIRE COMPRENDREAVANT DE FAIRE CLIQUER.

Sept entrées de menu, identiques sur chaque page. Sous chacune, des sections titrées qui se lisent dans l’ordre.

Page « Accueil », capture complète. Archive du site livré.

ARCHIVE 01 / 06 — ACCUEIL

  1. 01Qui sommes-nous ?
  2. 02Notre expertise repose sur quatre principes clés
  3. 03Nos valeurs
  4. 04Nos activités – Investissement
  5. 05Nos filiales
  6. 06Nos dernières nouvelles

Synthèse établie à partir des six pages archivées : menu et titres relevés tels quels, pas un plan du site exhaustif.

SYSTÈME VISUEL

06

CRÉDIBILITÉ.ÉCHELLE.INFRASTRUCTURE.

Un vert profond pour l’institution, un vert menthe pour l’élan, un bleu nuit pour le sérieux. Des titres en slab serif, une navigation en sans géométrique, et de grandes images d’infrastructures.

  • VERT SICA#0B6E4F
  • MENTHE#80FEAC
  • BLEU NUIT#16172F
  • GRIS CLAIR#F2F3F1

Couleurs relevées sur l’archive.

Accueil, en-tête : ville et tour vitrée, accroche sur le développement des économies africaines. Archive du site livré.
Construction, en-tête : pelleteuse et ligne d’horizon. Archive du site livré.
Investissement, en-tête : titre de page sur image de marchés financiers. Archive du site livré.

Trois en-têtes de page, trois échelles : la ville, le chantier, les marchés.

IMAGES

07

DEUX IMAGES.UNE PROFONDEUR.

Un même principe de composition revient de page en page : deux photographies décalées qui se chevauchent, face au texte.

  • Accueil, « Qui sommes-nous ? » : trois photos d’infrastructures superposées et texte de présentation. Archive du site livré.

    01 / 05

  • Investissement : deux photos superposées (hôpital, chantier) et texte. Archive du site livré.

    02 / 05

  • Investissement, « Trade Finance » : deux photos superposées (porte-conteneurs, marché). Archive du site livré.

    03 / 05

  • Construction, « Gestion de projet » : deux photos superposées et liste à coches. Archive du site livré.

    04 / 05

  • Construction, « Construction clé en main » : deux portraits superposés. Archive du site livré.

    05 / 05

Le périmètre comprenait le traitement et l’adaptation des images fournies, la sélection d’images complémentaires et la création d’éléments graphiques. L’archive ne permet pas de distinguer les unes des autres : elle est montrée telle quelle.

UX / UI

08

UNE GRANDE AMBITION.UNE NAVIGATION SANS FRICTION.

Les mêmes repères partout : le visiteur sait où il est, ce qu’il peut lire ensuite, et comment prendre contact.

  • 6 / 6pages avec le même menu en tête.

    Barre de navigation : logo SICA Advisors et sept entrées de menu. Archive du site livré.

  • 6 / 6pages qui se terminent sur le même appel au contact.

    Bandeau de conversion sur vue aérienne : « partenaire N°1 du développement des pays émergents », bouton Contactez-nous. Archive du site livré.

  • 4 / 6en-têtes de page suivis d’un lien « — Découvrir ».

    Investissement, en-tête : titre de page sur image de marchés financiers. Archive du site livré.

Relevé sur les six pages archivées. Ce sont des observations, pas des statistiques d’usage.

PROTOTYPE

09

AVANT LE CODE,L’EXPÉRIENCE.

  1. 01 CONTENT

    Les mots d’abord : quatre filiales, quatre noms.

  2. 02 STRUCTURE

    Un ordre : numéroter, aligner, regrouper.

  3. 03 UI

    Accueil, « Nos filiales » : quatre colonnes numérotées 01 à 04. Archive du site livré.

    Une interface : la section telle qu’elle a été livrée.

  4. 04 PROTOTYPE

    Accueil, « Nos filiales » : quatre colonnes numérotées 01 à 04. Archive du site livré.

    Une maquette interactive, pour valider le parcours avant le développement.

  5. 05 DEVELOPMENT

    Barre de navigation : logo SICA Advisors et sept entrées de menu. Archive du site livré.Accueil, « Nos filiales » : quatre colonnes numérotées 01 à 04. Archive du site livré.

    Le site développé, puis mis en ligne.

Progression éditoriale construite pour cette page. Les étapes CONTENT et STRUCTURE sont des schémas, pas des captures de la maquette.

DÉVELOPPEMENT

10

DE LA MAQUETTEAU PRODUIT EN LIGNE.

  • 01

    DÉVELOPPEMENT

    Intégration des pages, des contenus et des images validés en maquette.

  • 02

    HÉBERGEMENT

    Mise en place de l’hébergement du site.

  • 03

    MISE EN PRODUCTION

    Mise en ligne du site.

  • 04

    MAINTENANCE

    Suivi du site après sa mise en ligne.

WORDS, STRUCTURE, DESIGN, CODE, LIVE

ÉCRIRE → STRUCTURER → DESIGNER → DÉVELOPPER → DÉPLOYER

SCOPE

11

Un projet de bout en bout, du premier mot à la maintenance, mené par .

  • COPYWRITING
  • CONTENT RESTRUCTURING
  • CONTENT STRATEGY
  • WEB ART DIRECTION
  • VISUAL IDENTITY
  • IMAGE TREATMENT
  • UX
  • UI DESIGN
  • INTERACTIVE PROTOTYPE
  • WEB DEVELOPMENT
  • HOSTING
  • DEPLOYMENT
  • MAINTENANCE
Accueil, en-tête : ville et tour vitrée, accroche sur le développement des économies africaines. Archive du site livré.

ARCHIVE 01 / 06

SICA ADVISORS CAPITALUNE EXPERTISE COMPLEXE.RENDUE CLAIRE.

UN PROJET

Du discours à l’interface, puis de l’interface au produit en ligne : une présence digitale pensée et construite de bout en bout.

CONTENT.STRUCTURE.DESIGN.CODE.C’EST

PROJET SUIVANT

MARIANE ZOUNDI