NOELIA DA COSTA - UX/UI & PRODUCT DESIGNER

Establish a solid foundation for a cross-functional project involving multiple departments (IT, Communications, Business Units), by defining a clear, user-centered, accessible and high-performance strategy.

Structure roles, scope, methodology and tools from the outset to ensure smooth project delivery over time

The scoping phase was carried out in two stages:

1. Functional and organizational scoping

Workshops with all stakeholders (IT, communications, business units, developers, designers)
Collection and clarification of already expressed needs
Identification of technical, political and structural constraints
Definition of roles, communication channels and key milestones
Creation and validation of a clear project roadmap

2. Implementation of a design strategy: I developed a UX strategy structured into five key phases:

Research (interviews, tests, audits, analytics)
Definition (friction points, prioritization)
Co-design (sitemap, architecture, user journeys)
Accessible & eco-conscious UI design (UI Kit, responsive, RGAA compliance)
Testing and iteration (prototype, user feedback, improvements)

This strategy was built on four core principles:

Accessibility by design: RGAA standards integrated from the wireframe stage
User-centered: user involvement at every step of the process
Eco-design: page weight reduction, visual sobriety, performance focus
Co-construction: active involvement of business units in workshops

Selected tools:

Figma / FigJam: design, wireframes, co-design workshops
Notion: project plan and UX documentation
Slack: team communication
Matomo Analytics: user behavior analysis

Facilitating strategic scoping with all stakeholders
Structuring the roadmap, UX phases, and project rituals
Defining the UX methodology to apply at each phase
Setting up and managing collaborative toolsCoordinating the entire project with a central leadership role

Success Indicators

Positive feedback from business teams and end users
RGAA accessibility compliance (validated or in audit phase)
Increase in online service usage compared to 2022 baseline
Improved eco-design score (lighter pages, more sustainable and efficient interface)

Project Kick-off Canvas

Strategy Blueprint

Research

Identify expectations, needs, and pain points across key user profiles (citizens, local authorities, associations, internal staff)
Understand the current site's limitations (navigation, content structure, accessibility)
Spot improvement opportunities in terms of user journeys, architecture, and functionalities
Build a solid foundation for the redesign through qualitative and quantitative research

Stakeholder interviews (communications, IT, business units) to align internal goals
User interviews with real-life profiles recruited from a list provided by the client
Heuristic audit of the existing site: content structure, depth, accessibility, pain points
Benchmark analysis of similar public websites (local governments, departments, city portals)
Statistical analysis via Matomo: bounce rate, device usage, drop-off points, heatmaps
Research synthesis and documentation via Notion and FigJam

Step-by-step research approach

Drafting interview guides and test protocols
Recruiting user participants based on target profiles
Leading interviews and user tests independently
Conducting the site audit (navigation + accessibility)
Analyzing quantitative data using Matomo
Leading insight-sharing workshops and compiling the final synthesis

🏢 Hypotheses formulated by the client

The current site is too focused on news and should evolve into a platform centered around services.
The different user profiles (local authorities, associations, individuals) need to be better guided upon arrival.
Simplifying the site’s structure and user journeys would improve access to key information.
A clear catalog of available support and services would enhance usability.
UI harmonization with the "76 Pocket" platform would provide visual and functional continuity.
A fully accessible and eco-designed website would increase efficiency and reduce environmental impact.

Moving news content to a separate platform would lighten the main site and streamline navigation.

🧪 1. Surface audit

Search bar poorly positioned and barely visible
Cognitive overload: too much text, lack of hierarchy
Accessibility issues: low contrast, disabled zoom, missing icons
Complex dropdown menu and unclear wording
Structural inconsistencies (misplaced sections)

Poor affordance: unclear links, unidentifiable buttons, weak visual cues

🧪 2. User journey analysis

No clear distinction between user profiles
Unintuitive menus; “Pour vous servir” module underutilized
Information overload and lack of prioritization

🧪 3. Site structure analysis

252 pages with significant redundancy
Excessive depth (4 to 5 levels), resulting in complex navigation
Multiple entries for the same information, fragmented user journeys

🧪 4. Analytics review (Matomo)

High exit rates on key pages (e.g., Home, Daily Life, News)
Many pages never visited
Misaligned page titles vs user expectations
Frequent 404 errors indicating poor internal linking
Tag-based searches like “MDPH” proved effective, showing the value of smart indexing

🧪 5. Benchmark (5 public sector websites)

