WCYHA: Youth Hockey Website Redesign (Before / After)

WCYHA’s live website works as a template: a header with three stacked bars, a flat green banner, tile blocks and a plain table for the ice schedule. It is functional, and it looks like every other site built on the same platform. We redesigned the landing page, the navigation and the shared theme (so inner pages such as Schedule and About inherit the same look) around the association’s own colors, dark green with neon accents, and its ICE and LYNX marks. The result is one navbar, solid cards, large readable type, a full-screen phone menu and a calm layer of motion.

WCYHA runs youth hockey for Washington County, Wisconsin, with programs from 4U to 14U, and is run by volunteers. The website has to do three jobs for busy parents and coaches: register, find ice time and find who to ask. Schedule and registration are served by Crossbar, the platform that hosts wcyha.org; the redesign keeps reading that schedule live.

Our role: UX/UI Design, Design System, Motion & Front-End Build (2026)

WCYHA’s live site is functional but reads as a template: three stacked header bars before any content, text over a busy photo, uneven tiles, a plain schedule table and a push-down list for a phone menu. We did not measure its speed, contrast or accessibility, so this study compares what we observed and what we built.

We rebuilt the landing page, the navigation and the shared theme around the association’s own colors and marks: one navbar, solid cards, large readable type, a full-screen phone menu and a theme every page inherits, backed by 17 automated contrast checks.

Web Redesign

Design System

Motion Design

Mobile-First UX

Accessibility

17 Automated WCAG Contrast Checks

10 Pages Compared, Before and After

0 Horizontal Overflow, Phone to Desktop

Full case study: dsignable.com/work/wcyha