Implement the French Government Design System in Wagtail

Speaker 1: Hello, hello! We are just getting going for another Wagtail Space Talk. We have a bit of time before things start proper. Hope you're having a good time so far. This is a really interesting project from shared by Sylvain and Lucy, and I'm not saying that just because I'm French. Alright, I see the numbers are looking good and it's uh 2 30 pm UCC so we'll get going. Uh it's really my pleasure to introduce

Speaker 1: Sylvain Boissel and Lucie Laporte from the French government talking about how they're adopting Wagtail. and the French government's design system all together in their Cit Facile platform. Over to YouTube

Speaker 2: Hi, and uh thank you uh for uh everyone for being here today. I'm Sylvain, with me is Lucy. And um we are two of the uh developers of Citfacil in uh in which the presentation you see uh was made. Are you seeing it? Uh

Speaker 1: Yes, all clear.

Speaker 2: Okay. So SidFacile is a pre for pre-configured writer installation that is used to create. website for the French Central Administration using the French government system or DSFR DSF DSFR. It was uh created and operated by the uh French Interministerial Digital Directorate, Direction Interministérielle du Numérique or DINUM Uh which is tasked with developing and overseeing the implementation of French France digital strategy. Um site created with it are

Speaker 2: by design compliant with the requirement regarding security, accessibility and design. And um the goal of uh the whole project was to improve autonomy for the communication services of various administration because for um Many websites uh they still need to uh make requests to the IT services to update the content of the pages, uh which is not very efficient. Um so we are a team of six, so uh there is uh Lucien me, but there is also a third developer, Lucien. We have an agile coach, Shaib, a product manager who also

Speaker 2: is in charge of user support, Juliette, and a designer, Florent. Um uh leave uh

Speaker 3: so a quick timeline of uh the f the four past years. So how did Wagtail enter the sphere of digital tools by the French administration? In 2022, a big government website was built with Wagtail. The idea was to give communication teams more freedom so they could update their content directly In 2023, others public administrations faces the same issue and start to use this project based on Wagtail with the French design system and the Dinu, so uh the service who operated Wagtail um decided to use it for its own website too. The first developer was Ired to maintain and improve the project, it was Sylvain. And uh last year demands was growing fast, so a whole team was uh recruited to lead its development and deployment.

Speaker 3: And uh now in 2025 there is even a SaaS tool to make new seed deployments super easy. The focus today is really on accessibility, security and making the admin experience smoother for users. So Citfacile is a good engine for French public administration and they can create their own institutional websites. or the intranet extranet they also can create landing pages or blogs on articles. Even for sit fascinat isn't meant to build large or complex websites. It's sometimes used for a certain part of existing Django applications but I will talk about you this later. So today

Speaker 3: there are around 50 websites built with SitFacile. And the cost savings are estimated at over one million euros of public money. We estimate around uh five uh 500,000 visits across all CITFACIL websites, but not all of them have analytic tools installed, so this is just an estimation for us. And I will let Sylvain to uh present to you uh the French government design system.

Speaker 2: Um the main goal of Cit Facil was to allow to create the website for central administration which use the French government design system which was created uh in 2020. uh to uh unify French administration websites. Uh uh its focus is on accessibility and improvement of the user experience. It makes dev easier and more consistent across different services. It's a full-fledged design system with about 50 different components along with a grid official font two color scheme, an icon pack, pictogram, standard patch example, etc. etc. And

Speaker 2: um is in it's included in SidFacil through the Django DSFR library, which I have created uh in 2021 for another project and as which I manage I have managed since. But uh we had to re-implement a lot of things directly in CitvaCil So to integrate the the uh the system uh into white tail uh we had to create blocks uh stream blocks or street blocks depending inside the stream field for the grid system uh and basically every everything inside it. uh which leads to some challenges because

