Air Transat www.airtransat.ca Industry Travelling, Transport Partner r42 communication Cooper Building 3981 boul. Saint-Laurent, suite 215 Montreal H2W1Y5 Quebec, Canada Ralph Spandl ralph@r42.ca Contexte Transat, chef de file des voyages en Amérique du Nord, est un pilier de l industrie du forfait de vacances au Canada. Ils proposent des vols à destination de plus de 60 pays autour du monde. Le siège social est situé à Montréal, à quelques pas des bureaux de r42. L entreprise emploie 5 000 personnes et possède 18 unités commerciales. Buts La présence de Transat sur internet remonte à plus de 15 ans. Leur précédent site internet était administré par un CMS créé sur mesure. Cet outil ayant atteint ses limites techniques, Transat a eu besoin d une solution de CMS plus solide. Lorsque leur choix s est porté sur Kentico, il leur a fallu trouver une équipe dont l expertise permettrait de guider leur propre équipe dans une utilisation optimale du CMS. Notre première prise de contact s est faite depuis une plateforme Kentico. Nous avons été mandatés pour transformer la totalité du site web en site adaptatif, puis de l intégrer dans Kentico pour en faciliter la gestion. Cela a inclut : La conception d une architecture Kentico grande-échelle, modulaire et flexible, en considérant la facilité d utilisation et la performance comme des enjeux primordiaux. La conception des interfaces mobiles Le développement front-end du site adaptatif et son intégration dans Kentico L accompagnement de Transat dans l apprentissage du nouveau système Défis Les principaux défis étaient les suivants: Intégrer et simplifier une architecture front-end complexe qui serait en mesure de s intégrer avec les autres services backend de Transat. Synchroniser plusieurs environnements de développement, tests, assurance qualité et production. Préparer l implémentation pour 14 cultures différentes dans 8 pays. Optimiser le chargement des pages en front et back-end (optimiser les requêtes SQL, particulièrement pour le menu personnalisé) Fournir un outil d édition facile à comprendre à une multiplicité de contributeurs et leur permettre de créer plus de fonctionnalités Javascript sans aucune compétence en codage et sans compromettre le design adaptatif de l interface utilisateur. Solution Étant donné l envergure du projet, nous avons revu et adapté notre processus afin qu il soit rigoureusement structuré : décomposition du projet en étapes claires, mitigation des risques, développement en itérations. À cet effet, nous avons d abord analysé et travaillé la plateforme dans son ensemble. Il a été décidé que la section Info-Voyage, qui regroupe une foule d informations sur tout ce qui entoure un voyage en avion (bagages, services en vol, sécurité, etc.), serait la première à être travaillée étant donné que c est une section très achalandée dont les contenus sont moins dépendants d autres systèmes (contrairement à d autres sections du site) et qui permettait aux équipes UX et TI de travailler plusieurs éléments importants. Ajoutons aussi que puisque les
contenus de cette section sont majoritairement des textes informatifs, c était un bon point de départ pour les éditeurs de Transat dans l apprentissage de Kentico. Une fois Info-Voyage en version adaptative en ligne, nous poursuivrions avec la section Destination, et ainsi de suite. A. SOLUTIONS UX Nous avons travaillé en étroite collaboration avec les équipes de design, de SEO et de contenu de Transat pour décliner le design existant de la version desktop en versions mobile et tablette, en incluant : Une nouvelle navigation pour le menu principal Navigation principale - version desktop (à gauche), version mobile (à droite) La réorganisation des mégas-menus Menu de la section Info Voyage méga-menu de la version desktop (à gauche), version mobile (à droite) Images adaptatives : Kentico s occupe de redimensionner et/ou de réduire la résolution d une image selon que l utilisateur utilise un smartphone, une tablette ou un ordinateur. L éditeur n a qu à insérer dans le site web une grande image haute résolution. La conception de carrousel avec tableaux ou images adaptatives.
Caroussel (section Info Voyage) version desktop (à gauche), version mobile (à droite) Caroussel (section Destination) version desktop (à gauche), version mobile (à droite) Tableaux adaptatifs Tableau adaptatif pour la grille tarifaire version desktop (à gauche), version mobile (à droite) Tableau adaptatif version desktop (à gauche), version mobile (à droite)
B. SOLUTIONS KENTICO 1. Architecture modulaire La conception de l architecture Kentico devait être très structurée mais flexible mais afin de permettre une gestion facile du site. La décomposition en modules s est avérée une solution efficace pour atteindre les objectifs suivants : Partager du contenu d une page à une autre sans jamais devoir le dupliquer. La structure modulaire de l architecture assure aux éditeurs qu une information affichée sur le site, même si elle apparaît sur plusieurs pages (comme un numéro de téléphone ou une capsule d information importante), n a en réalité qu un seul original. Si cette information doit être modifiée, l éditeur n a qu à modifier l original pour que le changement s applique partout. Assurer une cohérence visuelle à travers tout le site par la définition de types de documents et de gabarits; et par la catégorisation de chaque morceau d information. Permettre l utilisation des données dans des contextes différents en structurant les contenus dans des bases de données. Par exemple, la section divertissement en vol contient une liste de films avec description, acteurs, durée, image, vidéo, etc. Puisque ces données sont structurées dans une BD, on pourrait aussi bien n afficher qu une liste de films, sans image ni autre information, en un tournemain, pour des fins de vérification, de traduction, ou encore pour affichage sur un terminal spécifique. Puisque Transat est présent sur le web en 13 langues dans 8 pays, faciliter les modifications reliées à la culture (pays/langue) en regroupant toutes les options et les paramètres de configuration ensemble. 2. Utilisation facile pour les éditeurs de Transat Nous avons préparé le contenant de Kentico pour que les éditeurs (qui n ont généralement pas de connaissances en html ou en programmation web) puissent créer des pages complexes et adaptatives, des tableaux adaptatifs, des menus accordéons, etc. Ils peuvent ainsi maîtriser l environnement Kentico et rapidement devenir efficaces dans leurs tâches de gestion et d édition du site adaptatif. Par exemple, pour ajouter du contenu dans un nouveau menu accordéon, il n y a qu à sélectionner le type de document «accordéon» et l insérer dans la page. Tout le formatage et la programmation sont inclus par défaut sans que l éditeur n ait à y faire quoi que ce soit. Dans la section Destinations, par exemple, l éditeur peut facilement mettre des points sur la carte (ci-dessous) ou en éditer le contenu. 3. Performance Avec 3 millions de visites par mois, airtransat.ca est un site achalandé. La performance y est critique : chaque requête, image ou librairie doit être optimisée pour éviter une surcharge aux serveurs et ainsi «ralentir le site», ou diminuer la vitesse sur les connexions mobiles. De plus, ajoutons que les utilisateurs mobiles ont une capacité de concentration souvent limitée dû au contexte d utilisation, ajoutant à la nécessité d une réponse prompte du site web sans quoi il y a risque de confusion. Dans cette optique, et pour respecter les plans de données des utilisateurs mobiles, nous avons effectué des tests de performance et recherché des endroits d optimisation potentielle.
4. Processus de développement décomposer pour simplifier Air Transat, comme la plupart des grandes entreprises, suit un processus rigoureux d approbation, de validation et de tests dans de multiples environnements avant de mettre du nouveau contenu en production sur le web. De notre côté, afin de mitiger les risques, nous avons choisi de séparer complètement le front-end (le développement css/html et l intégration Kentico) du back-end et de procéder à l intégration chez Transat par section. Le développement front-end s est fait dans un premier temps puis a été testé extensivement sur une douzaine de plateformes (différentes combinaisons de navigateurs et d appareils). Le code testé et validé a par la suite été intégré dans Kentico chez Transat, d abord dans leurs environnements de développements et finalement de production. La complétion de la boucle jusqu à la mise en production pour toute la section Info Voyage nous a permis de peaufiner le processus que nous continuerons à utiliser pour toutes les sections restantes jusqu à ce que le site complet soit transformé en site adaptatif. Résultats Le nouveau système de gestion de contenu pour grande entreprise Kentico EMS permettra sous peu à Transat de gérer tout le contenu de son site sur un guichet unique. L architecture modulaire et flexible offre des possibilités étendues de mise à jour et une facilité d utilisation pour les éditeurs. La qualité adaptative du site permet déjà aux utilisateurs mobiles de profiter d une version adaptée de certaines sections du site. Critères clés dans le choix de Kentico Kentico est le seul CMS que nous proposons à nos clients. C est une pièce maitresse de notre méthode de travail. Dans ce projet, notre client avait également choisi Kentico, d où l importance de notre expertise avec le logiciel. La flexibilité et la puissance de Kentico nous a permis de faire face aux défis de ce projet. Les principales raisons pour lesquelles Kentico s est présenté comme la meilleure solution pour ce projet étaient : Sa flexibilité dans l intégration d une architecture front-end complexe Sa flexibilité dans l intégration des services backend de Transat Ses fonctionnalités comme les documents connexes, les types de documents personnalisables, le flux de travail, l administration des versions et de l archivage, et les possibilités offertes pour le référencement. La synchronisation de plusieurs environnements de développement, intermédiaire, d assurance qualité, et de production L exécution de 14 cultures différentes pour 8 pays. Une interface et des outils d édition personnalisables pour plusieurs contributeurs leur permettant de créer plus de fonctionnalités complexes JS en n ayant aucune compétence en code et sans compromettre l interface utilisateur adaptative.