Skip to main content

Ville de Salaberry-de-Valleyfield

Municipal
2019-2020
Visit website

In 2019, the City of Salaberry-de-Valleyfield embarked on a website redesign project, which serves as the primary means of communication with its 45,000 citizens.

Our main goal for this project was to create an enhanced navigation system, providing users with a seamless and intuitive experience when searching for information. We worked to reduce friction and obstacles encountered by citizens, ensuring they could quickly and easily access the information they were seeking.

We also implemented a robust content management system, utilizing Craft CMS, to provide the city's communication team with a pleasant and user-friendly editing experience. This allows them to easily update website content, add new information, and maintain transparent communication with citizens.

Furthermore, great emphasis was placed on the aesthetics of the project, creating a visually appealing and modern interface. Our objective was to ensure that every visitor felt welcomed and engaged from the moment they arrived on the site, strengthening the relationship between the municipality and its citizens.

Expertises

  • User flows
  • Content strategy
  • Web design
  • Development

Technologies

  • Craft CMS
  • Twig / PHP
  • JavaScript
  • AWS

Features

  • Interactive Map
  • Search with Suggestions
  • Connection to a Remote Database
  • Address-based Search
Troisieme valleyfield desktop home
Troisieme valleyfield mobile homepage

Wireframes and content

We began by creating a comprehensive list of all the content present on the existing site. We then validated with the city what content was still relevant. We grouped this content into different sections. Projected content collections were identified, as well as pages with unique templates and those with modular content. We also organized work sessions with the client to collaborate on this stage.

To facilitate note-taking, we also printed out the complete project hierarchy on a large scale. This working method allowed all participants to quickly take notes.

Next, we designed wireframes for the entire project. During exchanges and presentations with the client, certain sections were modified and improved.

Troisieme valleyfield wf home
Troisieme valleyfield g sheet

Navigation and Search Engine

To address the main objective, we developed a four-panel navigation that provides citizens with a comprehensive overview of the entire website content. With this intuitive navigation, users can easily browse through different sections and quickly find the information they need.

In addition to the panel navigation, we implemented a user-friendly search field. This search functionality not only provides quick access to specific content but also offers suggestions and recommendations as users type, making the search experience even more efficient and convenient.

Troisieme valleyfield nav
Troisieme valleyfield mobile search
Troisieme valleyfield alertes

Content Pages

The project also includes nearly 500 pages and numerous content collections. With Craft CMS, the client can easily manage the content while enjoying controlled freedom.

These pages are well-structured, visually appealing, and adhere to high accessibility standards. We place great importance on ensuring that all users can navigate the site easily and access the presented information.

Troisieme valleyfield desktop tennis
Troisieme valleyfield mobile misc

We had the pleasure of working with troisième on our website redesign project, and we couldn't be more satisfied with the results achieved. From the initial planning phase to the final implementation, the entire team demonstrated their expertise and professionalism.

Their commitment to delivering a high-quality website was evident throughout the project. They took the time to understand our needs and goals, and their technological solutions have met all our expectations.

Anne-Marie Lefebvre
Director of Communications and Public Relations
Troisieme valleyfield ipad quartiers
Troisieme valleyfield desktop marche

Interactive Map

As part of the project, we created a custom map for the city. This interactive map displays various features such as neighborhoods, waste collection areas, parks, and provides an easy-to-use tool for citizens to find relevant information.

Some of the advanced features of this map include a unique URL that is generated with each click, the use of GeoJSON data format, and integration with data from the CMS. The map utilizes the Google Maps API, ensuring a smooth user experience.

Overall, this custom map offers an innovative and user-friendly way for citizens to access important information about their city.

Troisieme valleyfield map panel
Troisieme valleyfield map json
Troisieme valleyfield map misc

Connecting to Remote Database

We also implemented a feature that connects to the city's database. When a citizen performs a search by entering their address, they have access to their designated waste collection area and neighborhood information.

This address-based search functionality is a powerful tool that facilitates access to relevant information for each citizen. It enhances the user experience by providing personalized and location-specific data.

Troisieme valleyfield ipad collectes

Analysis

Next, we conducted visitor behavior analysis using the Mouseflow platform. In the initial days, we targeted approximately 200 visitors. This allowed us to observe that the search block was correctly displayed by over 90% of users. We also confirmed the user flow.

The outcome of the project is a modern and user-friendly website that effectively communicates the municipality's services and news to its citizens. The new site has received positive feedback from both the client and the public, and has experienced an increase in traffic and engagement.

Troisieme valleyfield mobile mouseflow

Let's collaborate!

troisième is a committed team ready to help you deploy your biggest digital projects. Let's work together to achieve your ideals.
Contact us