Swim Ireland

Website re-design for the national governing body of swimming, water polo, diving and synchronised swimming in Ireland and Northern Ireland

Role

Date

Company

UX Designer
December 2017
ICAN

Project Overview

Swim Ireland is the National Governing Body for swimming, water polo, diving and synchronised swimming in Ireland and Northern Ireland. They wanted to redesign and update their website to fit their new branding styles and to improve the overall user experience. Along with the web team at ICAN we designed and developed the homepage, several landing pages and content pages built up using building blocks.

Goal

“A cleaner more visual website which acts as a centrepiece of our branding and communications effort, is far easier to use for our customers and saves labour on our side through automating time-consuming processes”

Our aim was to modernise the Swim Ireland website, creating a balance between the aquatic disciplines, greater visual impact, reduced clicks, and presenting content in a more consistent and engaging manner.

With a full understanding of their target audience needs, the website would present a clear proposition and a relevant, streamlined course booking process.
Using a modern CMS, we will give the client back control of their website and provide the flexibility they needed to promote courses and events.

The website would be built responsively so it would be optimised for mobile, tablet and desktop while also meeting accessibility guidelines.

Research

In order to gain a better understanding of where the existing website was working well or indeed falling short, we conducted an analytics review and a complete audit of their website.
We looked at a wide range of areas including;

  • What were the most visited pages?
  • Where were users landing into and most visited areas within sections of the website
  • All while looking at the Avg. Time on page, Bounce rates etc

What also looked at what users were searching for in order to identify areas that are not hard to find. While also looking at social media referrals to identify where their traffic was coming from.
Our main findings and key takeaways were;

  • Gaining a better understanding of the current state of the site and most popular content to inform redesign.
  • Most searched terms help us identify what content is hard to find by the users so we can ensure we take this into consideration on the site’s redesign.
  • We identified most of the users that come to the website to obtain/check practical content (e.g. Results, rankings, next national competitions, etc.) so we will need to make this type of information very easy to find for each audience.
  • We need to ensure highly popular pages as Training Courses or Children swimming information have a clear call to action so your users don’t abandon the site after consuming your content.
  • We recommended revisiting their social media strategy to ensure that they're directing users to the website content.
  • We need to ensure landing pages as news articles have a clear call to action to increase users dwell time in the site and reduce bounce rate.

Workshop:

After compiling our findings we scheduled a workshop with the key stakeholders to present our findings. We performed some UX exercises such as generating user personas, to help identify target users, along with generating empathy maps, which helped us to define these user’s pains and gains

Afterwards we sent out a survey to visitors of the website. This answered some other questions we had while also testing our assumptions surrounding the website's users and helped us to make informed decisions during our next steps in the design process. Below are just a few questions we asked and the responses we got.

IA & User Flow:

After gathering our findings we were able to start brainstorming different user flows and started to restructure the Information Architecture (IA) of the website to fit the needs of the users.

When we reached a decision on the new structure we did some quick tree jack tests to back up our assumptions and to make sure it was clear to users. This involved setting some common user flow challenges in order to test users' understanding of the new IA.

Once we had an agreed approach we began story mapping the sitemap to give context and purpose to each page and to show the relationship each page had with other areas of the website.

Wireframes & Prototype:

The next process involved moving onto the wireframes. I quickly sketched out layout options, element blocks and the hierarchy of those elements on the pages. Documenting the functionality of these blocks and where else they could be reused.

After brainstorming sessions with the head of web and design lead we all came to the decision of the final layout options and constructed a low fidelity prototype to present to the client.

Visual Designs:

The design lead started working on a visual direction. Working alongside the designer we refined the designs and layouts. The new design gave the website a clean and fresh new look. Information was spaced out clearly and was given enough white space to make the content easy to read and let elements stand out. The colours and logo were updated to tie in with their new branding guidelines. I feel the designs perfectly fit the brief making the website a cleaner more visual website which acts as a centrepiece of Swim Ireland's branding and communications effort, while also making it far easier to use for their users.

The next step was to compiled a handover document, consisting of the annotated visual designs and site map. Along with the functionality descriptions for the blocks. This was then given, along with the style guide, to the developer in order to build the website.

Before launch we conducted a training workshop with the key stakeholders and trained them in Craft CMS to help them edit and add content.

Results

The result from this project was a new and improved website, fitting with their new branding and targeted to benefit the key users and target audience.

Vist Live Site