N Nouveau site Internet de l'École Julio Garavito : innovation dans le secteur éducatif de Colombie

"J'ai besoin d'un véhicule... rouge, avec un moteur puissant et une bonne économie de carburant. Faites-en une Mercedes."

C'est un exemple que Juan Manuel Aguayo Agudelo, directeur numérique d'Aguayo, utilise lors d'une réunion à l'École colombienne d'ingénierie Julio Garavito. Il l'a pris de Mariluz Sánchez, directrice de projet chez Decameron.

Le but d’Aguayo Agudelo est illustrer l’importance d’aligner les objectifs avec différents publics, concevoir, développer, mettre en œuvre, documenter, adapter, créer et télécharger du contenu et lancer le nouveau portail Web de l'institution.

Depuis janvier 2018, l'École travaillait sur une architecture de l'information avec des orientations stratégiques, techniques et fonctionnelles en collaboration avec CDI Interactive et Ariadna Communications Group. Après le processus de consultation, L'institution a embauché Aguayo en 2019 afin d'obtenir une refonte du site Internet basée sur l'expérience utilisateur (UX).

Les clients en ont toujours besoin. Aguayo aussi : il fallait trouver un moyen pour amener le public de l'institution à identifier des points de rencontre et à construire collectivement un concept de valeur.

Ce n'est qu'en comprenant le besoins des candidats, étudiants, professeurs, doyens, directeurs, gestionnaires et administrateurs vous pourriez avoir une vision claire des forces et des faiblesses.

L'expérience utilisateur (UX) est devenue le seul moyen pour aborder correctement les services, la technologie, les processus opérationnels, les activités et les interactions impactées.

Aguayo a mené de multiples enquêtes auprès de différents publics et basées sur l'expérience utilisateur (UX), à la recherche d'éléments communs sur convivialité, communication, vente, design, identité et service. En voici quelques-uns :

Des ateliers animés par des professionnels ou des spécialistes du domaine, qui ont servi à collecter des informations, à résoudre des problèmes et à valoriser les talents.

Ceci, développé par le chercheur japonais Jiro Kawakita, a été appliqué dans le but de trouver des points communs entre les opinions des doyens, des professeurs et des milieux administratifs. Les questions étaient :

• Quels sont les principaux objectifs du nouveau portail ?
• Quel contenu ou fonctionnalités aimeriez-vous voir ou avoir dans le nouveau portail ?
• Qu’aimez-vous dans le portail actuel ?
• Quelles sont les opportunités d’amélioration les plus significatives du portail actuel ?
• Quels sont les concurrents de l’institution ?
• Quelles sont les principales différences que l’École offre aux candidats ?

Cela nous a permis de comprendre graphiquement les termes avec une plus grande coïncidence. Vous trouverez ci-dessous les résultats des exercices avec les enseignants et les administrateurs :

Outil qui a servi à créer une connexion avec l'utilisateur, à comprendre ses intérêts et ses motivations. Les différents publics ont dressé le profil de leurs utilisateurs sur la base de cinq questions clés :

1. Que vois-tu ?
2. Que dit-il et que fait-il ?
3. Qu'entendez-vous ?
4. Qu'en pensez-vous ?
5. Que ressens-tu ?

Des propositions idéales pour un profil utilisateur ont été créées. Voici quelques conceptions réalisées à l’école en fonction des paramètres :

1. Principaux messages à transmettre.
2. Différentiels.
3. Valeur ajoutée.

La vision de chaque public ou sponsor du projet a été interrogée sur :

1. Vision et objectifs.
2. Différentiels de l'institution.
3. Possibilités d'amélioration.

De plus, le travail de CDI Interactive et d'Ariadna Communications Group a servi de base à la réalisation d'une analyse ou d'une technique heuristique qui évalue le système à partir des principes de l'interaction homme-machine (IPO).

