Une collaboration bluedrop.fr / Cityway qui rassemble : 

• L'expertise de Cityway en matière de fourniture de solutions numériques de transport ;
• L'expertise de l'agence bluedrop.fr en matière d'UX, d'UI et de développement Drupal.

Notre Périmètre :

• Conception UX ;
• Conception UI ;
• Déploiement et configuration du CMS Drupal 9 ;
• Développement de la e-boutique ;
• Développement des connecteurs aux données de transports ;
• Hébergement et maintenance.

• Planification / exploration : Ateliers d'analyse des statistiques, entretiens utilisateurs, focus Group.
• Idéation : Atelier Personas, atelier de conception des parcours utilisateurs, experience map, atelier de définition de l'arborescence (tri de carte), design studio​.
• Génération puis présentation (en insistant sur la e-boutique) : Atelier de présentation des parcours utilisateurs par l'intermédiaire de logigrammes, atelier de présentation des wireframes, ateliers de tests utilisateurs. 
• Conception UI appliquée à déployer la charte graphique d ela Régie dans une démarche atomique et mobile first.

Nous avons choisi de séparer complètement les URL du site public à destination des utilisateurs anonymes des URL recevant le trafic authentifié (backend, espace client). Le cache Varnish peut ainsi être plus simplement déployé sur la partie anonyme du site. L'intégration dans Drupal des composants "métiers" fournis par Cityway a respecté la logique du découplage progressif avec AngularJS pour :

• La boutique ;
• Le développement d'un assistant tarifaire ;
• Le calculateur d'itinéraires ;
• Le compte usager ;
• L'informations voyageurs :
• Le ransport à la demande.

Drupal 9 pour couvrir :

• La gestion des contributeurs et le workflow de publication ;
• La prise en charge du multilinguisme (le site est en français, anglais, italien) ;
• La gestion de la médiathèque intégrée (par l'intermédiaire du module media du core) ;
• L’affichage des médias (vidéos, carrousels, diaporamas) ;
• Le partage sur les réseaux sociaux et l’affichage de flux en provenance de ces derniers ;
• Les optimisations en référencement naturel (SEO, dont Google Analytics et Google Tag Manager) ;
• L’interface avec les solutions leader du marché pour les newsletters, le CRM, le marketing automation ;
• Les outils d'aide à la personnalisation du contenu tels que le module Paragraphs et le module Layout Paragraph.

Le défi des pics de trafic et le découplage progressif avec Angular

Cette approche permet de disposer un site 100% statique grâce à une mise en cache du contenu HTML servi par le CMS via Varnish, en utilisant Angular.

Nous avons dû anticiper le fait que le nombre et le périmètre fonctionnel des composants Angular impliqueraient très probablement des mégaoctets de ressources JS/CSS à récupérer pour les navigateurs. Nous nous sommes assurés que :

• Lorsque l’internaute se connecte à une page du site, il ne charge en premier lieu et de manière non bloquante que les composants nécessaires à l’affichage de la page ;
• Les images soient optimisées et disponibles dans des formats actuels (ex : webp, avif) - des fallbacks sont mis en place pour les navigateurs ne les supportant pas ;
• Lorsque la page est chargée, les autres composants soient préchargés en tâche de fond s’il n’y a rien d’autre à faire ;
• En fonction de leurs poids, certaines ressources (ex : SVG, icônes) puissent être insérées inline plutôt qu’en appels externes ;
• Les ressources JS et CSS soient minifiées et compressées.

Afin de répondre à ce défi, nous avons choisi de préparer notre système de construction des assets CSS/JS avec webpack.