Bordeaux.fr: a portal that informs Bordeaux residents as much as it serves them, with no compromise on accessibility and eco-design

A bespoke way of working

To meet the project’s tight schedule and keep up a sustained production pace without compromising final quality, we set up a bespoke working arrangement with the project team. The anchor of our collaboration is a weekly in-person day at our offices. These sessions play a crucial role in the project’s success: they enable direct exchanges, fast iterations and design workshops improvised as needed. The design process also adapts so that several phases can progress in parallel: art direction and wireframing move forward at the same time, speeding up interface production while keeping everything consistent. This approach makes it possible to gradually hand off validated screens to the UI design phase without waiting for the low-fidelity mockups to be fully finalised.

Balancing institutional communication with services for users

The project pursues two parallel goals: offering citizens a platform that makes access to services and practical information easier, and creating a local news media space. To meet that challenge, the project team creates “Le Mag”, a distinct editorial space that adopts the codes of modern media. This section showcases the city’s dynamism through different formats (features, profiles, podcasts, news) with a design inspired by social media, while staying consistent with the site’s overall identity.

Speaking to all citizens

The political context is an important factor to take into account. The future portal needs to convey the image of a human-scaled, inclusive, forward-looking city. It must speak to as many people as possible while taking into account the city’s different municipal departments, without favoring any of them. The project’s pace made setting up a formal citizen consultation too complex to organise, so we build on our deep knowledge of usage patterns gathered through our long-running work with Bordeaux Métropole, and rely on ad-hoc input through tests on strategic questions. That expertise, acquired during previous projects, turns out to be invaluable in shaping the design choices.

The project runs into a classic challenge for institutions: an information architecture initially organised around internal departments rather than user needs. The delicate work is therefore to drive a transition toward a result that finds consensus inside the institution while being perfectly understandable for citizens. To ensure the transition is effective, the project brings together all stakeholders (associations, elected officials, operational teams) to build this new architecture collectively, reconciling the views of the different directorates while making information easier to find for users.

The interface innovates by adopting a vertical menu in the desktop version, breaking away from traditional horizontal menus. That choice is a compromise between the project team’s modern vision (which initially favored an omnipresent burger menu) and what the user tests told us. The tests showed that vertical navigation works well, provided that labels remain clearly visible. Top-level entries stay immediately identifiable, while access to administrative procedures gets a direct entry in the main menu.

The project’s complexity leads us to develop a thorough modular approach. We create a system of reusable components that meet the different needs identified: highlighting quotes, anchor-based navigation, internal linking between content, or surfacing blocks designed to offer services to users.

This approach makes it possible not only to harmonise the user experience, but also to make life easier for the development and content teams.

The back office, for its part, plays a key role in running the site. While the redesign project doesn’t directly cover its interface, we improved how it works by supporting the project team on essential technical choices, designing a tool that combines technical effectiveness with day-to-day flexibility.

By defining a base set of graphic elements and rules that make it possible to build a whole visual world.

Typography and iconography

To meet the eco-design goals, the system font Arial is selected. The main challenge is to make this rather plain font fit into an interface that wants to feel modern and engaging. The icons go for a simple, modern style with rounded lines that bring a welcoming feel.

Colors and creative directions

Any color works inside a visual identity: you just need to get the proportions right.

Looking ahead, the city wants a visual identity that speaks to every citizen. After several tries with bright, energetic colors (and plenty of debate!), we settle on an electric blue. This modern shade bridges tradition and the renewal the city is aiming for. A dynamic color that fits digital interfaces perfectly.

This primary color draws attention and highlights the key elements of the interface. Its strong contrast improves readability and allows white text to be used, staying accessible even for people who need high visual contrast.

The site’s visual identity keeps evolving throughout the design phase, ending up as a set of templates in the colors of the new portal that offer both effective and original graphic solutions.

A portal turned toward the future

In the end, this redesign marks a key step for the City of Bordeaux: in the digitisation of its municipal services, in what it offers citizens, and in the showcasing of a dedicated digital media space. A great opportunity to deliver a site that can keep evolving to meet today’s and tomorrow’s needs.