{"id":5895,"date":"2022-05-02T09:45:41","date_gmt":"2022-05-02T07:45:41","guid":{"rendered":"https:\/\/www.luklagroup.com\/uncategorized\/departement-de-loire-atlantique-website-redesign-with-a-focus-on-accessibility-design-system-and-agility\/"},"modified":"2025-02-06T17:11:04","modified_gmt":"2025-02-06T16:11:04","slug":"departement-de-loire-atlantique-website-redesign-with-a-focus-on-accessibility-design-system-and-agility","status":"publish","type":"post","link":"https:\/\/www.luklagroup.com\/en\/digital-workplace-en\/departement-de-loire-atlantique-website-redesign-with-a-focus-on-accessibility-design-system-and-agility\/","title":{"rendered":"D\u00e9partement de Loire-Atlantique, website redesign with a focus on accessibility, Design System and agility"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong><em><a href=\"https:\/\/digiwin.fr\/actualites\/departement-loire-atlantique-presentation-globale-du-projet-de-refonte-des-sites-internet\/\" target=\"_blank\" rel=\"noreferrer noopener\">In the previous article<\/a>, we explained the overall project to redesign the Loire-Atlantique department&#8217;s websites.<\/em><\/strong><\/p>\n\n<p class=\"wp-block-paragraph\"><strong><em>Read the rest of the article to gain a better understanding of the strategic directions taken during the project. We&#8217;ll look at both the major accessibility and Design System issues involved in this overhaul. <\/em><\/strong><\/p>\n\n<h2 class=\"wp-block-heading\">Large-scale project: defining your strategic focus<\/h2>\n\n<h3 class=\"wp-block-heading\">Initiate the project at the main site, then roll it out to other sites<\/h3>\n\n<p class=\"wp-block-paragraph\"><strong>Given the very broad technical and functional scope of the<\/strong> project, the priority target was naturally the <a href=\"https:\/\/www.loire-atlantique.fr\/44\/navigation-des-espaces\/c_5025\" target=\"_blank\" rel=\"noreferrer noopener\">Department&#8217;s main website<\/a>. This site is the best known and most used by users. <br\/><br\/>The following sites have been redesigned to date:  <\/p>\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/archives.loire-atlantique.fr\/44\/archives-numerisees\/c_23000\" target=\"_blank\" rel=\"noopener\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/11\/CD44-Archive.png\" alt=\"\" class=\"wp-image-3691\"\/><\/a><figcaption><em>Archives website<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/handicap.loire-atlantique.fr\/44\/accueil\/j_6\" target=\"_blank\" rel=\"noopener\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de&#x301;cran-2021-12-10-a&#x300;-11.18.50.png\" alt=\"\" class=\"wp-image-3785\"\/><\/a><figcaption><em>Disability website<\/em><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.chateau-chateaubriant.fr\/44\/accueil-chateau-de-chateaubriant\/j_6\" target=\"_blank\" rel=\"noopener\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/11\/CD44-Chateaubriant.png\" alt=\"\" class=\"wp-image-3693\"\/><\/a><figcaption><em>Ch\u00e2teaubriant castles heritage site<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.chateau-clisson.fr\/\" target=\"_blank\" rel=\"noopener\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de&#x301;cran-2021-12-10-a&#x300;-10.57.28.png\" alt=\"\" class=\"wp-image-3778\"\/><\/a><figcaption><em>Clisson castles heritage site<\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.domaine-garenne-lemot.fr\/44\/accueil-garenne-lemot\/j_6\" target=\"_blank\" rel=\"noopener\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de&#x301;cran-2021-12-10-a&#x300;-11.21.06.png\" alt=\"\" class=\"wp-image-3786\"\/><\/a><figcaption><em>Domaine de Garenne Lemot website<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.jardins-folies-siffait.fr\/\" target=\"_blank\" rel=\"noopener\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de&#x301;cran-2021-12-10-a&#x300;-11.10.11.png\" alt=\"\" class=\"wp-image-3779\"\/><\/a><figcaption><em>Jardins des Folies Siffait website<\/em><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.abbaye-blanche-couronne.fr\/\" target=\"_blank\" rel=\"noopener\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de&#x301;cran-2021-12-10-a&#x300;-11.11.31.png\" alt=\"\" class=\"wp-image-3780\"\/><\/a><figcaption><em>Blanche Couronne Abbey website<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.eglise-saint-sulpice-des-landes.fr\/\" target=\"_blank\" rel=\"noopener\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de&#x301;cran-2021-12-10-a&#x300;-11.14.45.png\" alt=\"\" class=\"wp-image-3781\"\/><\/a><figcaption><em>Website of the Eglise du Vieux Bourg in Saint-Sulpice-des-Landes<\/em><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/observatoire.loire-atlantique.fr\/\" target=\"_blank\" rel=\"noopener\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de&#x301;cran-2021-12-10-a&#x300;-11.16.14.png\" alt=\"\" class=\"wp-image-3782\"\/><\/a><figcaption><em>Loire-Atlantique Observatory website<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n<h3 class=\"wp-block-heading\">Strengthen our support for customer teams<\/h3>\n\n<p class=\"wp-block-paragraph\">To adapt and ensure the success of the project deployment, the Digiwin team strengthened its support methodology to be closer to the customer. The pillars of the famous agile method helped shape the project&#8217;s new direction: <\/p>\n\n<p class=\"wp-block-paragraph\">Agility in a project of this kind involves a number of different aspects. The new approach involves <strong>cascading the site redesign through the various<\/strong> internal and external <strong>project stakeholders, working hand in hand<\/strong>. In practice, the system implemented is as follows:  <\/p>\n\n<ul class=\"wp-block-list\"><li><strong>Bringing Digiwin&#8217;s human resources into the Department&#8217;s premises<\/strong> for greater interaction between the various players and to bring more interaction and collaboration into the project,<\/li><li><strong>Redesign the sites one by one<\/strong>, starting with the drafting of technical specifications for each site by the Department,<\/li><li><strong>Redesign a site step by step with different sprints<\/strong> and readjust as you go along, using an iteration logic,<\/li><li><strong>Carry out each sprint<\/strong> through phases of design, development and validation, passing <strong>through<\/strong> <strong>various multi-skilled players to ensure that<\/strong> each stage <strong>is successfully completed<\/strong>,<\/li><li><strong>Take advantage of the redesign of the following sites to adjust the Design System<\/strong> and the various issues involved in the project.<\/li><\/ul>\n\n<p class=\"wp-block-paragraph\">Project completion becomes <strong>smoother, with less downtime<\/strong>, and more interactive and collaborative. What&#8217;s more, this way of working reinforces the human aspect of the project, bringing teams closer together. <\/p>\n\n<h3 class=\"wp-block-heading\">Building a Design System to meet accessibility requirements<\/h3>\n\n<p class=\"wp-block-paragraph\">To <strong>adapt the templates, optimize content structuring and facilitate the contribution of each site<\/strong>, Digiwin planned to work on both the Jalios architecture and the Design System. In addition, the D\u00e9partement de Loire-Atlantique has chosen to make the site <a href=\"https:\/\/design.loire-atlantique.fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">publicly accessible<\/a>. <\/p>\n\n<h4 class=\"wp-block-heading\">Focus on the Design System<\/h4>\n\n<p class=\"wp-block-paragraph\"><strong>Definition<\/strong>: The Design System is a library of components, visuals and principles in reusable code. It becomes the UX\/UI reference kit. <br\/><br\/>Not forgetting that, as part of the project, this Design System must meet other requirements such as Mobile First design and accessibility (in its development and final visual rendering).<\/p>\n\n<p class=\"wp-block-paragraph\"><strong>The advantage?<\/strong>  Contributors create their own content without worrying about page layout: they choose only the page template. Each time the Design System is updated, all templates are automatically updated. <\/p>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/11\/Capture-de&#x301;cran-2021-11-18-a&#x300;-17.53.44-e1637315102496.png\" alt=\"\" class=\"wp-image-3696\"\/><figcaption><em>Overview of the Loire-Atlantique Department Design System made public<\/em><\/figcaption><\/figure><\/div>\n\n<p class=\"wp-block-paragraph\"><strong>What are the steps involved in creating the Design System for this project?<\/strong><\/p>\n\n<ul class=\"wp-block-list\"><li>Design wireframes to structure the sample pages and a UI Kit for the web design of the various components,<\/li><li>Create graphic guidelines to define the final graphic charter. Here, these ideas were tested and validated by a panel of people with disabilities (particularly visual impairments), <\/li><li>Continuous development, cutting and testing of components by multi-disciplinary teams.<\/li><\/ul>\n\n<h4 class=\"wp-block-heading\">Focus on accessibility<\/h4>\n\n<p class=\"wp-block-paragraph\"><strong>Definition<\/strong>: Web accessibility refers to the set of techniques and best practices aimed at making a site or application accessible to all &#8211; and in particular to &#8220;disabled&#8221; people in the broadest sense of the term.<br\/><br\/>See our <a href=\"https:\/\/digiwin.fr\/diginews\/rgaa-4-mise-en-oeuvre-dun-audit-daccessibilite\/\" target=\"_blank\" rel=\"noreferrer noopener\">article dedicated to accessibility and RGAA4 requirements<\/a> to find out more.<br\/><br\/><strong>The choices made by the D\u00e9partement de Loire-Atlantique to maximize accessibility:<\/strong><\/p>\n\n<ul class=\"wp-block-list\"><li>Test the models with a panel of people with disabilities (particularly visual impairments),<\/li><li>AAA style sheet design,<\/li><li>Select the most structured framework available,<\/li><li>Audit the various parts of the Design System several times during the design and development process,<\/li><li>Publish the <a href=\"https:\/\/design.loire-atlantique.fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design System<\/a> and <a href=\"https:\/\/github.com\/departement-loire-atlantique\/\" target=\"_blank\" rel=\"noreferrer noopener\">open source code<\/a> online to inspire and help other communities with accessibility,<\/li><li>Train contributors in accessibility, so that they can write in a way that is more comprehensible to all.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In the previous article, we explained the overall project to redesign the Loire-Atlantique department&#8217;s websites. Read the rest of the article to gain a better understanding of the strategic directions taken during the project. We&#8217;ll look at both the major accessibility and Design System issues involved in this overhaul. Large-scale project: defining your strategic focus [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5456,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[105,103,115],"tags":[118,146,147,133,148,149],"class_list":["post-5895","post","type-post","status-publish","format-standard","has-post-thumbnail","category-change-adopt-en","category-digital-workplace-en","category-web-marketing-en","tag-accessibility","tag-design-system-en","tag-mobile-first-en","tag-public-en","tag-redesign","tag-site-en"],"_links":{"self":[{"href":"https:\/\/www.luklagroup.com\/en\/wp-json\/wp\/v2\/posts\/5895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.luklagroup.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.luklagroup.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/en\/wp-json\/wp\/v2\/comments?post=5895"}],"version-history":[{"count":2,"href":"https:\/\/www.luklagroup.com\/en\/wp-json\/wp\/v2\/posts\/5895\/revisions"}],"predecessor-version":[{"id":5899,"href":"https:\/\/www.luklagroup.com\/en\/wp-json\/wp\/v2\/posts\/5895\/revisions\/5899"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/en\/wp-json\/wp\/v2\/media\/5456"}],"wp:attachment":[{"href":"https:\/\/www.luklagroup.com\/en\/wp-json\/wp\/v2\/media?parent=5895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.luklagroup.com\/en\/wp-json\/wp\/v2\/categories?post=5895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.luklagroup.com\/en\/wp-json\/wp\/v2\/tags?post=5895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}