Cela comprenait des catégories telles que le positionnement, la proposition de valeur et la différenciation ; aide; Expérience utilisateur (UX); vente et offre de programmes et inscription et, enfin, sécurité, crédibilité et confiance.

Aguayo a répondu à la question après les résultats des enquêtes. Quelques solutions :

Positionnement, proposition de valeur et différenciation

• Mettre en évidence les différentiels sur la page d'accueil et les pages du programme : qualité, campus, différentiel d'inscription, classement, identité, prestige institutionnel, internationalisation, alliés, etc.
• Communication selon le segment.
• Hiérarchie de l'appel à l'action ou appel à l'action pour démarrer le processus d'inscription.
• Rendre les options d’aide ou de contact visibles.

Aide

• Propre section.
• Questions fréquemment posées.
• Accompagnement de l'utilisateur pendant le processus de décision et d'inscription.

Expérience utilisateur (UX)

• Navigation facile entre les segments.
• Composants réutilisables qui préservent l’identité de la marque.
• Simplifiez les menus.
• Bonne taille, polices lisibles.
• Conception moderne.

Vente et offre de programmes et inscription

• Module explicatif des démarches d'inscription et d'inscription depuis les pages du programme.
• Témoignages de réussite d'étudiants, de diplômés ou d'alliés.
• Contenu innovant aligné sur les tendances, les secteurs et les segments.

Sécurité, crédibilité et confiance

• Informations explicatives sur le processus d'admission telles que les exigences, les coûts, les entretiens, les tests, etc.
• Rendre visibles les labels de qualité, les certifications, les prix ou les récompenses.
• Coûts des preuves, modalités et systèmes de paiement.

Après ce processus, l'objectif stratégique a été défini : promouvoir l'offre académique avec une capture de leads, un contenu de valeur et un design soutenu par l'identité et les différentiels.

Pour le réaliser, la méthodologie a été développée sur la base d'un système Kanban et Scrum (plus Kanban), un processus créatif à travers différentes phases et des demandes des clients converties en exigences et décomposées en tâches, selon Andreína Freitez Moreno, chef de projet Aguayo.

• Planification.
• Architecture de l'information.
• Analyse et conception de logiciels.
• Conception GUI (Graphical User Interface).
• Analyse et production de contenu.
• Développement de logiciels.
• Tests en environnement de production.
• Contribution au contenu et optimisation SEO.
• Formation.
• Mise en œuvre et clôture.

Juan Manuel Aguayo Agudelo souligne que le défi du projet résidait dans la réflexion sur les données, pour construire une plateforme :

1. Adapté aux besoins de l'entreprise.
2. Adapté aux utilisateurs.
3. Avec des informations modifiables à partir d’un seul endroit et situées n’importe où sur le site.

Nous profitons du système des ressources humaines de l'école, où se trouvent tous les membres, et nous le connectons à la page. N'importe qui au sein de ce système peut être appelé sur le site avec son nom ou son identifiant. De même, si nous cliquons sur cette personne, des détails tels que son profil, ses études, ses publications, son CvLAC, entre autres, s'affichent.

L’élément de base le plus minimal est le sujet. Les informations ne sont pas répétées. C'est-à-dire qu'ils sont édités à partir d'un seul point et intégrés aux programmes nécessaires. Les groupes de sujets peuvent ensuite être assemblés, modifiés et déplacés. Nous avons compris le fonctionnement de la partie académique et commerciale de l'École et nous l'avons reflété.

Nous les avons créés en fonction des besoins du service marketing et communication de l'école, pour faciliter la gestion des leads. Il existe également une zone d'édition centrale. Nous mettons des variables d'information et les connectons au CRM (Customer Relationship Management) ou au système de gestion des ventes et des clients de l'entreprise.

• Exigences.
• Dates.
• États (ouverts ou fermés).
• Spécifications pour chaque programme.
• Service de téléchargement de reçus et de paiements.
• Consignes.
• Pas à pas.

