Return
X Linkedin
Project

Unifying a region's transportation networks with Drupal

Published on 21 June 2024

After Marseille and Nice, we handled the design and development of the mobility platform for the Oise department, in partnership with Cityway. An innovative Drupal platform designed for users: route planning, ticket purchasing, traffic alerts... 
© Photo credit: Ant Rozetsky.

Public-private partnership

The Joint Association of Collective Transport of Oise brings together all the mobility stakeholders in the Oise department, that is, 17 local authorities each with their own transport network. To name just a few: the Hauts-de-France region, the Oise department, the Beauvais urban community, Creil Sud Oise, and so on.

Their missions:

  • Coordinate transport services to promote intermodality for users;
  • Encourage the creation of coordinated fare structures and unified transport tickets;
  • Implement a common multimodal information system.

A common multimodal information system

In 2010, the syndicate implemented an innovative information system under the brand name Oise Mobilité. Its goal? To address the region's mobility challenges and encourage the combined use of various alternative modes of transport to cars (bus, train, bicycle, walking, carpooling, etc.). More specifically, it is a website that provides:

  • Real-time multimodal traveler information;
  • Route planning (detailed itinerary, trip cost);
  • Unified ticketing for different transport networks;
  • On-demand transport reservations;
  • A personal area that allows you to save locations, favorite routes, and subscribe to disruption alerts. 

Redesign of the oisemobilite.fr website

In 2022, the organization wanted to redesign its website to offer a second, enhanced version with new features related to the evolution of mobility, technologies, and services.

At the same time, as the organization had revamped the brand identity of Oise Mobilité, the new website was also intended to mark the update of the interface design and the official launch of the new brand identity. Our mission: to handle the UX and UI design, development, operation, and hosting of the website together with our partner Cityway.

The collaboration between bluedrop.fr & Cityway

Cityway is a company specializing in Mobility as a Service (MaaS). It provides a digital service that allows users to plan, book, and pay for their transportation in a unified way. As a result, it has taken charge of itinerary calculation widgets, timetable searches, and online ticketing. Our shared experience working on the redesign of the Régie des Transports de la Métropole de Nice website had already allowed us to lay the groundwork for a collaborative working approach. This is something we can now build on to effectively address other transportation platform projects.

Role assignment

Cityway: 
Provision of route management solutions, timetables, passenger information, online shop, etc. These solutions were supplied to our team in the form of Angular components to integrate into Drupal.

bluedrop.fr agency: 
UX and UI design, deployment and configuration of the Drupal CMS, integration of Angular components provided by Cityway, connectors for transport data, hosting and maintenance.

UX design conception

Great attention was paid to the user experience, particularly to the ergonomics of the web pages, the ease and speed of site navigation, especially on mobile devices.

The UX approach was implemented and guided based on a pre-existing structure: that of the Cityway (Manett) product, which had already been tested and proven.

We therefore worked on customizing the existing user journeys. Through a series of workshops, we accomplished:

  • The site map;
  • The wireframes;
  •  A graphic benchmark;
  • The translation of the new visual identity into art direction;
  • Branded user journeys;
  • Designed interfaces;
  • User tests.

UI design

The UI designers translated the new Oise Mobilité graphic charter into components, relying on the graphic principles that emerged from it:

  • Rounded shapes;
  • Large bold titles;
  • Orange and green colors (with a predominance of orange for aesthetic reasons);
  • Combinations of shapes (half-circles);
  • All used on a white background.

Accessibility

Special attention has been paid to accessibility: text readability, contrasts, spacing consistency, clarity of components.

To do this, we relied on the RGAA, the State’s accessibility guidelines. To implement best accessibility practices, we also use AcceDe Web, Design Accessible and Stark, a Figma plugin for checking the accessibility of mockups.

As such, we slightly reworked the orange color from the original graphic charter to add contrast and thus improve its visibility. The accessibility effort was also made during development. It allowed us to reach an accessibility threshold of 96% RGAA compliance.

Technical scope covered by the bluedrop.fr agency

  • Editorial pages enhanced with paragraphs;
  • News section; 
  • Development of a fare assistant;
  • Provision of a user account;
  • Theming and integration of Angular components used for the ticketing system, routes, real-time information, and the topology of bus, tram, and train lines.

Editorial management with Drupal 9

The Drupal core covered:

  • Management of contributors and publication workflow;
  • Support for multilingualism (French and English);
  • Management of the integrated media library (through the core media module).

We added modules to provide several functions:

  • Display of media (videos, carousels, slideshows);
  • Sharing on social networks and displaying feeds;
  • Optimizations for natural referencing (SEO, including Google Analytics and Google Tag Manager);
  • Tools to assist with content personalization such as the Paragraphs module and the Layout Paragraph module.

Managing the multiplicity of transport networks

As previously explained, the union brings together a large number of transport networks. The different networks needed to be able to manage information relating to them without interfering with that of others. To do this, we created several roles: a webmaster with full privileges who can create "network" webmasters whose permissions are limited to their own network. Each stakeholder therefore has control over their fares, news, and presentation page. This service is made possible by the Group module. In line with this, the News section can be filtered by network (by users).

The challenge of traffic spikes and the gradual decoupling with Angular

Drawing on our experience with the Marseille Metropolitan Transport Authority in managing peaks in traffic (strikes, network incidents), we proposed a similar architecture.

As a reminder, we had experimented with integrating business components developed with the VueJS Javascript framework. Thus, calls to various web services (route search, maps, etc.) are not handled server-side by the Drupal CMS, but client-side by the VueJS components.

This approach allows for a 100% static site thanks to caching of the HTML content served by the CMS via Varnish. As a result, the site becomes resilient to traffic spikes and more responsive.

For this project, the same approach was chosen, but using Angular instead of VueJS, as was already the case during the redesign of the Régie des Lignes d'Azur for the Nice Metropolitan Area website.

In addition, the integration into Drupal of the "business" components provided by Cityway followed the principle of progressive decoupling.

Result

The site has been live since July 10, 2023. We would like to thank all the teams at Cityway and the Oise Syndicate for their hard work and cooperation.

Deployment date: 07/10/2023
Website URL: https://www.oise-mobilite.fr/

 

 

Oise Mobility

For more information, you can consult our case study on the subject.
View the case study

Read more articles on Project