Context of the collaboration
Created in 1980 at the initiative of the County Council and as part of the Law on Architecture of January 3, 1977, the CAUE of Bouches du Rhône (Council for Architecture, Urban Planning and the Environment of Bouches du Rhône) is a non-profit association (law of 1901) entrusted with a public service mission to promote the quality of architecture, urban planning, and the environment.
It supports elected officials, local authorities, institutions, and individuals in their development and urban planning projects. Throughout the Bouches-du-Rhône territory, it provides technical, educational, and cultural services while carrying out its missions assigned by law: advising, training, informing, and raising awareness among all actors and citizens within a region about the quality of their living environment.
Since the end of 2015, CAUE 13 has been collaborating with the bluedrop.fr agency. After developing and managing its previous site, powered by Drupal 7, the CAUE 13 team decided to redesign their site. The challenge: what to do? Keep all or part of the content? Simplify the previous site’s features? Enrich it? Focus on which target audience?
Therefore, we organized a preliminary analysis phase focused on users, involving a larger team of CAUE 13 collaborators.
A UX design phase before drafting the specifications
Two teams face to face: a dream scenario for a broader project team, collective ambitions, and objectives to compare. The project to overhaul the CAUE 13 site began in an euphoric “cacophony.” We therefore advised both project teams to organize workshops aimed at comparing objectives and user journeys to ensure the project’s direction was successful. Two workshop days were organized:
- A first day to summarize the association’s purpose, define its users, and analyze the old site’s traffic statistics;
- A second day of work around user journeys and a design studio workshop for the future site’s homepage.
The results were then validated by the CAUE 13 management team.
Phase 1 - Summary of the site’s objectives
The conversations and analysis of the old site’s statistics helped identify the objectives for the redesign:
- Promote architecture and advice to private individuals and elected officials;
- Raise public awareness of the Association’s purpose;
- Provide training aimed at elected officials.
The site should thus present itself as a local public tool. CAUE 13 does not offer a technical service, but provides cultural and intellectual value (notably through local support sessions in municipalities). It is therefore necessary to review the range of resources provided.
Phase 2 - Persona definition workshop
The entire project team then built proto-personas (user archetypes and corresponding user journeys). The proto-personas helped define target users and
categorize them by priority. Four main target groups were identified:
- Elected officials / technicians;
- Private individuals with projects;
- Teachers;
- Advising architects and service providers.
Phase 3 - Design studio workshops
These workshops, held on the second working day, focused on:
- Sorting the site’s content
This workshop aimed to analyze the old site’s content to keep or delete. - Developing the future site’s menu
This workshop helped create a tree structure (menu) for the future site by building an architecture consistent with the user journeys and the main personas. - Zoning and wireframing the homepage
This workshop aimed to design the future site’s homepage together. The best ideas from the design studio voting phase were used to imagine and create this template.
Prototyping and interface design
Following validation of the UX workshop results, deployment of the wireframes was not only made easier, but also enabled a quicker and simpler specification of the site’s functional scope.
These initial workshops also validated the generalized consultation methodology needed to design and validate the UI mockups, as part of the so-called “atomic design” method. The teams continued to listen to each other, making the production of mockups easier.
Finally, the CAUE 13 team decided to include the work of an illustrator during the UI design phase. So, with pleasure and in the interest of quality and originality for the project, we incorporated the work of Thibault Rassat.
Development with Drupal 8
The site was built with Drupal 8 and a theme based on Foundation. The idea throughout development was to anticipate content changes initiated by the site’s contributors. Nearly 22 paragraphs were incorporated and made available to contributors (via the paragraphs module). Only four custom modules were developed to address specific block needs and to make it easier to import agenda content. The search functionality relies on the SolR module, allowing fast and optimized searches. The development team also worked to improve the site’s performance throughout all development cycles.
Preparing for Drupal 9
With a view toward upgrading to Drupal 9, the project team regularly tested for obsolete dependencies. The site is nearly ready for the upgrade to Drupal 9.
The site: https://www.caue13.fr
Go-live: June 2020.
Mockups: See the mockups on Figma
Illustrator: Thibault Rassat
On the blog: Go-live of the caue13.fr website – 05/24/2016
Case study: Redesign of the CAUE 13 website.