Auparavant, le service marketing et communication de l'École disposait de différents mini-sites pour réaliser ses campagnes. C'était un problème. Sur la base du site et des formulaires actuels, nous avons tout intégré en un seul endroit. L'utilisateur a toujours une expérience homogène et il n'y a aucun problème avec les différentes URL.

Disposer de composants mobiles permet aux éditeurs de jouer avec les contenus (textes, images, vidéos, documents...). Nous reproduisons ce système sur toutes les pages du site, pour créer sans limitations comme cela se produit dans un CMS avec WYSIWYG (What You See Is What You Get), un format qui vous permet d'écrire un document montrant directement le résultat final, dont les informations sont gravées et vous ne pouvez pas les utiliser ailleurs.

La priorité était de prendre les données, de les sauvegarder une fois et à un moment donné, de les éditer en un seul endroit. Plus tard, utilisez-les et réutilisez-les sur différentes pages du site. Si des applications ou plusieurs écrans devaient être réalisés dans le futur, ce serait simple grâce à l'organisation des données et aux plateformes avec lesquelles nous travaillons, Wagtail et Django.

Wagtail est un CMS open source de premier plan avec lequel des milliers d'organisations à travers le monde alimentent leurs propriétés numériques. Voici ses principales caractéristiques, selon le site Internet :

• Il est construit en Python, le langage de programmation majeur qui connaît la croissance la plus rapide.
• Python est la norme en matière de science des données et d'apprentissage automatique.

• Les sites Wagtail sont rentables à créer et faciles à développer.
• Il s'agit d'une plateforme naturelle pour un développement véritablement agile.
• Hérite de la forte approche de sécurité de Django.
• Les mises à jour de sécurité mensuelles appartiennent au passé.
• Il est facile à intégrer avec des outils tiers.

• Il est bien adapté pour s’intégrer à votre plateforme CRM et d’automatisation du marketing.
• Également, avec son système de gestion d’événements et son système de conformité des paiements.

• C'est l'un des CMS open source les plus développés.
• Il est actuellement numéro un sur la liste des CMS Python open source mesurés par l'activité de Github, avec dix agences principales mondiales et une communauté mondiale très active et enthousiaste.

• La communauté mondiale développe activement Wagtail, qui a un cycle de publication strict.
• De nouvelles versions sortent tous les deux mois, avec un mélange de nouvelles fonctionnalités et améliorations.
• Il n’y a pas de CMS limité. Wagtail permet aux développeurs et aux concepteurs de travailler comme ils le souhaitent.

Framework ou structure de support pour le développement web et open source écrit en Python. Voici ses principales caractéristiques, selon le site Internet :

• Conçu pour aider les développeurs à faire passer les applications du concept à la réalisation le plus rapidement possible.
• Il comprend des dizaines d'extras qui peuvent être utilisés pour gérer les tâches courantes de développement Web.

• Il gère l'authentification des utilisateurs, la gestion de contenu, les plans de site, les flux RSS et bien plus encore, dès la sortie de la boîte.

• Il prend la sécurité très au sérieux et aide les développeurs à éviter les erreurs courantes telles que l'injection SQL, les scripts intersites, la falsification de requêtes intersites et le détournement de clics.
• Son système d'authentification des utilisateurs offre un moyen sécurisé de gérer les comptes et les mots de passe.

• Certains des sites les plus fréquentés de la planète utilisent la capacité de Django à évoluer rapidement et de manière flexible pour répondre aux demandes de trafic les plus importantes.
• Des entreprises, des organisations et des gouvernements ont utilisé Django pour tout créer, des systèmes de gestion de contenu aux réseaux sociaux et plateformes informatiques scientifiques.

Ceux qui faisaient partie de l'équipe de l'École dans ce projet ont répondu aux questions d'Aguayo liées aux défis, aux leçons et aux conclusions.

• Le plus difficile a été de capter les besoins et d'exprimer les attentes des publics, comme comprendre ce que les directives voulaient montrer sans aller à l'encontre de ce que la communauté attendait.

