{"id":677,"date":"2024-05-14T19:57:36","date_gmt":"2024-05-14T17:57:36","guid":{"rendered":"https:\/\/charlotte-kubis.fr\/?post_type=project&#038;p=677"},"modified":"2025-03-24T17:02:38","modified_gmt":"2025-03-24T16:02:38","slug":"conseil-departemental-deure-et-loir","status":"publish","type":"project","link":"https:\/\/charlotte-kubis.fr\/index.php\/project\/conseil-departemental-deure-et-loir\/","title":{"rendered":"Conseil d\u00e9partemental d&rsquo;Eure-et-Loir"},"content":{"rendered":"\n[et_pb_section fb_built=\u00a0\u00bb1&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb background_color=\u00a0\u00bbgcid-e1a53616-ce4e-46ab-b4cc-ca9341bb5223&Prime; module_alignment=\u00a0\u00bbcenter\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb custom_margin_tablet=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb custom_margin_phone=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb custom_margin_last_edited=\u00a0\u00bbon|phone\u00a0\u00bb custom_padding=\u00a0\u00bb11.25rem|0px|3rem|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{%22gcid-e1a53616-ce4e-46ab-b4cc-ca9341bb5223%22:%91%22background_color%22%93}\u00a0\u00bb][et_pb_row _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb module_alignment=\u00a0\u00bbcenter\u00a0\u00bb custom_margin=\u00a0\u00bb0px|5rem|0px|5rem|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb header_font_size_tablet=\u00a0\u00bb56px\u00a0\u00bb header_font_size_phone=\u00a0\u00bb56px\u00a0\u00bb header_font_size_last_edited=\u00a0\u00bbon|phone\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<h1 class=\"p1\"><b>Conseil d\u00e9partemental d\u2019Eure-et-Loir<\/b><\/h1>[\/et_pb_text][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb header_2_font_size=\u00a0\u00bb56px\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|3.5rem|0px|false|false\u00a0\u00bb custom_margin_tablet=\u00a0\u00bb0px|0px|3.5rem|0px|false|false\u00a0\u00bb custom_margin_phone=\u00a0\u00bb||2.5rem||false|false\u00a0\u00bb custom_margin_last_edited=\u00a0\u00bbon|phone\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb header_font_size_tablet=\u00a0\u00bb56px\u00a0\u00bb header_font_size_phone=\u00a0\u00bb56px\u00a0\u00bb header_font_size_last_edited=\u00a0\u00bbon|phone\u00a0\u00bb header_2_font_size_tablet=\u00a0\u00bb40px\u00a0\u00bb header_2_font_size_phone=\u00a0\u00bb40px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<h2><strong>Eurelien<\/strong><\/h2>[\/et_pb_text][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb24px\u00a0\u00bb background_layout=\u00a0\u00bbdark\u00a0\u00bb width=\u00a0\u00bb56.8%\u00a0\u00bb width_tablet=\u00a0\u00bb100%\u00a0\u00bb width_phone=\u00a0\u00bb100%\u00a0\u00bb width_last_edited=\u00a0\u00bbon|tablet\u00a0\u00bb max_width=\u00a0\u00bb100%\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|1.5rem|0px|false|false\u00a0\u00bb custom_margin_tablet=\u00a0\u00bb\u00a0\u00bb custom_margin_phone=\u00a0\u00bb\u00a0\u00bb custom_margin_last_edited=\u00a0\u00bbon|phone\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb text_font_size_tablet=\u00a0\u00bb18px\u00a0\u00bb text_font_size_phone=\u00a0\u00bb18px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<p>Le D\u00e9partement d\u2019Eure-et-Loir souhaitait moderniser son site <strong data-start=\"313\" data-end=\"328\">Eurelien.fr<\/strong>, un portail d\u2019information destin\u00e9 aux habitants et aux acteurs locaux. L\u2019objectif \u00e9tait de proposer une exp\u00e9rience plus dynamique, accessible et engageante tout en conservant l\u2019identit\u00e9 visuelle forte du d\u00e9partement.<\/p>[\/et_pb_text][et_pb_button button_url=\u00a0\u00bbhttps:\/\/eurelien.fr\/\u00a0\u00bb url_new_window=\u00a0\u00bbon\u00a0\u00bb button_text=\u00a0\u00bbD\u00e9couvrir le site en action !\u00a0\u00bb _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_button][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00a0\u00bb1_4,1_4,1_4,1_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb module_alignment=\u00a0\u00bbcenter\u00a0\u00bb custom_margin=\u00a0\u00bb3.5rem|5rem|0px|5rem|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb1_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|24px|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb text_font_size_tablet=\u00a0\u00bb16px\u00a0\u00bb text_font_size_phone=\u00a0\u00bb16px\u00a0\u00bb header_4_font_size_tablet=\u00a0\u00bb24px\u00a0\u00bb header_4_font_size_phone=\u00a0\u00bb24px\u00a0\u00bb header_4_font_size_last_edited=\u00a0\u00bbon|phone\u00a0\u00bb locked=\u00a0\u00bboff\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<h4>R\u00f4le<\/h4>\n<p>Lead UI Designer<\/p>[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00a0\u00bb1_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|24px|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb text_font_size_tablet=\u00a0\u00bb16px\u00a0\u00bb text_font_size_phone=\u00a0\u00bb16px\u00a0\u00bb header_4_font_size_tablet=\u00a0\u00bb24px\u00a0\u00bb header_4_font_size_phone=\u00a0\u00bb24px\u00a0\u00bb header_4_font_size_last_edited=\u00a0\u00bbon|phone\u00a0\u00bb locked=\u00a0\u00bboff\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<h4>Temps<\/h4>\n<p>47 jours &#8211; 2022<\/p>[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00a0\u00bb1_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|24px|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb text_font_size_tablet=\u00a0\u00bb16px\u00a0\u00bb text_font_size_phone=\u00a0\u00bb16px\u00a0\u00bb text_font_size_last_edited=\u00a0\u00bbon|tablet\u00a0\u00bb header_4_font_size_tablet=\u00a0\u00bb24px\u00a0\u00bb header_4_font_size_phone=\u00a0\u00bb24px\u00a0\u00bb header_4_font_size_last_edited=\u00a0\u00bbon|phone\u00a0\u00bb locked=\u00a0\u00bboff\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<h4>Secteur<\/h4>\n<p><span>Administration publique<\/span><\/p>[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00a0\u00bb1_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_text content_tablet=\u00a0\u00bb<h4 class=%22tools%22>Outils<\/h4>\n<p><span class=%22chips%22>FigJam<\/span> <span class=%22chips%22>Figma<\/span> <span class=%22chips%22>Maze<\/span> <span class=%22chips%22>Illustrator<\/span><\/p>\u00a0\u00bb content_phone=\u00a0\u00bb<h4 class=%22tools%22>Outils<\/h4>\n<p><span class=%22chips%22>FigJam<\/span> <span class=%22chips%22>Figma<\/span> <span class=%22chips%22>Maze<\/span> <span class=%22chips%22>Illustrator<\/span><\/p>\u00a0\u00bb content_last_edited=\u00a0\u00bbon|desktop\u00a0\u00bb _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_font_size=\u00a0\u00bb14px\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb text_font_size_tablet=\u00a0\u00bb14px\u00a0\u00bb header_4_font_size_tablet=\u00a0\u00bb24px\u00a0\u00bb header_4_font_size_phone=\u00a0\u00bb24px\u00a0\u00bb header_4_font_size_last_edited=\u00a0\u00bbon|phone\u00a0\u00bb locked=\u00a0\u00bboff\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<h4 class=\"tools\">Outils<\/h4>\n<p><span class=\"chips\">Figma <\/span><span class=\"chips\">Illustrator<\/span><\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb module_alignment=\u00a0\u00bbcenter\u00a0\u00bb custom_margin=\u00a0\u00bb|5rem||5rem|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb3.5rem||4rem||false|false\u00a0\u00bb collapsed=\u00a0\u00bbon\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_divider _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb background_color=\u00a0\u00bb#FFFFFF\u00a0\u00bb max_height=\u00a0\u00bb4px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=\u00a0\u00bbLigne\u00a0\u00bb _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb module_alignment=\u00a0\u00bbcenter\u00a0\u00bb custom_margin=\u00a0\u00bb0px|5rem|0px|5rem|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_image src=\u00a0\u00bbhttps:\/\/charlotte-kubis.fr\/wp-content\/uploads\/2025\/03\/use_case_eurelien_O1.jpg\u00a0\u00bb alt=\u00a0\u00bbmicroscope\u00a0\u00bb title_text=\u00a0\u00bbuse_case_eurelien_O1&Prime; align=\u00a0\u00bbcenter\u00a0\u00bb force_fullwidth=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb module_alignment=\u00a0\u00bbcenter\u00a0\u00bb border_radii=\u00a0\u00bbon|24px|24px|24px|24px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb module_alignment=\u00a0\u00bbcenter\u00a0\u00bb custom_margin=\u00a0\u00bb2rem|5rem|0px|5rem|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb header_2_font_size=\u00a0\u00bb56px\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|1.5rem|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb header_2_font_size_tablet=\u00a0\u00bb40px\u00a0\u00bb header_2_font_size_phone=\u00a0\u00bb40px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<h2 class=\"p3\"><strong>Le besoin<\/strong><\/h2>[\/et_pb_text][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb width=\u00a0\u00bb56.8%\u00a0\u00bb width_tablet=\u00a0\u00bb100%\u00a0\u00bb width_phone=\u00a0\u00bb100%\u00a0\u00bb width_last_edited=\u00a0\u00bbon|phone\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb text_font_size_tablet=\u00a0\u00bb16px\u00a0\u00bb text_font_size_phone=\u00a0\u00bb16px\u00a0\u00bb text_font_size_last_edited=\u00a0\u00bbon|tablet\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<p>Le D\u00e9partement d\u2019Eure-et-Loir souhaitait moderniser son site <strong data-start=\"207\" data-end=\"222\">Eurelien.fr<\/strong>, un portail d\u2019information destin\u00e9 aux habitants et aux acteurs locaux. L\u2019objectif \u00e9tait de proposer une exp\u00e9rience plus dynamique, accessible et engageante, tout en conservant l\u2019identit\u00e9 visuelle forte du d\u00e9partement. Le site devait non seulement \u00eatre plus attractif et intuitif, mais aussi r\u00e9pondre aux exigences d\u2019<strong data-start=\"539\" data-end=\"556\">accessibilit\u00e9<\/strong> pour garantir une navigation fluide pour tous les utilisateurs. L\u2019un des d\u00e9fis majeurs \u00e9tait de <strong data-start=\"653\" data-end=\"696\">pr\u00e9server l\u2019identit\u00e9 visuelle existante<\/strong>, notamment la couleur jaune embl\u00e9matique, tout en la modernisant. De plus, la gestion du contenu devait \u00eatre optimis\u00e9e afin que les \u00e9quipes internes puissent mettre \u00e0 jour le site de mani\u00e8re autonome, sans d\u00e9pendre syst\u00e9matiquement d\u2019une \u00e9quipe technique.<\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb module_alignment=\u00a0\u00bbcenter\u00a0\u00bb custom_margin=\u00a0\u00bb2rem|5rem|0px|5rem|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb header_2_font_size=\u00a0\u00bb56px\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|1.5rem|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb header_2_font_size_tablet=\u00a0\u00bb40px\u00a0\u00bb header_2_font_size_phone=\u00a0\u00bb40px\u00a0\u00bb header_2_font_size_last_edited=\u00a0\u00bbon|desktop\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<h2 class=\"p3\"><strong>La m\u00e9thodologie<\/strong><\/h2>[\/et_pb_text][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb width=\u00a0\u00bb56.8%\u00a0\u00bb width_tablet=\u00a0\u00bb100%\u00a0\u00bb width_phone=\u00a0\u00bb100%\u00a0\u00bb width_last_edited=\u00a0\u00bbon|tablet\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb text_font_size_tablet=\u00a0\u00bb16px\u00a0\u00bb text_font_size_phone=\u00a0\u00bb16px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<p data-start=\"23\" data-end=\"445\">Sur ce projet, je n\u2019ai pas r\u00e9alis\u00e9 la partie UX, mais j\u2019ai assist\u00e9 aux diff\u00e9rents <strong data-start=\"105\" data-end=\"131\">ateliers de conception<\/strong> afin de comprendre les besoins et les contraintes du client. Contrairement \u00e0 d\u2019autres projets, aucune <strong data-start=\"234\" data-end=\"259\">interview utilisateur<\/strong> n\u2019a \u00e9t\u00e9 men\u00e9e ; cependant, des <strong data-start=\"291\" data-end=\"319\">utilisateurs concepteurs<\/strong> ont particip\u00e9 \u00e0 tous les ateliers pour garantir que les d\u00e9cisions prises r\u00e9pondraient aux attentes des futurs utilisateurs.<\/p>\n<p data-start=\"447\" data-end=\"736\">Le projet s\u2019est d\u00e9roul\u00e9 en <strong data-start=\"474\" data-end=\"499\">quatre sprints design<\/strong>, avec une approche it\u00e9rative permettant d\u2019affiner progressivement l\u2019interface. J\u2019ai \u00e9galement men\u00e9 des <strong data-start=\"603\" data-end=\"639\">tests utilisateurs en pr\u00e9sentiel<\/strong>, ce qui m\u2019a permis d\u2019observer directement les r\u00e9actions et d\u2019ajuster le design en cons\u00e9quence.<\/p>\n<p data-start=\"738\" data-end=\"1500\">Pour la partie <strong data-start=\"753\" data-end=\"766\">UI design<\/strong>, j\u2019ai commenc\u00e9 par r\u00e9aliser des <strong data-start=\"799\" data-end=\"813\">moodboards<\/strong> afin d\u2019explorer plusieurs <strong data-start=\"840\" data-end=\"857\">axes cr\u00e9atifs<\/strong> et de proposer une direction visuelle coh\u00e9rente avec l\u2019identit\u00e9 du site. Une fois l\u2019orientation valid\u00e9e, j\u2019ai construit un <strong data-start=\"981\" data-end=\"1011\">design system from scratch<\/strong>, bas\u00e9 sur l\u2019<strong data-start=\"1024\" data-end=\"1041\">atomic design<\/strong>, garantissant ainsi modularit\u00e9 et \u00e9volutivit\u00e9 pour les futures mises \u00e0 jour. L\u2019un des d\u00e9fis majeurs a \u00e9t\u00e9 d\u2019int\u00e9grer ces nouvelles interfaces tout en respectant les <strong data-start=\"1207\" data-end=\"1246\">contraintes techniques de WordPress<\/strong>, notamment en veillant \u00e0 l\u2019optimisation des composants et \u00e0 leur compatibilit\u00e9 avec le CMS. Enfin, j\u2019ai r\u00e9alis\u00e9 le <strong data-start=\"1362\" data-end=\"1403\">prototypage des parcours utilisateurs<\/strong> afin de les tester en conditions r\u00e9elles et d\u2019ajuster l\u2019exp\u00e9rience avant l\u2019int\u00e9gration finale.<\/p>[\/et_pb_text][et_pb_divider _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb background_color=\u00a0\u00bbgcid-secondary-color\u00a0\u00bb width=\u00a0\u00bb56.8%\u00a0\u00bb width_tablet=\u00a0\u00bb100%\u00a0\u00bb width_phone=\u00a0\u00bb100%\u00a0\u00bb width_last_edited=\u00a0\u00bbon|desktop\u00a0\u00bb custom_margin=\u00a0\u00bb1.5rem|0px|0px|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{%22gcid-secondary-color%22:%91%22background_color%22%93}\u00a0\u00bb][\/et_pb_divider][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb width=\u00a0\u00bb56.8%\u00a0\u00bb custom_margin=\u00a0\u00bb1.5rem|0px|0px|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime; text_font_size_tablet=\u00a0\u00bb14px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb text_font_size=\u00a0\u00bb14px\u00a0\u00bb sticky_enabled=\u00a0\u00bb0&Prime;]<p><span class=\"chips\">Sprint design<\/span>\u00a0<span class=\"chips\">Utilisateurs concepteurs<\/span>\u00a0<span class=\"chips\">WordPress<\/span><\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb module_alignment=\u00a0\u00bbcenter\u00a0\u00bb custom_margin=\u00a0\u00bb1.5rem|5rem|0px|5rem|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_image src=\u00a0\u00bbhttps:\/\/charlotte-kubis.fr\/wp-content\/uploads\/2025\/03\/use_case_eurelien_O2-scaled.jpg\u00a0\u00bb title_text=\u00a0\u00bbuse_case_eurelien_O2&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb border_radii=\u00a0\u00bbon|24px|24px|24px|24px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb module_alignment=\u00a0\u00bbcenter\u00a0\u00bb custom_margin=\u00a0\u00bb2rem|5rem|0px|5rem|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb header_2_font_size=\u00a0\u00bb56px\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|1.5rem|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb header_2_font_size_tablet=\u00a0\u00bb40px\u00a0\u00bb header_2_font_size_phone=\u00a0\u00bb40px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<h2 class=\"p3\"><strong>La solution<\/strong><\/h2>[\/et_pb_text][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb header_3_font_size=\u00a0\u00bb40px\u00a0\u00bb width=\u00a0\u00bb56.8%\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|1rem|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb text_font_size_tablet=\u00a0\u00bb16px\u00a0\u00bb text_font_size_phone=\u00a0\u00bb16px\u00a0\u00bb header_3_font_size_tablet=\u00a0\u00bb32px\u00a0\u00bb header_3_font_size_phone=\u00a0\u00bb32px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<p data-start=\"19\" data-end=\"759\">La refonte d\u2019<strong data-start=\"32\" data-end=\"47\">Eurelien.fr<\/strong> a repos\u00e9 sur plusieurs axes cl\u00e9s. Tout d\u2019abord, l\u2019<strong data-start=\"98\" data-end=\"123\">interface utilisateur<\/strong> a \u00e9t\u00e9 enti\u00e8rement repens\u00e9e pour offrir une navigation plus fluide et intuitive, avec un design plus dynamique gr\u00e2ce \u00e0 l\u2019utilisation de jeux de volumes et d\u2019ombres. Afin d\u2019assurer une coh\u00e9rence graphique sur l\u2019ensemble du site et de faciliter son \u00e9volution future, nous avons cr\u00e9\u00e9 un <strong data-start=\"407\" data-end=\"424\">design system<\/strong> regroupant des composants modulaires et r\u00e9utilisables. Celui-ci inclut \u00e9galement une biblioth\u00e8que de styles et de graphiques adapt\u00e9s aux besoins sp\u00e9cifiques du site. <strong data-start=\"591\" data-end=\"757\">Ce design system a \u00e9t\u00e9 con\u00e7u pour \u00e9voluer facilement, permettant d\u2019ajouter de nouveaux modules et fonctionnalit\u00e9s sans compromettre la coh\u00e9rence visuelle du site.<\/strong><\/p>\n<p data-start=\"761\" data-end=\"1126\">L\u2019<strong data-start=\"763\" data-end=\"780\">accessibilit\u00e9<\/strong> a \u00e9t\u00e9 un point central, avec un contraste optimis\u00e9 et une meilleure organisation des contenus pour s\u2019adapter \u00e0 tous les types d\u2019utilisateurs. Enfin, le site a \u00e9t\u00e9 <strong data-start=\"944\" data-end=\"972\">d\u00e9velopp\u00e9 sous WordPress<\/strong>, permettant aux \u00e9quipes internes d\u2019Eure-et-Loir de g\u00e9rer facilement les mises \u00e0 jour et d\u2019assurer une autonomie compl\u00e8te dans l\u2019administration du site.<\/p>[\/et_pb_text][et_pb_button button_url=\u00a0\u00bbhttps:\/\/eurelien.fr\/\u00a0\u00bb url_new_window=\u00a0\u00bbon\u00a0\u00bb button_text=\u00a0\u00bbD\u00e9couvrir le site en action !\u00a0\u00bb _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb custom_margin=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_button][et_pb_divider _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb background_color=\u00a0\u00bbgcid-secondary-color\u00a0\u00bb width=\u00a0\u00bb56.8%\u00a0\u00bb width_tablet=\u00a0\u00bb100%\u00a0\u00bb width_phone=\u00a0\u00bb100%\u00a0\u00bb width_last_edited=\u00a0\u00bbon|desktop\u00a0\u00bb custom_margin=\u00a0\u00bb1.5rem|0px|0px|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{%22gcid-secondary-color%22:%91%22background_color%22%93}\u00a0\u00bb][\/et_pb_divider][et_pb_text _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb width=\u00a0\u00bb56.8%\u00a0\u00bb custom_margin=\u00a0\u00bb1.5rem|0px|0px|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime; text_font_size_tablet=\u00a0\u00bb14px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb text_font_size=\u00a0\u00bb14px\u00a0\u00bb sticky_enabled=\u00a0\u00bb0&Prime;]<span class=\"chips\">Atomic design<\/span> <span class=\"chips\">Design system<\/span>\u00a0<span class=\"chips\">Accessibilit\u00e9<\/span> <span class=\"chips\">Eco-conception<\/span> <span class=\"chips\">Test utilisateurs<\/span>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb module_alignment=\u00a0\u00bbcenter\u00a0\u00bb custom_margin=\u00a0\u00bb1.5rem|5rem|0px|5rem|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_image src=\u00a0\u00bbhttps:\/\/charlotte-kubis.fr\/wp-content\/uploads\/2025\/03\/use_case_eurelien_O3-scaled.jpg\u00a0\u00bb title_text=\u00a0\u00bbuse_case_eurelien_O3&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb border_radii=\u00a0\u00bbon|24px|24px|24px|24px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00a0\u00bb1_2,1_2&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb module_alignment=\u00a0\u00bbcenter\u00a0\u00bb custom_margin=\u00a0\u00bb1.5rem|0px|0px|0px|false|false\u00a0\u00bb custom_padding=\u00a0\u00bb0px|0px|0px|0px|false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb1_2&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_image src=\u00a0\u00bbhttps:\/\/charlotte-kubis.fr\/wp-content\/uploads\/2025\/03\/use_case_eurelien_O5-1.jpg\u00a0\u00bb title_text=\u00a0\u00bbuse_case_eurelien_O5&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb border_radii=\u00a0\u00bbon|24px|24px|24px|24px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][\/et_pb_column][et_pb_column type=\u00a0\u00bb1_2&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_image src=\u00a0\u00bbhttps:\/\/charlotte-kubis.fr\/wp-content\/uploads\/2025\/03\/use_case_eurelien_O4.jpg\u00a0\u00bb title_text=\u00a0\u00bbuse_case_eurelien_O4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb border_radii=\u00a0\u00bbon|24px|24px|24px|24px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"<p>Conseil d\u00e9partemental d\u2019Eure-et-LoirEurelienLe D\u00e9partement d\u2019Eure-et-Loir souhaitait moderniser son site Eurelien.fr, un portail d\u2019information destin\u00e9 aux habitants et aux acteurs locaux. L\u2019objectif \u00e9tait de proposer une exp\u00e9rience plus dynamique, accessible et engageante tout en conservant l\u2019identit\u00e9 visuelle forte du d\u00e9partement.R\u00f4le Lead UI DesignerTemps 47 jours &#8211; 2022Secteur Administration publiqueOutils Figma IllustratorLe besoinLe D\u00e9partement d\u2019Eure-et-Loir souhaitait moderniser [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1098,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:heading -->\n<h2 class=\"wp-block-heading\"><strong>Contexte et enjeux<\/strong><\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Le d\u00e9partement d'Eure-et-Loir doit repenser sa communication num\u00e9rique pour am\u00e9liorer l'accessibilit\u00e9 et l'efficacit\u00e9 de ses services en ligne. Cette initiative implique une refonte compl\u00e8te du portail <a href=\"http:\/\/www.eurelien.fr\/\">www.eurelien.fr<\/a>, la modernisation de l'interface d'administration et l'int\u00e9gration de fonctionnalit\u00e9s de cartographie interactive.<br>Les enjeux sont multiples : am\u00e9liorer l'accessibilit\u00e9 des services en ligne, optimiser l'exp\u00e9rience utilisateur, renforcer l'image dynamique du d\u00e9partement, moderniser l'interface d'administration et enrichir l'exp\u00e9rience utilisateur avec des fonctionnalit\u00e9s de cartographie interactive.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\"><strong>M\u00e9thodologie<\/strong><\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Nous avons d\u00e9but\u00e9 en menant des interviews utilisateurs ainsi que des entretiens avec des experts techniques, ce qui nous a permis de cerner pr\u00e9cis\u00e9ment les besoins et attentes des utilisateurs, ainsi que les contraintes techniques \u00e0 prendre en compte. En parall\u00e8le, nous avons d\u00e9fini le p\u00e9rim\u00e8tre fonctionnel du projet pour encadrer notre travail et garantir sa pertinence.<br>Dans la phase de conception, nous avons adopt\u00e9 une approche it\u00e9rative en organisant deux design sprints successifs. Lors du premier sprint, nous avons r\u00e9alis\u00e9 un speedboat pour visualiser les axes d'am\u00e9lioration prioritaires, puis nous avons d\u00e9fini les personas, \u00e9labor\u00e9 l'arborescence du site, identifi\u00e9 les cas d'usage, \u00e9tabli la hi\u00e9rarchie du contenu, cr\u00e9\u00e9 les wireframes, les maquettes UI, ainsi que les prototypes initiaux. Cette premi\u00e8re it\u00e9ration a \u00e9t\u00e9 suivie d'une s\u00e9rie de tests utilisateurs pour valider nos choix et it\u00e9rer au besoin.<\/p>\n<!-- \/wp:paragraph -->","_et_gb_content_width":"","footnotes":""},"project_category":[11],"project_tag":[],"class_list":["post-677","project","type-project","status-publish","has-post-thumbnail","hentry","project_category-ui-design"],"_links":{"self":[{"href":"https:\/\/charlotte-kubis.fr\/index.php\/wp-json\/wp\/v2\/project\/677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/charlotte-kubis.fr\/index.php\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/charlotte-kubis.fr\/index.php\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/charlotte-kubis.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/charlotte-kubis.fr\/index.php\/wp-json\/wp\/v2\/comments?post=677"}],"version-history":[{"count":50,"href":"https:\/\/charlotte-kubis.fr\/index.php\/wp-json\/wp\/v2\/project\/677\/revisions"}],"predecessor-version":[{"id":1777,"href":"https:\/\/charlotte-kubis.fr\/index.php\/wp-json\/wp\/v2\/project\/677\/revisions\/1777"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/charlotte-kubis.fr\/index.php\/wp-json\/wp\/v2\/media\/1098"}],"wp:attachment":[{"href":"https:\/\/charlotte-kubis.fr\/index.php\/wp-json\/wp\/v2\/media?parent=677"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/charlotte-kubis.fr\/index.php\/wp-json\/wp\/v2\/project_category?post=677"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/charlotte-kubis.fr\/index.php\/wp-json\/wp\/v2\/project_tag?post=677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}