Launch of the CGT website with Drupal 8

The Project

The General Confederation of Labor entrusted us with the complete redesign of its website www.cgt.fr. It was necessary to follow trends, position itself, stand out. Whereas the previous site mixed editorial content, services, and audiences, the new site stands out: it must reach as many people as possible, assert or convey a voice through an official channel. It must also bring together and broaden its base of supporters and activists. 

The project therefore focused on creating an optimized "anonymous" space designed for everyone. It's a magazine. 

The project focused on providing an effective activist space, limited to a few features, but organized to maximize and facilitate activist operations, as well as the recruitment of new members.

The main challenges of this project were:

• Optimizing the user experience and modernizing interfaces;
• Migrating all content from SPIP to Drupal 8; 
• Developing a simple and effective activist space.

To address these challenges, bluedrop.fr handled:

• Audience and persona analysis; 
• UX and UI design, including responsive design adaptation; 
• Development of the site with Drupal 8; 
• Front-end integration; 
• Migration of all content from SPIP to Drupal 8.

We also support the CGT in hosting and third-party application maintenance for the Drupal site.

Design Process 

The site www.cgt.fr is a content-heavy website based on a complex and unclear information architecture, making user navigation difficult. It was necessary to provide an intuitive and smooth user experience and design a relevant information architecture to facilitate access to information despite the high volume of content.
     
To meet ergonomic and graphic requirements, we followed the process below during the design phase:

• Benchmark : This first step is the study of similar sites, comparing content-heavy sites to analyze information architecture as well as navigation and interface trends.
• SEO Analysis: This step involves analyzing site traffic statistics to identify navigation habits, the source of visitors, the proportion of "mobile" users, as well as bounce rates. This information allowed us to categorize user types.
• Persona Analysis: These workshops define personas, typical user stereotypes. This analysis informed user profile design and their journeys.
• Content Analysis: This step linked content types, user profiles, and their journeys. 
• Defining user journeys: This step defines how to guide a user to information/content. To do this, we analyzed expectations, needs, and obstacles per persona. Example: a mobile user only interested in general editorial content must see the “hot” content above the fold. 
• Defining information architecture: With the user journeys established, the next step is to organize information for the different profiles—Which content goes on which page? How to simplify access to key information? How to distinguish content types for better visibility? We used colors as well as filtering by sector, geography, and topic.
• Zoning : Then we presented the different content elements and exactly positioned them in the various pages or templates.
• Wireframes : Next, we developed wireframe mockups as is standard practice.
• Graphic mockups: This is the graphic design phase applying graphics to ergonomic mockups.

This creative process and CGT’s expectations led the team to opt for a “Magazine” style site—a bold choice where information and news must constitute most of the site (a ratio of 70% information to 30% for the "Activist Space").

UX/UI Design Features

CGT’s historical identity needed to be maintained through the website design. CGT imposed specific colors, which was a challenge when we wanted to update the look and feel of the union’s brand. The goal was to incorporate this historical identity (colors, logos, graphic guidelines, etc.) within a site that benefits from modern web design trends. The UIX designer chose to mix styles to achieve a look easily recognizable as CGT, while providing a modern page structure (an airy page, large visuals, innovative navigation via a full-screen mega menu... Letting each user navigate according to their chosen theme). 

Main Features of the Site

The www.cgt.fr site is an information platform designed to inform and organize activist interaction for its members. Among the deployed features, we note:

• Activist Space - This area is the major new feature of the site, allowing activist users to access their private space and have an interface to create, publish, and view news including attached documents. This news is visible and shareable only among activists. Additionally, users can also manage or download files and folders. They can provide and update their profile information and create discussion forums for activists to exchange ideas. A search system enables searching and sorting content using taxonomies.
• News/ Dossiers/ Press Releases - The cgt.fr site offers complete reports on particular subjects and press releases published by the Confederation. Content can be filtered using taxonomies (professions, territories, and topics).
• WebTV - The WebTV section broadcasts video content hosted on YouTube. Videos can also be sorted using taxonomies for faster searching by category.  
• Search Engine - The site has a search engine available throughout navigation. This search engine allows searching the full text of content and attached documents (especially PDFs).
• Petition - The site offers a tool to create and manage petitions from content types. A petition has two blocks: the first displays the petition signing form, and the second shows the results (number of signatories, names, comments, etc.). Only validated signatures (by an email that must be confirmed) are counted in the petition. This Drupal 8 module is being standardized for release to the Drupal community.
• Full screen mega menu - Given the large volume of content, the site map needed to offer all sections clearly and intuitively without losing the user. We found it pertinent to implement a full-screen mega menu, allowing search by categories (industry sectors, geography, and themes) as well as content types (News, reports, WebTV, calendar, and press releases). 
• Union Sign-up Form - a “Join the union” form allows visitors to become members. The module calculates the membership fee based on the user's income and enables secure payment of the annual fee.
• Interactive Map - The site features an interactive map to search for and view a CGT establishment nearby. This page offers filters to refine the search by type of establishment, region, and department.
• Calameo PDF Reader - The site provides CGT Publications as PDF documents viewable through the Calameo reader. 
• Social sharing - A feature for sharing content on social networks is now available under each item.

Technical Features

The site was built with Drupal 8 and Foundation 6 for the theme. Here are some of the modules used in the redesign: 

• For search - The combination of SearchAPI and SolrAPI modules was necessary to implement a high-performance search system, enabling search across the entire site, both in the text content and in documents (PDF, Office, etc.).
• For the activist space - Several modules were needed to develop the functionalities for this area. First, activist registration uses a three-step membership form that required a particular workflow, needing a patch to the Webform module to customize the steps, behavior, and display. We also used the Content Moderation, Workflow modules, and specific modules allowing users to upload files and create and publish (tagged activist) articles. Additionally, a specific module was developed to secure and limit activist access (which admins can modify from the back-end).
• For forms - We used Webform notably for the "Join the union" form and the contact form.
• For the map - The Geolocation Field module was necessary to integrate the interactive map. This module manages geographic point coordinates (latitude and longitude) on the map.
• For the mega menu - We used the Swiper library and the Tabs functionality of Foundation, combined with a specific module to enable advanced JavaScript features. We also developed a mobile version of this menu for navigation perfectly suited to mobile use.

Challenges Encountered

• For the import - An import from the Spip database to Drupal 8 was required. This import was technically complex because of the variety of data in the Spip database (e.g., code with tags and elements that did not conform to HTML standards, information not divided into specific fields, etc.). We had to develop additional scripts to handle many special cases in order to efficiently distribute the information within the Drupal platform.
• For the user interface of the activist space - The dashboard of the activist area required setting up a view with about ten advanced features, displayed as “mini-sites,” which initially created incompatibilities. The dashboard provides a file list view for activist files and allows the following features: 
  • Direct file downloads; 
  • Grouping files into downloadable folders; 
  • Accessing the folder list page to view related files; 
  • Advanced filtering and search system;
  • Grouping files by month; 
  • Scroll-based pagination, making the behavior more complex.

We overcame these difficulties by modifying Drupal module behaviors and developing new custom modules.

Conclusion

This redesign project has been very interesting both during the design phase, which pushed us to follow a rigorous design process in order to deliver a user experience and interface meeting both CGT’s and users’ requirements… and in development, driving us to push our limits to meet a complex functional need!

Collaboration with the CGT team continues with new projects... After establishing the general and national communication positioning of the Confederation, the next step is to keep the services running, isolate issues, and address actions. 

To learn more: https://www.cgt.fr.