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.
Communications Workers’ Union
- Front-end Development
- UI Design
- UX Design
I led the website refresh for Ireland's premier communications' union
18th February 2019
- Simplify the design and navigation, creating a new site structure based on user needs
- Make a responsive design that works across all device types
- Build the site on Wordpress CMS so that it is easy to customise and update
- Focus on news and campaign postings
- Promote joining the union
- Create a password secure section for union members to view and access exclusive documents
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.
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.
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.