Poorly structured submenus, mixed user types
Services often hard to access
Smoother navigation on some sites (e.g., Grenoble)
Underused banners for urgent communications

Eco-design largely absent — a potential differentiator

🧪 6. User interviews

15 participants (5 citizens, 5 associations, 5 local authorities)
Main use case: accessing public services and applying for support
Confusing navigation and poorly structured content
Mobile experience lacking in usability
FAQ and filters largely ignored

Design seen as outdated and lacking visual appeal

Insights

Key Insights

The platform no longer meets the standards of a modern, user-friendly public service

The information architecture needs a deep structural redesign

Users fail to perceive the richness of the offer due to poor content hierarchy

Accessibility and mobile experience are critical pain points to address first

Quotes

"Honestly, it took me a while to figure out where to click...The navigation isn't clear at all, you don't really know where to start"

"Visually, it looks like a very old website, like something from 15 years ago... It doesn't make you want to stay or explore further"

"At first, I was completely lost - I had no idea where to find things. Now that I'm used to it, I can manage...but it's definitely not intuitive."

Persona

User Story

Value Proposition Canvas

UX Design

Define a clear, seamless, and accessible user experience by restructuring the site’s information architecture, labels, and navigation flows. Create functional mid-fidelity wireframes ready for user testing.

1. New Site Mapping

Organization of card-sorting workshops to build a new structure based on users’ real expectations.

Label reformulation workshop to refine section names, categories, and menus.

2. Navigation & Menu Testing

A/B testing on the placement of primary and secondary navigation elements.

Label comprehension testing:
- Scenario-based tasks to observe first-click behavior.
- Direct questions like “What would you expect to find in this section?”
Sample: 10 randomly selected citizens.

3. Mid-fidelity wireframes

Creation of advanced mid-fi mockups using Figma.
Use of structured UI components to maintain consistency.
Mid-fi level deliberately pushed to focus testing on functionality and navigation clarity (avoiding visual distractions).

Facilitated and led co-design workshops (card sorting, label reformulation).
Created mid-fi wireframes in Figma using structured component systems.
Designed and moderated A/B and comprehension tests.
Analyzed user feedback and iterated on UX decisions.

Information Architecture & Sitemap

Reduced total number of pages and depth of navigation.
Eliminated redundant content.
Reorganized categories based on user logic.
Labels clarified and aligned with target profiles.
Solid foundation for future user journey testing.

Navigation Testing

Improved clarity of menu and submenu labels.
Reduced confusion through better label comprehension.
Navigation structure optimized.

Test

Mid-fi Wireframes

Usability Testing

Evaluate the clarity of navigation, the understanding of labels, and the fluidity of user journeys within the mid-fi wireframes. Tested and validated UX components: filters, access modules, menus, headings… Identify friction points and opportunities before moving on to the UI phase.

Sample: 15 users (5 citizens, 5 associations, 5 local authorities)
Recruitment: handled by myself using contacts provided by the client
Moderated qualitative tests conducted remotely
Definition of key user journeys to be tested
Creation of protocols and test scenarios on Notion
Execution of tests on detailed mid-fi wireframes created in Figma
Data collection, analysis, and synthesis in Notion
Results shared in a structured report presented to the client

Defined testing goals and designed scenarios
Wrote testing protocols and managed planning
Recruited participants according to target profiles
Conducted moderated user testing sessions
Synthesized feedback, prioritized critical points, and provided actionable recommendations

Results

✅ Positive findings

Smooth navigation and intuitive interactions across tested journeys

Tested and validated UX components: filters, access modules, menus, headings…
Filtering system well perceived: the “Aides et démarches” tool was considered easy to use and user-friendly
Key buttons clearly identified: “Search,” “Accessibility,” and “Contact Us” were easy to find and access

Breadcrumb navigation helped users stay oriented on the site

⚠️ Pain points

“Nos Actions” label unclear: users struggled to identify the content behind this section (e.g. “Sorties nature”)
“Espace Communes et EPCI” button caused confusion:
All 15 users were unsure about its purpose
No equivalent section exists for associations and citizens
Suggestion: design a unified access space where users can choose their profile upon entry
Confusion between filters and user space:
Users struggled to distinguish the search tool (to find and submit requests) from a dedicated personal space (to follow up on requests)
Needs clearer separation between these two features

💡 Insights

