Project

UI design and Drupal technical support for the City of Carcassonne

Published on 27 December 2021
Photo by Sylvia Szekely on Unsplash
The city of Carcassonne entrusted us with the UI design for the new municipal website. While we supported the redesign of the interfaces, we commend the collaboration with Jean-Christophe, who took charge of the integration! Now it's time to move on to the upgrade to Drupal 9...

The context

The city of Carcassonne chose the agency bluedrop.fr in 2018 to handle Drupal maintenance and technical support for municipal websites. The city of Carcassonne has its own internal technical team responsible for the development and maintenance of all municipal sites: 

The city's technical team has had an open line of credit since 2018, covered by a contract, to request help, support, troubleshooting, or intervention on any of its sites. These interventions may involve technical issues related to Drupal, operating problems, maintenance work, or UX or UI design services. It was in this context that we were approached at the end of 2020 to propose a new artistic direction and lead the redesign of the interfaces of the city’s main website. The city’s teams then took charge of integrating the new theme with dedication and success!

Project constraints – UI redesign without changing backend configurations

The need expressed was to redesign the site interfaces without altering the Drupal configurations, nor the management of content, taxonomies, views, blocks, or paragraphs. Although the content had to be revisited, it was at times poorly presented or organized on the site. The design work, limited to UI, had to take these constraints into account. 

Examples of paragraphs:




As a result, we suggested the following: 

  • Modernizing the city’s brand guide and adapting it to current standards;
  • Reorganizing and providing a new homepage;
  • Proposing a new menu for both desktop and mobile versions;
  • Offering a guide that would make it easy to deploy CSS on most pages. 

Homepage

The information present on the future homepage was not changed. However, the hierarchy of information was different. We find:

  • The homepage components;
  • Flash info: Brief information; 
  • Featured: Important information intended to stay on the homepage for a long time;
  • News: Information feed displayed from most recent to least recent;
  • Event calendar – selected manually;
  • 10 shortcuts to important pages;
  • Videos: the latest videos from the municipality;
  • Kiosk: the latest publications of the municipality.








Integration of the Drupal 8 theme

The theme is based on Bootstrap 5 and benefits from its many advantages, particularly its responsive grid system. We paid special attention to accessibility by offering the following options: 

  • Contrast management – Default, high contrast, or inverted;
  • Font management – using a special font to help mitigate dyslexia;
  • Line spacing management – Default or increased;
  • Justification management – Default or without justification;
  • Image management – Default or replaced with text.





 

The result

The result offers users and residents clear information, high-performance display, and quick access to different services. Streamlined and efficient, it stands as a model project for disseminating municipal information. We are now focused on upgrading the site to Drupal 9.

https://www.carcassonne.org -
Go live: 11/29/2021.

Read more articles on Project