CGT Métallurgie

How to reorganize years of content?

 

CLIENT

CGT Metallurgie

METHODO

Card Sorting

TOOLS

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.

Research

 

Observation

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.

 

CGT Métallurgie - Alexa Gueguen Designer

CGT Métallurgie website before

 

Problem statement

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?

 

Analysis

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.

Design

Navigation systems

After deciding how items will be displayed in the main navigation, I focused on the other navigation between sub-contents like sections and articles.

I sketched it like this:

Wordings

Last but not least, i gave some advices for names:

  1. quicker to read,
  2. easier to understand,
  3. 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.

 

Production

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.

Launch & Learn