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
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.
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.
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.
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.
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.
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.