An exhaustive diagnosis of the existing site
Awareness through experience
Following the complete redesign of the Metropole’s website with a new visual identity a little over a year earlier, the site had been put to the test. Several pieces of feedback, internally but also from users, raised a variety of issues (consistency, accessibility, eco-design…). Despite a wish to eco-design the site, it scores F on EcoIndex. This is due in particular to page weight and too many requests. Moreover, even though the site’s accessibility is partial, several additional RGAA criteria can be applied.
The aim of our collaboration lies, first of all, in an exhaustive audit of the site in order to quantify the types of issues (accessibility, usability, eco-design, consistency…). This audit then serves as the foundation for the rest of the work: prioritising changes, mocking up quick wins… Bordeaux Métropole needs an overview in the form of an exhaustive diagnosis to be able to make informed choices about the direction to take on the site’s adjustments. It needs to optimise the changes with high added value for users while keeping development time under control.
Effort to be redistributed wisely
Categorised, recommended and estimated
Our exhaustive audit covers all the page templates of the site (home page, article page, hub page, menu,…). It looks at navigation as much as at individual components. Each element that can be improved is categorised according to the criterion or criteria it does not meet (e.g. guidance, legibility, consistency, accessibility, eco-design…).
In addition, we give our assessment of the criticality of our recommendation. A “minor” criticality has only a small overall impact on the site’s usability, while a “critical” criticality is considered blocking.
In addition to our ergonomic assessments, we also add a note on implementation complexity. This assessment is for guidance only and should be challenged with the developers. The benefit for Bordeaux Métropole is being able to identify quick wins rapidly. A “critical” criticality with a “simple” implementation complexity is worth addressing as soon as possible.
In total, during this audit, 65 different recommendations were written, including 54 “critical” or “major” findings. Most of the points raised concern consistency and user guidance.
Without being able to take responsibility for guaranteeing a specific EcoIndex score, since the calculation relies more on the source code, we took advantage of this audit to push eco-design good practices. These recommendations aim to reduce page weight and the number of requests without degrading the user experience.
Our recommendations come to life
Bordeaux Métropole is clear-sighted about its weaknesses
Bordeaux Métropole was already aware of the pages most in need of improvement. As a result, prioritising the screens on which to apply our recommendations was quick. We could not touch the site’s site map: that work requires more time, both from an experience and a development point of view. However, we chose to propose a new display of the navigation in the desktop version to make it easier to navigate the site.
The hub pages were a priority for Bordeaux Métropole. The project team was aware of the insufficient ergonomics of these pivotal pages, which are nonetheless essential in a site map going down to 7 levels of depth.
An article page template was also redesigned, because it is a type of page in which many components coexist and where consistency is therefore all the more important.
Eco-design and accessibility at the heart of the work
The information architecture was reviewed on all pages, with more or less substantial adjustments depending on the components, to correct the shortcomings mentioned in our audit. From an eco-design point of view, we proposed, for example, as an alternative to the interactive map loaded automatically on place pages, an interactive map that only loads when the user clicks. This simple recommendation produces an eco-designed component but also improves the site’s usability. Indeed, scrolling on the page was interrupted (or even completely stopped on mobile) as soon as the cursor was over the map area.
One of the high-added-value proposals we mocked up is the new menu. The idea is to have a Mega Menu type menu that opens as a full-screen modal. As well as keeping a consistent display with the other menu items (e.g. quick access, search…), this layout lets users move more quickly between the different level 2 and 3 entries, rather than having to keep clicking a back button to reach the previous levels. In connection with this new menu, the hub pages were rethought to allow going down two levels of depth in one click thanks to a grouped presentation. Users can choose to access a whole category (Nx) or a category belonging to category Nx (therefore Nx-1).
Ensuring consistency and the hand-off to development with a Design kit
Bordeaux Métropole has had its own Design System since its redesign. To make it easier for the project team to update it, we provided a design kit with all the redesigned components from the mockups.
This design kit is less detailed than a design system, but it has the advantage of presenting the various components and their states, along with a few usage recommendations. It is also a good tool to give developers while waiting for the updated components to be integrated into the Design System.
Offering an experience that reflects the Metropole
Impact and outlook
Following the delivery of our audit and of the mockups putting the audit’s recommendations into practice, Bordeaux Métropole has everything it needs to make informed choices about which work to prioritise with its development provider.
This first collaboration with Bordeaux Métropole’s communication department demonstrated the importance of a good UX approach during a visual redesign to guarantee the quality of a website.
We were able to evangelise on eco-design, accessibility and web quality thanks to a Bordeaux Métropole team that was open to these topics and trusted our expert stance.
Finally, this awareness following the redesign of their site shows Bordeaux Métropole’s will to offer a quality experience to its citizens.
This strong involvement in the digitalisation of metropolitan services is deliberate. The Metropole’s values must come through on its site. The effort put into the quality of the experience, but also into accessibility and eco-design, reflects a metropolis in step with its time.
This project is a great opportunity to prove that a site is alive and that it must constantly adapt to current and future challenges.
