Website Redesign

An ambitious attempt to completely redesign an existing website.


Company | Waterloo Women's Field Hockey Club
Role | CSS Lead, HTML Editor, Responsive Web Design Lead
Tools | Brackets (HTML/CSS), Adobe Illustrator
Team | Krystyna Poremba, Ainsley Andres, Jamie Dardarian, Faye Brill
Duration | 3 Months


Waterloo Women's Field Hockey - A website redesign

Context

Waterloo Women's Field Hockey Club is a non-profit organization that provides indoor and outdoor field hockey to women ages 13 and above. Our task was to fix their current website which is not user friendly and deters people away. Our task was to fix this.

Problem

This website had design and usability problems. These are the worst:
* Poor quality pictures, boring fonts and outdated background
* Usability of the website is poor due to inconsistent navigation
* Downloads files without consent
* Lack of accurate and updated information

Approach

Usability and clarity of the website were the main focus of the design due to the wide age range using the website. The use of up-to-date, accurate information was also critical in ensuring the website is usable.

Solution

The use of outside software (GoogleMaps and Calendar) assisted in making the website easy to use. The use of a Calendar provides the most up-to-date information to the user, and is easy to update. Colour changes in the toolbar allow the user to know where they are on the website. As well, documents have been switched to open forms in a new tab.

Responsive Web Design

The original website had no mobile version, simply the desktop displayed on a phone. In my effort to make the website more usable, responsive web design was crucial for the users experience. I decided to tweak the font size on each page so that the headlines would be smaller and therefore making body text easier to read. Two column pages were collapsed into one column with extra information on the top. The final, and most useful, mobile version tool is the change in calendar. The desktop version has the calendar in month view, but when switched to mobile, the calendar becomes an agenda view allowing for more legibility. This allows for easier reading all around. Overall, the implementation of responsive web design allows this site to be user friendly and adds a stronger element of design.

Official Published Website

Our team was lucky enough to have our site published on the teams official site.
You can check out the full website interactive website at:


WWFHC Website