Speaker 2: some uh of the components have many parameters some are nested inside others in fact um you often end up with quite uh uh high level of uh nesting uh which provide challenges UI wise that we are still working on Of course, it must work in light and dark mode. It must be easy for to use for editor and has to comply with basically all the rules of the design system uh first. Um here we have an example of a block which is the grid system itself. So as you can see

Speaker 2: , there is uh quite a standard work taste uh straight block with uh three parameters. uh and then uh value class uh a strict value sorry to uh create a string of uh classes from the Zane system uh depending on the choices made. Um we'll see we we'll see an uh a live example of it Here is a grid with five blocks. Uh and I'll add another one.

Speaker 2: Uh I'm in preview. Okay. So scrolling here and it's as you can see there are quite a lot of uh blocks in the in the minimap Uh and uh it is there. So I'll add another block here a card. As you can see we have some basic blocks, some components that are specific to the design

Speaker 2: system, and then uh we have more structural blocks and even uh markdown in HTML blocks uh that allow uh high level of customization where needed. So here is the cart. I'll add a picture of Marseille. As you can see, the card is one of our most complex components and has lots and lots of parameters. An icon. We have uh included uh the DIN system as uh an icon pack and we have included uh

Speaker 2: an icon picker uh to use it, which I uh intend at some point to release as a start as a separate uh uh plugin but i have haven't time haven't had the time to do that yet I'll do I'll do it ins inside a batch will be more uh as you can see I can add yet another level of uh Of complexity, uh of uh

Speaker 2: nesting, sorry So yeah, I can on the grid itself Um decide to put it in a three column inside of two and then I can uh publish

Speaker 2: And now there's a new card with uh what we put in it and now the grid is on three columns instead of two. There are more than just refill a component though. We have a page dedicated to the website configuration which allows to uh do site wide configs like changing the site title, the site subtitle, add the logo, add um maybe a beta tag. uh put the fla uh the um uh brand in black in case there is a national um

Speaker 3: Morning.

Speaker 2: Sorrow, yeah. Um like once the president dies or something. Um So the I just showed you the icod picker and we also have um uh integration of ProConnect, which is a centralized hood system for public servants.

Speaker 3: So uh strength and challenges uh in Sidfacile. Uh as you can see it makes it easy to create websites uh that meet uh government standards It offers great performance, around uh 98% on Lighthouse, better accessibility scores than most French government websites. and the high level of security validated by ANSI, which is the French national cybersecurity agency. It's also very flexible. It can handle both simple pages or very complex website structures, as you may see just before. And one of its biggest uh strength uh is that it gives communications teams and public agents a real autonomy.

Speaker 3: But the main challenge now is to keep it uh simple while uh meeting the very different needs of its user uh because uh cite facile in French means easy website so uh we want to keep it easy The platform is used by people with different very different levels of digital skills and different expectations. For example, some editors just want a basic ready-to-use site. They care about being fast and efficient. And others work with designers to create very custom French government design system layouts. and then they struggle uh to integrate them easily into the tool. So the big question is how do we keep sit facil easy to use

Speaker 3: while still allowing advanced users to go further when they need to We also see a lot of different use cases between projects. Some teams use it facile to power entire websites, while others just want to add a few features like a sample blog or just an event listing. to an existing Django app, but at the moment the system doesn't allow you to just pick and use specific parts of it, but it's uh it's our uh our map And finally, since it's closely tied to the French government design system, it's still a bit hard to adapt to other design systems. But we are working on um many things actually Right now, our main focus is on simplifying the page editor

Speaker 3: interface, especially auditor choose and organise components on a page Um I've uh I I think you can see that it's a bit uh difficult sometimes. And uh one of the big challenges we had what's that users uh to visualize their page while building them uh because there is a preview and previews of individual blocks but we wanted to go further So we decided to introduce the concept of pre-built sections. So it's ready-made blocks that come with default values. This way editors can see the overall structure of their page. right away and then just to customize the content instead of starting from scratch. And actually we like to take this ID even further by offering fully pre-built page templates

