Brief
The work focused on redesigning the home page and optimising the Design System components.
The Design System already existed, but it was not applied the same way across all the portals. This partial use led to a lack of visual and functional unity between the sites, and to confusion among users.
We therefore aimed to harmonise the user experience across all the platforms, consolidate the Region’s digital identity and make its portals modern, accessible and consistent.
Identifying the priority areas of work
Understanding the Region’s challenges
Several constraints specific to the Region emerged during this redesign.
First, for an institutional site, compliance with the RGAA was essential, as was smooth navigation within each site and from one site to another.
We also had to design a modular home page, able to be adapted for each of the six sites, with a unified visual universe that is easy to adapt to the Region’s different “faces”.
Finally, the art direction had to be modernised, to anchor the Region’s digital identity in its time and reflect the values it stands for: ecological commitment, local action and closeness to citizens.
A necessary audit
The project began with an ergonomic audit of the six existing portals.
Three main areas for improvement came out of it:
- Accessibility, to strengthen inclusion for all audiences and comply with RGAA requirements.
- Consistency, for a coherent experience from one portal to another.
- Usability, for smoother and more intuitive navigation.
Reworking the Design System’s UX through quick wins
This first overview served as the basis for quick wins on the UX structure of the components already in the Design System.
At this stage, we only reworked individual components, to quickly improve the consistency and quality of the experience on the three priority areas identified during the audit.
Documenting the choices in the Design System
So that every stakeholder in the project could easily pick it up, we commented the Design System. The annotations give advice and tips on these priority areas, and flag what we corrected in our redesign of the components.
A collaborative and iterative approach
A modular, adaptable home page
The project was built with the project managers of the various portals, the editorial manager and us, the experience designers.
A zoning workshop led to a consensus on the structure of the home page. The role of the editorial teams proved central, because they are the ones who update the content day to day. We therefore needed the right balance between static and dynamic pages.
From zoning to low-fidelity mockups
Once the zoning was validated, we moved on to low-fidelity mockups to define the content and layout of the blocks. This phase gave rise to many exchanges with the editorial teams and the portals’ project managers, at times tense over the weight of certain components in the structure. Needs varied from one portal to another: some have a large share of regularly updated editorial content, others very little.
By moving forward through iterations, we progressed towards a structure common to the six portals.
A new graphic direction
The creative directions
During the audit, we had noticed that the red used in the web projects could hinder reading and raised accessibility problems. The Region’s stakeholders wanted a new art direction while keeping as many existing elements as possible: red, yes, but in small touches.
We proposed several graphic directions, from small photographs to simpler patterns, to avoid overly heavy visuals. The idea was to lighten the pages and meet the Region’s wish for an eco-designed site.
The art direction
The art direction uses earth tones, which evoke the territory and its geographical dimension. But we kept touches of red in the logo and on the main action buttons, to stay in line with the Region’s image. The vector illustration at the top of the page can change with the seasons or with the territories being showcased. The region covers a vast diversity of landscapes, and we found it interesting to feature them depending on the circumstances.
Updating the Design System
The recommendations and improvements from the audit were integrated during the graphic design (UI design).
We gave the developers the updated components with the new colours, along with more precise visual harmony rules defined during the redesign.
We also created a few components, notably the cards, to better distinguish their uses on the site and match the new art direction.