• Le site est très visuel, axé sur le contenu et intuitif. Il offre une excellente expérience de navigation, présente notre offre de valeur de manière agréable et engage. Il présente une cohérence dans les différentes sections et est uniforme.

• Je mets en avant le moteur de recherche, car il n'est pas courant sur les pages.

• Concernant la gestion, j'ai trouvé le moyen de signaler les incidents avec Gitlab très approprié. Le plus important était la connaissance par Aguayo de cet outil et son adaptation aux besoins du moment.

• J'ai trouvé de nombreux outils pour rendre mes informations plus attractives : vidéos, textes, photos, phrases, surlignages, galeries, listes, formulaires, profils, maillages, accordéons d'éléments simples, fiches de personnes. Des possibilités et des moyens infinis pour fournir des informations pertinentes et précieuses.

• Des événements, des processus d'admission, des concours et des programmes sont organisés pour qu'un utilisateur puisse les trouver et en profiter.

• Je peux dire qu’il faut de la technologie, de la créativité, de nombreuses heures de travail et quelques heures de sommeil pour faire d’une page de ce calibre une réalité.

• Connaître l'École, la visiter, connaître sa philosophie, sa politique, sa pensée et ses objectifs ont permis à Aguayo de donner vie à cette page, moderne et au service d'une communauté qui la mérite.

Les dirigeants de la région d'Aguayo ont répondu quelle était la plus grande contribution au projet avec l'école. Dans ses mots :

Dans un premier temps, nous avons réalisé des études et des analyses dans le but d'organiser et de structurer les informations sur les écrans. Ce processus a nécessité de sélectionner des données et de réfléchir à leur présentation. C'est ainsi que nous construisons des wireframes ou des plans de page, puis nous concevons.

Sur plusieurs points, nous avons dû revenir en arrière. Cela ne veut pas dire que ce qui a été proposé était mauvais, mais qu'au fur et à mesure que nous progressions, nous comprenions mieux comment fonctionnait l'intérieur de l'École. Cette situation se produit fréquemment dans les projets numériques, car cette industrie est en constante évolution et infinie. Nous n'arrêtons jamais d'apprendre.

Les changements constituaient une évolution, car nous avons commencé à nous concentrer de plus en plus sur les composants. De plus, nous avons mis en place de nouveaux processus de recherche pour les dernières technologies et tendances à mesure que les clients communiquaient leurs besoins.

L'optimisation à la volée est devenue un défi de taille. C’était notre obligation de redonner et de faire de notre mieux. Le souci d'Aguayo est toujours de livrer des projets d'excellente qualité.

L'objectif était de générer un cadre de composants réutilisables, évolutifs et faciles à entretenir. Avec cette approche, nous avons réussi à construire un système adapté aux besoins des éditeurs de contenu.

Grâce au processus d'architecture que nous réalisons dans les projets Aguayo, nous identifions des modèles et des variations, pour créer des composants sémantiques, flexibles et indépendants du contexte et du contenu. Nous suivons les meilleures normes et méthodologies de développement telles que BEMIT, qui vous permet d'écrire du code HTML transparent (clair et évident dans son intention) et auto-documenté.

La plus grande contribution a été la plate-forme technologique côté serveur, car elle constitue l'épine dorsale du nouveau site Web. Le choix de la pile technologique, c'est-à-dire des services utilisés pour créer et exécuter une application, a été prudent, afin d'obtenir des performances et une fiabilité maximales de la plateforme de services de cloud computing Heroku. Des benchmarks et des tests ont été réalisés pour déterminer des éléments tels que le moteur de base de données (PostgreSQL) et le serveur web (Gunicorn).

Notre objectif depuis le début était de développer un système de gestion de contenu (CMS) monolithique robuste, flexible et évolutif, offrant la meilleure expérience utilisateur (UX) aux visiteurs, aux administrateurs et au personnel de l'institution. Pour cette raison, nous avons choisi Wagtail, un CMS supporté par le framework Django utilisé par Instagram, Spotify, Youtube, Platzi, entre autres.