Speaker 3: For now, we are still exploring the best best approach whether this should be a stream fill automatically pre-filled when a page is created or specific page models with predefined layouts. But in the long term, our goal is for editors to be able to create their own page templates, save them and reuse them whenever they want. But would really help the build consistent pages much faster while keeping the flexibility they need. So we started this work on pre-build section on the page headers, which used to be managed through separate page fields that had to be combined to create a nice header And we migrated all that into a stream field which now handles headers as a component. Lady Sylvain, you can just show.

Speaker 3: Thank you. Donc as a coupon, we have a multiple layout option. It's a big migration, but it makes editing much more flexible and consistent. And as you can see, you just add one hero and the various the text content already pre-filled, the button already prefilled and the image already pre-filled. So next we plan to extend this approach to other parts of the page, for example sections that combine several French gouvernement design system components. already pre-filled with default values so editors can use them right away following the same ID. The idea is to make the tool feel more intuitive and supportive from the very beginning We'd also love to contribute more to the Wagtail community.

Speaker 3: First, internationalization. Many of our users work in French and some translation in Wagtail or in third-party plugins. or even missing or confusing and we'd like to help improve that um both by contributing translation and by working on how Wagtail handles multilingual uh interfaces overall And second, we are very interested in improving the link chooser experience. Right now in our implementation, user has to pick from a drop-down menu to choose the type of link. For example, an internal page, an external URL or document. That drop-down then hides or shows the corresponding fields. It works but it's not the most intuitive approach and we'd like to contribute to a new

Speaker 3: unified uh link chooser similar to the other choosers in Wagtail. This is the link chooser, so just a little drop-down and it's um hide or uh or show the the right uh field. Uh it's uh also the uh one of the most uh common requests from all editors. So I just let Sylvain to let you know about uh the future of Cit Facile.

Speaker 2: So um Uh having said uh all of that, um right now the future of CitaCil is uncertain. Uh Because uh as of last week the Dinium has had a change of strategy regarding Cit Facile. They no one to participate in the digital command that is White Tail, rather than build a separate project and um For now, how it will uh happen is not entirely clear. We'll probably turn what Tacil is right now into a library, maybe Wacked LDSFR, something like that uh or a collection of smaller libraries

Speaker 2: and um change it to allow the use of other design systems for other uh levels of the French administration like local authorities, like municipalities or departments cannot use uh the DSFR right now. Uh universities cannot either And um we'll encourage the creation of a community of users inside of French administration. So the administrations that have seeds m made with seat facil or with Wagtail in general, we want to regroup them, make them talk, create a community in short. And uh we want to create a network of experts that can implement uh this new Wagtail DSFR plugin

Speaker 2: and that have um Uh-huh the proper registration to work as a um uh stata um sorry uh constructor uh for uh for the French administrations. Um I've included the a link to this talk uh so you can see that it is indeed a rectale page. Um if you want to uh to see it uh later. And uh if you have any question, uh don't hesitate. I will uh Scroll up.

Speaker 2: Um, also

Speaker 1: Sylvain, I have a list of questions if you want, I can ask them directly.

Speaker 2: Yeah, that would be great.

Speaker 1: Great. Well thank thank you both. I'll get going. Bertrand asks Which tech is used to orchestrate all those instances of Wagtail?

Speaker 2: We deploy on Scalingo and use the Scalingo API. Uh Scalingo is a French equivalent of uh HeroCoo.

Speaker 1: Great, thank you. And uh next we have Christophe asking um how much hours Did it take to bring Wagtail to this level? I think he was asking when you were showing the really cool icon speaker and your customizations

Speaker 2: Um the icon picker I made before it's a component I made for Django DSFR. So I can use in any Django project for the French government. But uh I don't know. I've worked uh since uh October of twenty twenty three, so two years now, and uh I was joined by uh Lucy and um And uh and Lucien um a few months ago now

Speaker 3: six months ago for

