WCYHA

One navbar, solid cards, large readable type, a full-screen phone menu and a shared theme every page inherits, compared page by page with the live site.

Client
Washington County Youth Hockey Association
Role
UX/UI Design, Design System, Motion & Front-End Build
Timeline
2026
Year
2026
Category
Web Redesign

Overview

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.

Why

A volunteer-run association needs a website that does three jobs for busy parents and coaches: register, find ice time and find who to ask. WCYHA’s live site did them, but it looked like every other site on its platform and made a phone user work for each one.

The brief was to make it feel like the association: bold, local and hockey, readable in a rink parking lot, and one system rather than a pile of pages.

The challenge

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.

What made it hard

  • A tall header before any content: at 1440x900 the live page shows a utility bar, a name bar and a green navigation bar, so the hero banner starts about 205px down a 900px screen.
  • Hero text over a busy photo: the title sits directly on a photo-filled WCYHA lettering graphic, with a thin text-shadow as the only separation.
  • Small type in the schedule strip and menus, and a Resources panel that overlaps the hero title when it opens.
  • Uneven tiles: two large quick-link tiles, then three smaller ones, with grey tiles carrying oversized logo artwork and a faded flyer whose small text cannot be read.
  • No current-page marker in the navigation in our desktop captures of the Schedule and About pages.
  • A white sponsor strip that breaks the green theme, with logos in very different visual sizes.
  • A plain, light schedule table with small grey text and tiny Club and Facility pills.
  • On a phone, the menu opens as a white push-down list of nine small bold words, and the home page is about 4,450px tall at 390px wide, mostly tall tiles stacked one per screen.

Approach

Make the site feel like the association: bold, local and hockey. Keep registration and the ice schedule one click away, make it easy to read on a phone in a rink parking lot, and make it feel like one system rather than a pile of pages.

The goals were one clear navigation on every screen size, readable text on every surface checked by tests rather than by eye, registration and the schedule reachable from the first screen, a mobile experience designed for the phone, and a theme every page inherits so new pages look right by default. We did not measure the live site’s contrast, speed or accessibility, so this study makes no claims about them.

Process

  • Look and listen: Audit of the live site on phone, tablet and desktop. The challenges above come from captures of wcyha.org.
  • Three directions: Grounded (solid surfaces, strong type), Tamed glass (translucent layers, calmer) and Scoreboard (high-contrast, data-forward). Grounded was chosen and refined from feedback.
  • Tokens first: One JSON design-tokens file holds colors, radii and elevation. A shared theme layer reads it, so cards, buttons and navigation are defined once.
  • One theme, every page: The theme is injected through the existing Next.js page renderer, so Schedule, About and the rest inherit the navbar, cards and buttons without per-page rebuilds.
  • Contrast as a test: 17 automated WCAG contrast checks cover the text, focus-ring and button pairs on every surface, and run with the build.
  • Check at every width: Each round was checked in a browser at phone, tablet and desktop widths, and each round had a separate review pass.

What we built

  • Hero and header: Before: three stacked header bars, a green banner with photo-filled lettering and a small game strip. After: a single floating navbar (logo, links, theme toggle, Register button) over full-bleed ice imagery, the headline “Every shift. Every shot.” and two buttons, Registration and Ice Schedule.
  • Navigation and Resources menu: Before: a white panel of small text in five groups (For Players, For Parents, For Coaches, For Team Managers, For Officials). After: the same five groups in a dark mega menu with high-contrast type. It opens on hover or click, closes other open menus and marks the current page. The navbar stays on one row down to 1141px wide.
  • Quick actions: Before: large Volunteer Dashboard and Board Minutes tiles. After: four labelled action cards (Registration, Ice Schedule, Volunteer, Board Minutes), each with an icon and a one-line description.
  • News: Before: a grid of three tiles. After: a full-bleed story carousel with large centered cards, neighbours peeking in, arrows, dots and a swipe cue.
  • Sponsors: Before: a white strip of logos. After: dark tiles in a track, with a “Want your brand on the ice? Become a sponsor” prompt.
  • Schedule page: Before: a light table with small filters. After: a themed page with a header, a button for today’s practice schedule, Practice / Club / Facility tabs, a date picker, a daily heading and a table with a header row, still fed by the live Crossbar schedule.
  • About page: Before: a text page with a side list of subpages. After: a hero heading, the same copy in a dark theme, a Board of Directors card grid, and expandable Committee Chairs, Coordinators and On-Ice Program Leads.
  • Footer: Before: a white footer with logos, a Follow band and a black legal strip. After: a Register for 2026-27 prompt and social buttons over ice imagery, then a dark footer with About, Contact and Quick Links.
  • Season-is-here bar: A countdown-style “Season is here, Register now” bar under the hero. The live site has a plain game strip in that spot instead.
  • Full-screen phone menu: Before: a white push-down list of nine small words. After: a Menu button opens a full-screen menu with numbered large links, Programs / Events / Resources that expand in place, a big Register button and a theme toggle. Dark mode is the default. On a 390px phone the quick actions are four cards in a single column and the news is a swipe carousel.
  • Motion: Used to guide, not decorate: staggered reveals on scroll, button feedback, and an ICE / LYNX corner logo that flips between the two marks. Motion is switched off for people who prefer reduced motion.

How it was built

One JSON tokens file defines colors, radii and elevation. A shared theme layer reads it and is injected through the existing page-rendering pipeline (a Next.js renderer on Cloud Run), so Schedule, About and the other pages inherit the same navbar, cards and buttons without per-page rebuilds. A contrast script checks 17 text, focus-ring and button pairs on every surface and runs with the build.

The phone menu, season-is-here bar, sponsor tiles and news carousel are plain CSS and JavaScript, checked in a browser at phone, tablet and desktop widths, with a separate review pass on each round. The before and after captures for this study were taken with headless Chrome on 6 October 2026: the live wcyha.org and the staging redesign, side by side.

Stack

  • Next.js on Cloud Run: Page renderer and theme delivery
  • Firebase Hosting: Staging and production sites
  • Vanilla CSS + JS: Shared theme, motion and menu
  • JSON design tokens: Colors, radii, elevation
  • Automated WCAG checks: 17 contrast tests
  • Headless Chrome (puppeteer): Visual checks and before/after captures

Outcomes

  • 17: Automated WCAG contrast checks passing
  • 10: Pages compared, before (live wcyha.org) and after (staging)
  • 0: Horizontal overflow, tested from phone to wide desktop
  • 1 row: Navbar stays on one row from 1141px up

Wins

  • One navbar that stays on one row from 1141px up, with a full-screen menu below that.
  • Solid, uniform cards and large readable type on every surface.
  • 17 automated WCAG contrast checks guarding the theme.
  • 0 horizontal overflow, tested from phone to wide desktop.
  • 10 pages compared, before and after, with the live Crossbar schedule still feeding the Schedule page.

Hard parts

  • Restyle without replacing the data: The schedule table and forms come from the hosting platform. Restyling them through the theme, while still reading the live feed, is what keeps the schedule trustworthy.
  • Readability settled by a number: Putting contrast in tests meant the argument about legibility was settled by a check, not by taste.
  • One theme for every page: The theme had to work through the existing renderer so inner pages inherit it without per-page rework.
  • Capture the real before: A copy of an earlier design is not the client’s site. The before shots are the live wcyha.org, not a local copy.

Services

  • Web Redesign
  • Design System
  • Motion Design
  • Mobile-First UX
  • Accessibility

More case studies · Get a free development plan