Engineer School - UTBM
Date : 2024 – 2025
Subject : Redesign of the UTBM (University of Technology of Belfort-Montbéliard) website
Professionnel Project
Challenge :
Make the UTBM website accessible and attractive. Currently, it has an outdated design and contains too much content that is not relevant for a showcase website. The challenge is therefore twofold: modernize the design and reduce the amount of content, while also considering the accessibility criteria of the RGAA (General Accessibility Improvement Framework). d’accessibilité du RGAA (Référentiel Général d’Amélioration de l’Accessibilité).
Engineer School - UTBM
Date : 2024 – 2025
Subject : Redesign of the UTBM (University of Technology of Belfort-Montbéliard) website
Professionnel Project
Challenge :
Make the UTBM website accessible and attractive. Currently, it has an outdated design and contains too much content that is not relevant for a showcase website. The challenge is therefore twofold: modernize the design and reduce the amount of content, while also considering the accessibility criteria of the RGAA (General Accessibility Improvement Framework).
Project progress
I’ve just finished the website mockup work on Figma. This phase began with wireframes, then I designed mockups for the homepage before applying the final look to two additional pages. Finally, I prototyped the navigation menu.
Now, I need to turn this design into a functional website. To do this, a copy of the current website was made on a separate URL, allowing me to work without risking any disruption to the live version.
Wireframes
Mockups
structure
To make information more accessible, I worked on a new website’s structure. To do this, I decided to write each item from the existing menu on a post-it in Figma and then connect them in a tree diagram. This allows me to better visualize the current structure and makes it easier to rearrange and/or group some items to build the new menu.
Old website’s structure
New website’s strcuture
Current websiste
Accessibility of the current site
The main objective of this project is to make the new website accessible by adhering to the RGAA (General Accessibility Improvement Framework) criteria. To take up this challenge, I began by researching as much information as possible about web accessibility and the RGAA regulations. Once I was familiar with these topics, I decided to start with an initial accessibility audit of the current website, evaluating it against 50 of the 106 RGAA criteria. This allowed me to identify areas for improvement and determine how to make them accessible.
What is the RGAA ?
The RGAA is a government regulation requiring all public service and companies with sales of 250 million euros (or more) to make their website accessible to all type of users. The government’s website (https://accessibilite.numerique.gouv.fr/) provides a better understanding of this regulation, the legal obligations it entails, and the technical method for estimating a website’s level of accessibility. A list of 106 criteria is also available to evaluate and consider the accessibility when creating a new web interface. These criteria are based on the WCAG 2 and include different aspects of accessibility such as writing relevant ‘alt’ tags on each images, maintaining a minimum contrast ratio for colors, ensuring compatibility with assistive technologies, and more. An audit tool is also provided, enabling self-evaluation of the website and legal certification of the level of accessibility
Alongside this accessibility audit, I am immersed every two weeks with a group of people with disabilities to get a better understanding of the challenges they face on daily life. Additionally, my apprenticeship tutor is the regional director of APF France Handicap association, which gives me a broad perspective on disability and accessibility issues.
Project management
To effectively manage this project, I implemented various project management tools. First of all, I have done a project brief outlining the main objectives of the website redesign. Then, I set up a GANTT schedule listing all the project stages and the estimated working time for each. Finally, I have created a PowerPoint presentation and a Notion page to track the progress of each stage and compile key information.
Next steps
1. Website integration
2. User testing
3. Final website audit using the RGAA