A unified user space would improve clarity and fairness across user groups
Overly institutional labels may hinder usability
The mid-fi navigation is largely validated but needs wording refinement to ensure full effectiveness
Users respond well to visual cues (buttons, breadcrumb, filters), which should be emphasized in the UI design

UI Design

To modernize the site’s visual interface while preserving its institutional identity. The goal was to enhance readability, build user trust, improve accessibility, and bring a fresh and contemporary visual feel to a key public platform.
The entire interface was designed to be responsive (desktop, tablet, and mobile) to ensure a seamless, consistent experience across all devices.

Complete redesign of the design system: reworked components, consistent spacing and visual hierarchy.
Preservation of visual identity: the Department’s original typography and color palette were retained but refined to improve readability and contrast.
Accessibility checks at every stage (contrast ratios, minimum sizes, visible focus, etc.)
Responsive UI mockups created in Figma for desktop, tablet, and mobile.

Quick internal usability tests and iterations on key components (buttons, filters, menus, forms).

Audited the existing UI and defined key visual improvement areas
Fully redesigned the design system (grids, components, icons, interactions)
Built the complete UI kit in Figma
Designed responsive interfaces for desktop, tablet, and mobile
Verified RGAA accessibility compliance at each step
Worked with the eco-design specialist to minimize visual weight (optimized images, SVGs, animations)

A refreshed institutional platform that remains visually consistent with its public identity
Visually seamless navigation thanks to structured grids, clear hierarchy, and coherent components
Reinforced trust through calm, accessible visual choices
Optimized multi-device experience, with mobile-first thinking from the start
Sustainable design system, fully documented and ready for long-term maintenance

Insights

Balancing visual continuity with modern UI improvements fostered strong client engagement
Readability was significantly improved, especially for dense content sections
Quick tests allowed for fine-tuning of micro-interactions, improving overall intuitiveness
A constant focus on accessibility ensured full compliance without compromising design quality

Home page

Category page

Desirability Testing

Evaluate users’ emotional and perceptual reactions to the new high-fidelity interface in order to validate its ability to convey clarity, trust, and usability.

Remote testing with a sample of 15 users (5 citizens, 5 associations, 5 local authorities)
Use of the Microsoft Desirability Toolkit
Customized word list aligned with the context and goals of the project
Selection of 20 to 30 relevant adjectives focused on clarity, trust, and intuitiveness
Two key activities:
- First impression test
- Keyword selection
Collection and analysis of participants’ emotional responses
Extraction of key insights and user sentiment trends

Selection and adaptation of the word list for the project’s tone and goals
Organization and facilitation of the test sessions
Data collection and synthesis of results
Presentation of the findings to stakeholders

Participants most frequently selected the following adjectives:
→ Intuitive, Organized, Easy to use, Calm, Attractive
These results validated the success of the visual and interaction design in conveying a sense of trust, usability, and aesthetics, aligned with the goals of a public institutional platform.

Visuel 1

Digital Accessibility

Design a platform fully compliant with the RGAA (French accessibility standard).
Integrate accessibility from the very beginning of the UX/UI design process and throughout the entire project.

Support the client in increasing their digital accessibility maturity, by strengthening internal awareness and ensuring long-term compliance.

Conducted a customized initial audit to identify the types of disabilities most impacted, based on critical site elements.
Mapped user needs for people with disabilities.
Systematically integrated accessibility criteria into both UX and UI design.
Designed a customizable accessibility module (text size, contrast adjustments, etc.).
Delivered guidelines for developers and content creators (semantic structure, accessible writing, etc.).
Facilitated internal team awareness (IT, communications, etc.) through training sessions and role definitions.
Ensured compliance with legal obligations (accessibility statement, multi-year plan, etc.) and communicated these requirements to the client.

Acted as the Digital Accessibility Lead throughout the project.
UX/UI Designer with expertise in accessibility, bringing a cross-functional approach to strategy, design, training, and documentation.
Responsible for integrating RGAA compliance into every deliverable.
Key point of contact on accessibility matters for internal teams and developers.

A website designed from the ground up to meet the needs of users with disabilities.
An accessible, clear, readable, and ergonomic user interface.
Internal teams trained and empowered to maintain compliance over time.
Clear documentation delivered for developers and content creators.
RGAA compliance targeted from launch, with a strong foundation for formal audits.

Insights

Accessibility isn’t an add-on — it must be a core design strategy from the start.
Teams are willing to embrace accessibility when supported with the right tools and knowledge.
Early integration of accessibility saves time and reduces costly post-design fixes