Brief
Design a style guide and create an accessible website based on what if the city of Nantes received the Europe Green Capital award in 2024.
My role
We were a team of three UX/UI designers and we divided the work depending on our specialities. I had to review different accessibility guides and use them to build the interfaces.
What is the European Green Capital Award ?
Every year a European city is designated by the European Commission as the European Green Capital of the year. This programme encourages cities to take the environment into account in their urban planning.
Concept
Nantes Green Capital website presents numerous projects that propelled the city for the award. It is based on the green line concept used every year in Nantes for the Voyage à Nantes to discover artistic projects through the city.
Review accessibility guides
To build the style guide we analyse various accessibility guides such as Les Designers Éthiques, AcceDe Web, RGAA… to determine the most important recommendations to put in our style guide and build the interfaces.
Style guide positioning
Based on our precedent review, we built a style guide of recommendations for the development of the website, focusing on the navigation and the accessibility of the various elements.
The color contrast has been tested to be readable following our chart. The use of the colors ensures visibility for colorblind people to discern the interactive elements from the decorative ones.
Responsive
Responsiveness is essential in the accessibility of the website. It is essential to have access to the same information no matter what device is used. Thus this website was designed both for desktop and mobile ensuring uniform accessibility of information.
The map
The main feature of our concept is the map retracing the itinerary of the event happening through the city. Alternatively, another way to access this information has been designed for people navigating on keyboard or using a narrator; a gallery of the events was made based on the directives in our style guide.
Each event card should possess an alternative text to deliver the information as well as by viewing it directly on the website.
The accessibility in two worlds
To bring even further the accessibility aspect of this project, in the description of each event, a section detailed the physical accessibility of the place; highlighting the city’s effort to bring accessibility in urban space.