Speaker 2: me So lots of uh hours.

Speaker 1: Okay. Uh folks, I'm going through the questions in order and I think we'll have time for a few more, so I'll keep going, but definitely keep asking them in the Q<unk>A or the chat. Next, Sébastien asks how you distribute the design system if it's through a package repository like PyPI.

Speaker 2: Yeah, it is. It's a package that is on uh PyPy. Pipe as well. PyPL, sorry. Uh Django DSF. Um I think I showed it. Django.

Speaker 3: I will uh put the link in the chat

Speaker 1: And uh we have a lot more questions about the icon picker that I think you might have already answered, but if there's so much love maybe you want to say more Uh Sebastian says, is it based on an existing conscious package?

Speaker 2: Yes in uh um somewhere in the dock, but uh Uh I'll die to change the c the source code to uh uh retrieve the the name of the package. Sorry, um I'll stop the share into the session

Speaker 1: Great. I'm going through my list still. More love from Scott on the icon speaker being an installable package. Barney asks Are Wagtail upgrades still relatively straightforward given the number of sites dependent on SeedFacile?

Speaker 2: Um that's one of our biggest challenges because uh we we know that there are about fifty sites. We don't manage all of them. Uh So we uh cannot test properly before deploying for uh all of them. So sometimes it it can be tricky. Uh and plus we uh Um there are websites that are at different levels of updates. So we have to keep uh retrocompatibility whereas when we have when you have one website and You can uh you can break the Django migration if uh if needed uh when you make big changes.

Speaker 3: Yeah, I think right now the community is um small, so we know the developer who which uh work on uh certain websites which has uh a lot of customization or uh headless website for example but it's if it's grow I think it will be a little more complex to just uh update and uh give support to to them.

Speaker 1: That makes sense. I see there's a very similar uh question in the chat, making customizations upgrade friendly. Do you want to say anything more about that?

Speaker 3: It's uh it's a great question because it was uh a lot of um discussion during the t uh in the team, so We don't have any trouble now, but maybe in the future I don't know. We have tests and we want to add more tests but we didn't make it now.

Speaker 1: Makes sense. And you work with the core team. It's a good way to future proof things. Jeremiah asks if uh all the sites are on the same Wachtel instance.

Speaker 3: No, no no. It's uh fifty uh fifty sites, uh fifty uh instance. But uh it's uh it's also um discussion because uh the deno wants to to not creating uh uh all this instance of maybe um multi-tenant in each minister uh was was uh preferable I don't know.

Speaker 1: Makes sense? Um it's great to see so many questions. I think we have time for one more question, but I'll pick a comment that I think could be interesting for you to react to. Uh if James reflects on similar work he does with another government organization using Wagtail and he says if we let them pick icons we'd end up with some crazy inconsistencies across the sites. I just thought it would be great for you to say what you think of that.

Speaker 2: Um that's true. Uh but uh We uh I'd like to have so uh a more directly website, uh but we need to be uh to leave the website creator to have the full uh possibilities offered by the DSFR. They have to choose icons in the icon list which is quite small. And um we have put some limits also like if you have a list of buttons with icons, either all live icons are none, but you cannot uh have uh uh inconsistencies uh inside the same list of buttons for example.

Speaker 3: And we have sites that are more beautiful than others.

Speaker 1: Oh, I love that you say that. We don't think of our children this way do we? But sometimes we have to admit it. Well, I think that's time for questions. Uh outstanding work. It's really cool to see people taking wactail to a problem like this. And I'm really happy we get to work on those things together to some degree And uh I hope everyone enjoyed this and uh I hope we see more of your work online after the conference and for everyone else um I'll end the webinar. We'll go back to the lobby and you'll have two talks for truth from starting in three minutes. You get a bit of a break. Thank you again, Lucy and Sylvain. It was excellent.

Speaker 3: Thank you Thibaut. Thank you all. The

Speaker 2: caravan