Communications Workers’ Union

My Role
  • Front-end Development
  • UI Design
  • UX Design

I led the website refresh for Ireland's premier communications' union

Launch Date

18th February 2019

Problem Statement

The Communications Workers’ Union is Ireland’s premier union for the postal, telecommunications and call centre sectors.

The brief was to completely re-design their website. The main tasks were simplifying the navigation as the old site was very bloated; give it a modern, mobile responsive aesthetic; better highlight news, events, campaigns and publications to their members and the general public; have a greater focus on promoting and joining the union; and have a password-protected area for paying members.

Getting Down to Basics - Re-designing the Site Map

The CWU website was last refreshed back in 2010 and since then the website had become very bloated. There were a large number of pages and there was a very loose hierarchy. The first task was to cut down the sheer amount of pages, and find a home for the remaining ones in a logical, user-friendly structure.

About CWU and Being a Member would be parent sections to the main static content; then News, Events, Campaigns, and Publications would each be their own WordPress custom post type.

All of these would have their own spotlight on the home page.

CWU's previous website's landing page

The previous site map was very bloated so it was deconstructed to remove a lot of excess pages

First draft of the homepage wireframe

Creating a Design System

Once the site structure and wireframe was confirmed, I set about creating a design system based on the Atomic Design philosophy by Brad Frost. This is a system where I started by defining typography, colours, and buttons, then worked on the News, Campaign component cells, created templates with these multiple elements placed together and finally built full scale pages.

I built this using Sketch, my go to design programme.

Sketch design file with typography, colour brand references and re-usable symbols/ components

Focus on Joining and Promoting the Union

The Union wanted the Join feature to be a predominant aspect of the website. My solution was to feature it with its own call to action in a secondary navigation – dominating the other links around it. In this way, it would appear on every page. While I utilised a scrolling header featuring the primary links only and hiding the secondary nav, I morphed the Join button into the secondary nav so it is visible at all times to the user.

Final landing page hero image with Join call to action

Context for who the Communications Workers' Union are and quick highlight links to either Join or engage as a current member

A screenshot from the news archive page

I also featured it as the primary call to action in the hero image of the homepage and also display it just underneath the hero image where it’s reinforced. I had to be conscious of not making it too repetitive looking so I wrapped the second call to action in text content to differentiate it and give a quick background to what joining the union entails.