Sector(s)

Team Members

yepa, grumpydev74

Project Team

 

Product Owner : Charles Multone
Scrum Master : Mickaël Silvert
Lead Tech & Dev : Ludovic Favre

 

Visit the site

Visit the site

Organizations Involved

Community contributions

Happy Coding has actively contributed to the Drupal community, sharing solutions and patches to strengthen the modules we use and improve their stability.To support our lead developer and optimize bug resolution on modules (names of modules to be added), we occasionally called on an external developer.

Here are some of the main contributions:

Module Permissions by Term:

Module core/file_entity :

Hôpital Fribourgeois (HFR), a major public health institution in French-speaking Switzerland, undertook an ambitious redesign of its website. The main objective was to transform the existing platform into a scalable, intuitive and high-performance tool, aligned with the establishment's global strategy. The project, led by Drupal agency Happycoding in collaboration with 8bitstudio, focused on improving accessibility, simplifying navigation and integrating a scalable architecture to meet the expectations of patients, healthcare professionals and partners.

About the project

Context and objectives

The Hôpital cantonal de Fribourg (HFR) undertook the modernization of its website as part of an ambitious digital strategy. The main objective was to create a digital platform that was intuitive, scalable and perfectly adapted to the varied needs of its users, be they patients, healthcare professionals or partners. The redesign aimed to :

  • Improve the user experience (UX): Offer simplified, fast navigation, with intuitive access to essential services and information.
  • Facilitate internal content management: Enable the editorial team to create and manage content autonomously and more intuitively via a modular, customized backend developed by Happycoding. This interface has been improved in terms of performance (display time) and ergonomic experience.
  • Guarantee security and compliance: Integrate robust solutions that comply with RGPD standards, while protecting users' sensitive data.
  • Optimize accessibility and performance: Make the site accessible to all via a high-performance responsive design, ensuring reduced loading times.

Methodology and approach

The project involved several key stages:

  1. Transition to an SDC (Single Directory Component) model: Paragraph component-based themes have been migrated to a more modular, centralized and scalable approach.
  2. Enhanced editor experience: By replacing the standard Paragraph system with Layout Paragraph and Layout Paragraph Browser, and applying a backend patch to stabilize the module, the editing experience has been significantly improved.
  3. Creation of a Storybook for UX design: In order to guarantee consistency in development and design, a reference Storybook was set up.
  4. Use of artificial intelligence (AI): AI was exploited to generate HTML and CSS code from Figma mock-ups, accelerating integration through the use of the Tailwind CSS model.
  5. Data and performance optimization:
    • Significant work has been carried out on data structure to simplify menus and improve cache invalidation.
    • Search has been optimized to take into account variant spellings, such as “Hema” and “Héma”.
    • Upgrade to the latest versions of Drupal and PHP to ensure optimal loading speed and SEO.
  6. Advanced module development: By using the Bundle Class model instead of traditional hooks in .module files, overload management has been simplified and modernized to facilitate maintenance and scalability.

Results and added value

  • Intuitive navigation and high-performance search: Users benefit from simplified access to services and information, with optimized search for relevant results.

  • An innovative content management tool: The backend product developed enables in-house teams to effectively manage content with flexibility and autonomy, while improving their productivity.

  • Improved performance and SEO: Loading times have been reduced thanks to structural optimizations and simplified menus, enhancing SEO and the overall user experience.

  • Consistent, modern design: The use of Tailwind and the creation of a Storybook enabled rapid and seamless implementation of UX/UI elements.
  • Enhanced security: Strict compliance with RGPD standards and secure implementation of sensitive data ensured the protection of user information.

Distinctive elements

  • Modular, scalable backend: Offering advanced capabilities for autonomous content management, this backend meets the specific needs of a complex hospital environment.

  • Strategic use of artificial intelligence: AI enabled UX mockups to be transformed into code quickly and efficiently, reducing development times.

  • Enhanced editor experience: Tools such as Layout Paragraph provide the editorial team with a clear, functional interface.
  • Performance and technical optimization: The combination of Drupal and PHP updates and structural optimizations guarantees a fast, reliable site.

Why Drupal was chosen

The Drupal CMS stood out thanks to :

  • Its robust security, essential for an environment handling sensitive medical data.

  • Its multilingual management capabilities, adapted to the bilingual (French and German) context of the HFR.

  • A modular architecture enabling advanced customization and easy integration to meet RGPD compliance requirements, a high-performance search engine (Solr) and tailored functionalities.

  • Flexibility to evolve in line with future strategic needs.

Drupal was chosen as the optimal solution to meet these requirements, while guaranteeing a sustainable and innovative platform.

Technical Specifications

Drupal version:

Why these modules/theme/distribution were chosen

The combined use of the modules selected for this project ensures an optimized, high-performance website, perfectly adapted to the needs of the Hôpital cantonal de Fribourg (HFR). Each module plays a complementary role, forming a robust and coherent architecture that enhances user experience, content management and technical performance.

Search and navigation modules, such as Search API Solr with Autocomplete and Menu Trail By Path, ensure a seamless user experience by delivering fast, relevant and ergonomic search results, while offering intuitive navigation through related content. These tools make it easy for patients and healthcare professionals to find the information they need, whether it's about medical services or benefits.

On the content management side, modules such as CKEditor, Layout Discovery and Media offer administrators and editors great flexibility in creating and organizing content. Thanks to an intuitive WYSIWYG editor and centralized management of multimedia elements, the site can evolve agilely while maintaining a consistent visual presentation.

To guarantee optimum accessibility, the Inline Form Error module enhances the user experience by immediately displaying input errors when interacting with forms. Coupled with Breakpoint and Responsive Image, the site adapts effortlessly to all types of device, ensuring maximum accessibility for mobile and desktop users alike.

Finally, modules such as Big Pipe and Pathauto enhance technical performance and SEO. Big Pipe optimizes page loading times by making pages visible as soon as the first elements are available, thus improving the overall user experience. Pathauto, meanwhile, automatically generates user-friendly URL aliases, promoting a search engine optimized structure while simplifying the management of internal links.

Together, these modules form a solid, scalable foundation, enabling the site to meet the complex requirements of a hospital environment, while guaranteeing simplified management and a fluid, accessible user experience.