L'équipe s'est toujours engagée à offrir une solution optimale. Nous concentrons nos efforts sur le fait de bien faire les choses : un code maintenable, propre, documenté, optimisé et révisé par les pairs qui répond aux normes du langage de programmation Python.

La principale force d'Aguayo est la synergie. Chacun travaille dans sa spécialité, partage ses connaissances et respecte son équipe et celles des autres domaines, pour obtenir un produit de qualité. Il existe également un processus de documentation bien défini, une gestion de projet et une communication constante, une résolution rapide des problèmes qui surviennent en cours de route et une attention totale aux demandes des clients.

Le contenu devait répondre aux besoins de l'École. De plus, il doit être original, utile, véridique, facile à comprendre, cohérent avec chaque audience, optimisé pour les moteurs de recherche (SEO - Search Engine Optimization), mesurable, entre autres caractéristiques.

Le premier examen a montré que l’ancien site comptait environ 100 000 pages. Nous couvrons au moins 80 % de ce chiffre avec la création et l'édition de textes. Les deux ont nécessité environ 120 entretiens et transcriptions ; analyse de milliers de pages et de documents du site ; des tableaux pour chaque section qui nous montreront un aperçu de la façon de classer, cataloguer et présenter l'information ; tableaux de structure du contenu par page du nouveau site et autres exercices.

De plus, nous travaillons dur sur la production photographique. Pour la pré-production, nous nous sommes réunis en interne à plusieurs reprises, nous avons discuté et défini la proposition ; nous avons fait un inventaire de chaque espace de l'institution (qui a une superficie de 288 972 m², 11 bâtiments principaux et 7 mineurs) ; nous captons les idées des dirigeants tels que les doyens, les directeurs et les chefs de secteur ; Nous avons eu plusieurs séances avec le Département Marketing et Communication (qui à son tour a eu des réunions sur le même sujet avec le Rectorat et les Vice-Recteurs) pour définir le look and feel ; En collaboration avec l'École, nous avons construit une base de données avec les emplacements, les numéros de téléphone et les adresses e-mail des étudiants et des enseignants qui allaient participer, entre autres activités.

La production photographique s'est déroulée de l'aube au crépuscule pendant 11 jours à l'intérieur de l'École. Nous avons à nouveau visité des salles de classe, des auditoriums, des laboratoires, des couloirs, des espaces extérieurs, des cafétérias... dans chaque coin, avec le grand soutien d'une équipe de l'institution, afin de capturer des images qui reflétaient le travail précédent. La post-production s'est déroulée en plusieurs étapes, en fonction de la demande personnelle d'Aguayo.

Pour obtenir des textes et des photos conformes au nouveau site Internet, il n'était pas seulement important de se connecter avec l'institution et d'avoir une connaissance approfondie de son contenu. Il était également essentiel de comprendre les domaines Architecture de l'information, UX, UI, GUI, Back et Front d'Aguayo dès le début. Chaque spécialité de notre organisation a agi comme un puzzle, construit grâce à l'écoute, la connaissance, la persévérance, l'empathie et l'engagement.

Procéder en parallèle sur tous les fronts est devenu la bonne voie.

Pour la page actuelle, un système a été proposé qui permet de modifier chacune des structures HTML et de se conformer aux exigences SEO telles que H1, H2, H3, attribut Alt, etc. De même, des champs de titre optimisés, d'URL conviviale, d'image et de description ont été introduits dans l'administrateur, ce qui améliore le positionnement dans les moteurs de recherche et améliore l'expérience utilisateur.

Aguayo a réalisé un autre processus : celui des redirections. Il s’agissait de faire un inventaire des pages existantes sur l’ancien site et de comprendre lesquelles étaient importantes.

