After many months of design and development, we are pleased to celebrate the launch of the website for our second public transport operator. After Marseille, it’s now Nice’s turn to have a platform powered by Drupal and Angular.
The bluedrop.fr / Cityway Collaboration
As the first project in the partnership between our agency and Cityway, an expert in MAAS (Mobility as a Service) digital solutions, the redesign of the website of the Public Transport Authority of the Nice Metropolitan Area brought together:
- The expertise of Cityway in providing digital transport solutions;
- The expertise of the bluedrop.fr agency in UX, UI, and Drupal development.
Beyond the redesign of the Lignes d’Azur website, this partnership is meant to offer a specialized approach for future transport platform projects.
> The bluedrop.fr agency and Drupal serving your mobility, as part of a large-scale MaaS project! - December 15, 2020
Shared Scopes
Bluedrop.fr agency: UX Design, UI Design, deployment and configuration of the Drupal 9 CMS, development of the e-shop, transport data connectors, hosting and maintenance.
Cityway: Provision of route management solutions, timetables, rider information, real-time information, etc.
UX Design
Our design team led and facilitated the UX design process through workshops to create the various user flows needed for an effective user experience. Prototypes were then tested and validated by a panel of users. Main workshops conducted:
Planning / Exploration Workshop
- Statistics analysis workshop;
- User interviews;
- Focus Group.
Ideation Workshops
- Personas workshop;
- User journey / Experience map workshop;
- Sitemap definition (card sorting) workshop;
- Design studio.
Workshops to generate and then present user journeys (with a focus on the e-shop)
- Presentation of user journeys via flowcharts;
- Presentation of wireframes workshop;
- User testing workshops.
UI Design
UI design focused on incorporating Lignes d’Azur’s visual identity, especially:
- Light color usage to avoid overloading the interface and disrupting navigation;
- Use of flat design illustrations to make the experience more personal;
- Highlighting blocks (offsets / staggered) to create a sense of depth and draw attention to key information;
- “Mobile First” approach considering site usage (menu at the bottom of the page, display of traffic alerts, horizontal scrolling to avoid overly long vertical scrolls).
General Architecture – Drupal 9 / Angular / Varnish
With our experience from the Marseille Public Transport Authority, particularly handling traffic surges (strikes, network incidents, etc.), we proposed a similar architecture.
While Cityway focused on developing business applications (APIs, processing data flows, topology, rider information, etc.), we ensured to completely separate the public site URLs for anonymous users from those receiving authenticated traffic (backend, client area). Varnish cache can thus be more easily deployed on the anonymous section of the site.
Additionally, the integration into Drupal of the “business” components provided by Cityway adhered to the logic of progressive decoupling as outlined in a previous blog post.
Technical scope covered by Cityway:
- Route planner;
- Timetable, lines, and stations search;
- User accounts;
- Rider information (traffic alerts);
- On-demand transport.
Cityway delivered Angular components for integration into Drupal. These components interact with APIs and various business applications.
Technical scope covered by the bluedrop.fr agency:
- Editorial pages enhanced with paragraphs (FAQ, legal notices, about us, etc.);
- News section;
- Online store (ticket and transport card purchases) in cooperation with Cityway using an Atlas / Conduent solution;
- Development of a fare assistant;
- Provision of a newsletter sending solution directly within the Drupal back-office (Mailjet);
- Theming and integration of Angular components.
Editorial Management – Drupal 9
The Drupal core met its goals by handling:
- Contributor management and publication workflow;
- Support for multilingualism (the site is available in French, English, Italian);
- Integrated media library management (via the core media module);
Numerous contributed modules handled:
- Media display (videos, carousels, slideshows);
- Sharing on and displaying feeds from social networks;
- SEO optimization (including Google Analytics and Google Tag Manager);
- Integration with market-leading solutions for newsletters, CRM, marketing automation;
- Content personalization tools such as the Paragraphs module and the Layout Paragraph module.
The Challenge of Traffic Surges and Progressive Decoupling with Angular
As a reminder, we have already successfully experimented with integrating business components developed using the VueJS Javascript framework for the RTM site redesign project. Calls to various webservices (route search, maps, etc.) are made client-side by the VueJS components, not server-side via the Drupal CMS.
This approach means having a 100% static site thanks to HTML content served by the CMS and cached with Varnish. As a result, the RTM website is resilient during traffic spikes and is also more responsive.
On the other hand, user-specific content does not pass through Drupal, but through VueJS and third-party APIs.
This approach was retained for the redesign of the Lignes d’Azur site, using Angular instead of VueJS.
Collaborative Development
One of the main methodological challenges was to ensure smooth collaboration between both teams. We recommended leveraging NodeJS dependency management (npm or yarn) via the package.json file. Cityway maintained a private repository that bluedrop.fr had access to, allowing them to retrieve AngularJS components just as one would usually fetch dependencies for a project using npm install.
A semantic versioning of Angular components allowed bluedrop.fr to ensure compatibility of updates with ongoing CSS rules.
Integration into Drupal and Asset Management
We had to anticipate that the number and functional scope of Angular components would likely require browsers to load several megabytes of JS/CSS resources. To meet our performance commitments, we ensured that:
- When a visitor accesses a page, only the components necessary for page display are loaded first and in a non-blocking way;
- Once the page is loaded, other components are preloaded in the background if there's nothing else to do;
- JS and CSS resources are minified and compressed;
- Images are optimized and available in modern formats (e.g., webp, avif) – fallbacks are provided for browsers that don't support them;
- Depending on their size, certain resources (e.g., SVG, icons) can be inserted inline rather than via external calls.
To address this, we chose to prepare our CSS/JS asset build system with webpack.
Finally, if CTW uses Angular, then it’s best to minimize the call to other frameworks or libraries to avoid loading extra dependencies for just a few features.
The Result
The site https://www.lignesdazur.com has been in production since October 20, 2021. We would like to thank all the teams at Cityway and the Public Transport Authority for their hard work and cooperation.
