Client

Communications Workers’ Union

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

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

Launch Date

18th February 2019

Problem Statement

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.

Project Goals
  1. Simplify the design and navigation, creating a new site structure based on user needs
  2. Make a responsive design that works across all device types
  3. Build the site on Wordpress CMS so that it is easy to customise and update
  4. Focus on news and campaign postings
  5. Promote joining the union
  6. Create a password secure section for union members to view and access exclusive documents
Simplifying the site structure and navigation

The previous iteration of the CWU website had become very bloated. There were a large number of pages and a very loose hierarchy. Users found it difficult to find what they were looking for. 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.

We defined key sections such as About CWU, Being a Member; and News & Events and spotlighted these on the home page as a gateway to the rest of the content.

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.

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.

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