Connecting skaters & clubs across Ontario with a new website for a provincial athletic organization.

Introduction

Skate Ontario is a province-wide organization promoting the strength & elegance of ice skating to connect local skating clubs, and to oversee competitions, trainings, and events. The organization has been recently transitioning, and the goal of this new website was to provide member clubs, coaches, officials, and current & prospective skaters with the tools they need for both leisure and competitive skating. The result was a fast & reliable website allowing users to search for clubs & jobs by location, and quickly identify the news, events, results, and information most relevant to them. The site has had great success since its launch in early Summer 2018, seeing 100,000 visits to a single event page.

Front-End Development

Layout builds & Responsive design

As we defined in the information architecture, I built out a dozen front-end layouts using CSS/HTML/JS with reusable components to be integrated with WordPress on the back-end. For much of the grid, dropdowns, and responsive menu, portions of the Foundation by Zurb CSS framework were used. I also adapted the designs to be responsive across all screen sizes and various elements where needed.

Custom Elements

I developed custom button hovers as a finishing touch, and added a few touches of animation throughout the site. In addition to the layouts provided, other custom elements include an optional image slider that will cycle through the latest featured posts on the home page and a search bar on all pages,

Accessibility

Accessibility was a specific concern for the client, so we made sure to test the site using screen readers and automated accessibility checkers to ensure it met WGAC standards. We also provided the client with some tips to keep the site as accessible as possible in the future.

Back-End Development

WordPress Integration

Their previous site content was carefully imported to a fresh WordPress install (via WP All Import) in order to make the new site as efficient as possible. Using Advanced Custom Fields, each layout type is broken down to allow for easy editing by the client. This gives them the flexibility to add or edit any page or piece of content they need without worrying about disrupting the design system.

Custom post types were created within the theme specifically for Clubs, Jobs, Event entries & more. This allows these content types to be used throughout the site & called upon for whichever page needs to display them. The Clubs, Jobs, and Events were also linked relationally so that new events & jobs connected to a certain club would automatically populate a section on those pages. The same is true for jobs or events that pertain to Coaches & Officials. This prevents the client from having to enter information twice.

One of the main feature requests for this new site was the ability to search for clubs by location. To accomplish this, each club can be assigned a location and an optional secondary location. A similar mechanism is used for the job board and allows users to find clubs & jobs based on a location search using the Google Maps API. The clubs & jobs are also linked in a way that the location information will be automatically added to a job if that job has been assigned to the club. This again saves the client from having to enter information more than once.

Wherever possible, I used the built-in featured image field in WordPress to automate image cropping, which enabled the same image to be displayed in a header and as a preview or thumbnail image elsewhere. This was done for almost all content types.

We also provided a set of processed headers of images they provided.

The calendar for this site is mostly powered by The Events Calendar plugin, and was re-styled & modified to integrate with the site & be more accessible. Accessibility was also a specific concern for the client, so we made sure to test the site using screen readers and automated accessibility checkers to ensure it met WGAC standards and provide some tips to the client for adding alt tags and other crucial information.

I used Yoast SEO to generate the proper meta tags and also a site map that can be submitted to search engines and shared across social media. Social media sharing buttons often result in poor performance as a WordPress plugin, so I created by own sharing buttons using javascript in concert with the meta tags that Yoast generates.

A library of screencast videos & notes was created for the client to reference when adding new site editors to their team and for general use in the future. This library contains a video breakdown of each section of the site along with some tips for creating content within WordPress. Based on how results information is currently processed by their team, we also provided the client with an interface to add results data & files outside of WordPress.

This site is hosted at Flywheel, my favorite & recommended WordPress host. Flywheel offers automatic backups, caching, a staging site, and the theme for this site was developed initially in their app "Local".

UX Design

Information Architecture

I worked with the client to define the information architecture for the new site to help them identify necessary pages & sections and reorganize their content for efficiency and impact. Much of the old site content was imported to the new site and reorganized to best serve their users.