"Les URL du site précédent allaient être différentes sur le nouveau, nous avons donc créé une stratégie pour respecter la position des pages précédentes dans les moteurs de recherche comme Google et déplacer l'utilisateur directement vers les nouvelles pages. Nous avons utilisé divers outils pour comprendre quel était le flux des utilisateurs et ne pas avoir de problèmes de positionnement", selon Aguayo Agudelo.

• Python, langage de programmation simplifié, rapide, flexible et ordonné.
• Django, framework ou structure conceptuelle et technologique utilisé par des organisations comme Instagram et Pinterest.
• Wagtail, CMS ou gestionnaire de contenu utilisé par Google, la NASA, le Massachusetts Institute of Technology (MIT) et le Royal College of Arts.
• SOAP et REST avec des systèmes existants, des transmetteurs de données en ligne qui s'adaptent aux besoins des services Web et permettent la communication entre les applications.
• Heroku (AWS), infrastructure cloud utilisée par Macy's, Toyota et des banques numériques innovantes aux États-Unis et en Europe.
• Elasticsearch, moteur de recherche implémenté dans Uber, Udemy et Shopify.
• Postgres, une base de données gérée par Gandi.net, Varicent et BitLeap LLC.

Marketing et communication

• Créez et utilisez des informations spécialisées telles que des formulaires intégrés au CRM, des atterrissages, des accès pour différents types d'utilisateurs, des actualités, des événements, entre autres.

Admissions

• Créez et gérez une nouvelle admission académique avec les exigences, les dates d'ouverture et de clôture, les programmes académiques spécifiques ou généraux et les liens avec les systèmes existants du processus.

Coordination académique

• Créez et gérez des sujets avec un contenu structuré tel que le nom, le semestre, la description, les relations de dépendance, les codes, les noyaux de formation et les plans d'études liés aux programmes.

Ressources humaines

• Ajoutez et gérez à partir des systèmes existants le statut de toute personne embauchée ou faisant partie de l'institution, afin qu'elle ait son propre profil. Ajoutez ou annulez également la publication de profils spécifiques.

Technologie de l'information (TI)

• Gérer le code de programmation et l'infrastructure.
• Effectuez des déploiements en quelques minutes.
• Gérer trois environnements de travail : Développement, Tests et Production.
• Traitez avec les référentiels GIT ou le répertoire où les fichiers sont stockés selon la méthodologie Gitflow, construite avec les normes internationales. Cela fournit un cadre solide pour la gestion des projets.

Le recteur de l'École colombienne d'ingénierie Julio Garavito, Héctor Alfonso Rodríguez Díaz, a souligné les avantages du nouveau site Internet :

• Il vous permet de connaître notre institution de manière simple et intégrée.

• Il est désormais possible de mieux comprendre l'École, son travail et sa contribution à la société. Les ressources et services liés aux liens, moteurs de recherche, forums, documents et applications facilitent cette tâche.

Il aurait été impossible de réaliser un projet de cette qualité sans le dévouement, les efforts, le soutien et l'engagement de l'équipe de l'École colombienne d'ingénierie Julio Garavito.

Ci-dessus, de gauche à droite : Jimmy Ignacio Ruiz Villate, Jorge Eduardo Acero Baracaldo, Ángela María Guerrón González, Esperanza Páez Torres et Claudia Patricia Sierra Díaz.

Ci-dessous, de gauche à droite : Lina María Aguirre Ramírez, Ángela Johana Gómez Roa, Leonardo Melquicidec Rodríguez Torres, Carlos Humberto Pérez Muñoz et Isabel Cristina Salazar Perdomo.

*Luisa Fernanda Manrique Riaño a également fait partie de la première étape du projet en tant que directrice du marketing et des communications.

Merci également à ceux qui ont donné leur talent et leurs efforts à Aguayo dans les différentes phases du projet.

Visitez le nouveau site Internet du École colombienne d'ingénierie Julio Garavito, sorti le 18 septembre 2020.