Transport & Logistics

Lignes d'Azur Transit Authority | Nice Metropolitan Area

Date of release : October 2021

After the RTM in Marseille, the Public Transport Authority of the Nice metropolitan area entrusted our agency, as well as transport solutions expert Cityaway, with the redesign of its website.

Visit the site

Our missions

UX design
UI design
Drupal and Angular Development
Drupal Maintenance
Accommodation

A mobility platform for the Nice Metropolitan Area

A collaboration between bluedrop.fr / Cityway that brings together:

Cityway's expertise in providing digital transport solutions;
The expertise of the bluedrop.fr agency in UX, UI, and Drupal development.

Our Scope:

Designing the user experience and graphic interfaces;
Deployment and configuration of the Drupal 9 CMS;
Development of the e-shop;
Development of connectors to transport data;
Hosting and maintenance.

UX and UI design

Planning / Exploration: Statistics analysis workshops, user interviews, focus groups.
Ideation: Personas workshop, user journey design workshop, experience map, site structure definition workshop (card sorting), design studio.
Generation then presentation (with emphasis on the e-shop): User journey presentation workshop using flowcharts, wireframes presentation workshop, user testing workshops.
UI Design applied to deploying the Régie's graphic charter following an atomic and mobile-first approach.

Integration into Drupal and asset management

We had to anticipate that the number and functional scope of the Angular components would very likely require browsers to fetch megabytes of JS/CSS resources. To meet this challenge, we chose to prepare our CSS/JS asset build system with webpack.

We made sure that:

Login

When the user connects to a page of the site, only the components necessary for displaying the page are loaded first and in a non-blocking manner;

Images

Images are optimized and available in modern formats (e.g., webp, avif) – fallbacks are provided for browsers that do not support them;

Loading

When the page is loaded, the other components should be preloaded in the background if there is nothing else to do;

Resources

Depending on their size, some resources (e.g., SVGs, icons) can be inlined rather than loaded via external calls;

Compression

JS and CSS resources are minified and compressed.

General architecture - Drupal 9 / Angular / Varnish

We chose to completely separate the URLs of the public site intended for anonymous users from the URLs receiving authenticated traffic (backend, client area). The Varnish cache can thus be more simply deployed on the anonymous part of the site. The integration into Drupal of the "business" components provided by Cityway respected the logic of progressive decoupling with AngularJS for:

The shop;
The development of a pricing assistant;
The route calculator;
The user account;
Passenger information;
On-demand transport.

Drupal 9 to cover:

Management of contributors and the publication workflow;
Support for multilingualism (the site is in French, English, Italian);
Management of the integrated media library (through the core media module);
Media display (videos, carousels, slideshows);
Sharing on social networks and displaying feeds from them;
Optimizations for natural search engine optimization (SEO, including Google Analytics and Google Tag Manager);
Integration with leading market solutions for newsletters, CRM, and marketing automation;
Tools to support content personalization such as the Paragraphs module and the Layout Paragraph module.

The challenge of traffic spikes and progressive decoupling with Angular
This approach makes it possible to have a 100% static site thanks to caching HTML content served by the CMS via Varnish, using Angular.