Port de Québec

Site web
Institutions et organismes publics

Année de conception : 2024

Mandat

Imaginer une vitrine numérique à la hauteur d’un port d’envergure internationale. Une vitrine accessible, humaine, stratégique et prête pour l’avenir.

Contexte

Depuis plus de dix ans, IX accompagne le Port de Québec dans ses projets numériques. Une relation de confiance fondée sur l’écoute, la rigueur et l’envie de bâtir des solutions durables, ensemble.

En 2023, le Port a amorcé une refonte ambitieuse, en deux étapes : une analyse stratégique en profondeur, suivie de la réalisation d’une nouvelle plateforme alignée sur sa Vision 2035: durable, responsable, citoyenne. Bien plus qu’un acteur logistique , le Port est un lieu vivant, engagé, ouvert sur sa communauté. Son site devait raconter cette histoire.

Les objectifs : faire du site web un véritable levier d’engagement. Une plateforme claire, inclusive, inspirante et cohérente avec la mission du Port.

Les défis : simplifier une structure dense, répondre à des publics multiples, connecter les bons systèmes, pour livrer une solution plus performante, accessible et évolutive que la précédente.

Analyser et redéfinir le rôle stratégique du site web

Avant d’aller en appel d’offres, le Port a confié à IX un mandat d’analyse pour clarifier sa vision numérique et redéfinir le rôle stratégique de son site web.

Cette démarche a permis de poser les bases d’une plateforme alignée sur les objectifs stratégiques de l’organisation, de valider les besoins réels des publics internes et externes, et de prioriser les contenus à valeur ajoutée.

Avec ce cadre clair, l’équipe du Port de Québec a pu avancer avec confiance dans la suite du projet : structure, contenus et choix technologiques. Et surtout, la phase d’analyse a permis de traduire l’expérience utilisateur souhaitée en une base solide, inclusive et évolutive.

Actions clés de l’analyse
  • Cartographie complète de l’écosystème numérique : site web, intranet, infolettres, caméras, écrans dynamiques, horaires des navires.
  • Inventaire des contenus et fonctionnalités existantes, avec grille interactive et recommandations claires : à garder, bonifier, créer ou retirer.
  • Ateliers de cocréation avec l’équipe du Port pour prioriser les besoins selon les profils utilisateurs et orienter les choix fonctionnels.
  • Définition des parcours utilisateurs et structuration de l’architecture de contenu en silos thématiques, pour une navigation claire et ciblée.
  • Production de maquettes schématiques (mobile et desktop) pour visualiser l’expérience souhaitée et appuyer les décisions.
  • Rédaction d’un cahier des charges complet avec les spécifications fonctionnelles et techniques pour encadrer la phase de réalisation.

Créer un site web accessible, engageant et performant

À la suite d’un processus d’appel d’offres sur invitation, et l’étude des propositions reçues, le Port de Québec a choisi de confier à IX la réalisation complète de sa nouvelle plateforme. Nous nous sommes bien sûr réjouit de cette démarche en continuité, fondée sur la compréhension de mandat, la confiance et la collaboration.

Grâce à notre connaissance approfondie de l’écosystème du Port, nous avons adopté une approche agile, structurée en sprints courts, avec validations fréquentes et une forte implication client.

Le projet a été mené par une équipe multidisciplinaire dédiée, avec livraisons régulières, backlog évolutif et formations sur mesure, pour assurer une prise en main complète par les équipes internes.

Actions clés de la réalisation

  • Création d’une direction artistique cohérente et d’un système de design complet, inspiré des livrables de l’analyse.
  • Conception des maquettes graphiques (mobile et desktop), avec un soin particulier porté à l’accessibilité.
  • Développement WordPress sur mesure, avec une architecture légère, performante et sécurisée.
  • Mise en place d’un éditeur personnalisé et modulaire, pour une gestion de contenu simple, flexible et autonome.
  • Intégration de composants interactifs pour les formulaires critiques, dont le système d’accréditation vidéo et de génération de codes uniques à l’intention des personnes qui visitent les installations sécurisées chaque jour.
  • Synchronisation en temps réel des données (navires, croisières, qualité de l’air) et interconnexion fluide avec l’intranet existant.

