How to reorganize years of content?
Sketch, Photoshop, WordPress
The CGT Métallurgie is the Federation of Metalworkers (FTM-CGT). It’s affiliated to the General Confederation of Labour in France but also has impact at an International level.
When I visited the Metallurgy CGT website for the first time, i immediately saw two things:
1/ Good news! The content was huge… so impressive! Picture, videos, articles, papers, catalog, etc. everything was well shared and up-to-date.
2/ But, the navigation was very hard to understand, mostly when you’re a « none-initiate ». With a lot of terms i didn’t understand or even can’t interpret like « UFICT » or « UFR », and sometimes items I understood but without knowing what is behind it.
Every week a lot of information is created by CGT Métallurgie teams to communicate with all its subscribers. They use a lot of supports: social media, videos and articles to dig current workers problems and explain actions planned. However each content has a specific audience, a few groups are distinguished like Students, Engineers, Retirees, etc.
How to reorganize the information, allowing every visitor to easy find the public content, all subscribers to find the private content and also inspire everyone to join the union?
Information Architecture as an essential and logical step
Firstly, soak up content to discover its ins and outs. Do some researches and ask questions to teams.
After a lot of reading and some calls with teams, I identify 3 cases:
- items we could definitively remove from the website
- items we wanted to add in a private part
- items we wanted to show publicly
Enumerating, categorizing, structuring
I decided to directly focus on the content.
Using the card sorting technique, I cut the navigation with the more than 70 items and start to dismiss those who were no longer serving.
Then, I restarted to classify in small groups all the private and public items. Finally we gave an more understandable name to each groups. That so much clearer now!
I had the tree-structure with the main navigation, it’s time to think about the global information architecture.
Last but not least, i gave some advices for names:
- quicker to read,
- easier to understand,
- targeted for users.
Review the guideline
In the first place, i focused on the guidelines. I suggested to keep the red as the secondary color and try different color pallet, notably to highlight links and hovers.
My goal was to keep it clear and easy to use, but as the team was, flashy, friendly, dynamic.
Here is the result:
Start with mockups
Finally, i mocked main pages.
The homepage was maybe the most important in this redesign work.
User interface: work with components
For user interface, I had the constraint of a WordPress thema called « Extra ». A lot of components were available, and could be stylized.