Redesign & Implement the Willamette Hurling Club website

Research

Quantitative research using web-site analytics

The key findings were as follows:


Usability testing findings

The key findings from usability testing with users on mobile were as follows:


Other design concerns vs best practice


Target demographic

There are two main types of target users for the website, existing club members and potentially new playerslooking for more information. The target demographic for both types of users is open, but generally for people aged between 18-60. With such a wide age range, targetting people of differing generations with likely a wide variety of experience using technology, it means we should try to design with simplicity in mind.

In terms of content, for existing club members:

For potentially new players:


Research Findings summary:

From combining the knowledge obtained using the various research techniques, it seems as though half of the users who visit the website have a poor experience. It's clear this is an area to improve. Nearly all of the site's users use Chrome or Safari so we must ensure all design elements work consistently well across both browsers.

Wireframes

We will have a showcase area with a banner which will be consistent through the entire site, as well as the menu bar. The will ensure the design remains consistent throughout each page.

Also, we'll have a few embedded iframes for youTube videos and for a google calendar showing events. We must be able to make these elements responsive which is a key assumption in this design. This can sometimes be tricky when not using bootstrap.

Home screen

What is Hurling screen

Position & Skills screen

Schedule & Events screen

Contact screen

Design Prototype

The clubs colours are amber (primary), navy (secondary) and white (tertiary). The colours are tricky to work with, so we will use white as the main background for the site as it is the most neutral. Amber text on a navy background doesn't look or feel natural.

The site is responsive so it is usable on mobile. An example of this can be seen is that the menu options will be replaced with a standard menu icon which drops down the options when it is clicked. The iframes which hold the YouTube videos and the google calendar will appear smaller on mobile and preserve their aspect ratio, similiar to the images on the site.