Solutions

  • Design orienté utilisateur

    L’interface a été pensée pour s’adapter à chaque profil, avec une navigation fluide et des contenus faciles à repérer. 

    Sobriété, élégance et accessibilité définissent la direction artistique, en phase avec la Vision 2035 : durable, humaine, connectée. 

    Des animations légères en Lottie viennent ponctuer l’expérience, tout en respectant les critères d’accessibilité : elles peuvent être mises en pause pour répondre aux besoins de tous les utilisateurs.

    Voir l’animation en action

  • Navigation fluide et accessible

    Le site a été pensé pour tous les publics, avec une navigation simple, intuitive et une information accessible en quelques clics.

    L’accessibilité (WCAG 2.1 AA) a guidé chaque étape : contrastes, navigation au clavier, compatibilité des lecteurs d’écran, etc.

    L’option de désactiver les animations, pour une expérience inclusive et confortable, quel que soit le profil utilisateur, est aussi présente sur mobile.

    Voir le site web

  • Cohérence visuelle et technique

    Chaque composant a été conçu pour offrir une expérience harmonieuse, tant côté utilisateur que côté éditeur.

    Le CMS repose sur des blocs Gutenberg personnalisés et des gabarits modulaires, lesquels offrent l’avantage d’une gestion simple, souple et autonome du contenu.

    La gestion des accès est sécurisée via Azure AD, pour une administration fluide et unifiée au sein des équipes du Port.

    Voir le site web

  • Données en temps réel et synchronisation

    Le site affiche en temps réel les horaires des navires, les données environnementales et les informations liées aux croisières, grâce à des intégrations automatisées.

    La qualité de l’air (PM2.5) est présentée sous forme de graphiques interactifs filtrables par station, année ou indice.

    Une webcam intelligente diffuse le fleuve uniquement lorsqu’un navire est à quai — pour une information utile, au bon moment.

    Horaire des croisières

  • Fonctionnalités interactives

    Une carte interactive permet d’explorer les quais, les zones d’activités et les accès au territoire portuaire en quelques clics.

    Le site intègre des formulaires dynamiques et sécurisés pour gérer les accréditations, les demandes citoyennes, les réservations d’espaces et plus encore.

    Un système intelligent relie la vidéo d’accréditation obligatoire à la génération automatique d’un code d’accès unique.

    Carte interactive

Interconnexion avec l’intranet

Le nouveau site cohabite avec l’intranet institutionnel développé par IX en 2017, grâce à des passerelles sécurisées et une gestion fluide des droits d’accès.

Les environnements WordPress (site public) et Rails (intranet) fonctionnent ensemble de façon transparente, sans compromis sur l’expérience ou la sécurité.

Cette interconnexion permet un partage cohérent des contenus, tout en respectant les accès segmentés selon les profils internes. Elle optimise le processus de saisie, évite les doublons et réduit les risques d’erreurs manuelles.

Résultats

  • Une vitrine tournée vers l’avenir

    Une plateforme moderne, stable et évolutive, alignée sur la Vision 2035 du Port.

  • Une expérience fluide pour tous

    Une expérience utilisateur fluide et inclusive, adaptée à une diversité de publics.

  • Une autonomie complète des équipes

    Une équipe interne autonome, grâce à un CMS souple et une formation sur mesure.

  • Une base solide et performante

    Une structure optimisée pour l’accessibilité, le SEO et la performance.

  • Un site branché sur son écosystème

    Un site connecté en temps réel à l’écosystème numérique du Port.

Depuis 2013, nous avons le plaisir de travailler avec l’équipe d’IX pour différents projets numériques […]. Pour chaque mandat, l’équipe d’IX s’est montrée à l’écoute de nos besoins ainsi que de nos attentes; elle a toujours proposé des solutions technologiquement et visuellement novatrices.

Marc Drouin

Directeur des TI

Administration portuaire de Québec

Un projet en tête ?

Planifiez une rencontre exploratoire avec notre équipe.

Projet suivant

Mythes et réalités