Kings Hammer FC

Youth soccer across 12 clubs and 5 regional hubs. A parent trying to sign their kid up for tryouts would land on the site and get lost. Some called the main office and got routed to whoever handled that club. Others gave up.

The people running the clubs couldn't navigate the site either.

We interviewed parents, coaches, and club leaders. The same problem kept showing up in different words. Parents did not know where to start. Club leaders could not explain the path cleanly either.

I kept the transcripts close. There was too much context to trust memory. The decisions had to stay tied to what people actually said.

I led the UX story for the discovery deck. My part was turning the user confusion into a clear design problem.

The same context turned into structure. National, hub, club, program, tryouts. Clear levels, without forcing every parent through every step.

National

→

Hub

→

Club

→

Program

→

Tryouts

Every competitor shows players on a field. It all blends together. We cut them out of the background so each club's color could lead. Two concepts, different tone.

Concept 1

Concept 2

Two directions. Dark and dramatic, players carved out of shadow. Light and energetic, diagonal slashes and open backgrounds. Same foundation, different feeling. Light won for the main site. Dark was saved for Elite, the top tier, where it needed to feel heavier.

Kings Hammer was one organization, but every club needed to feel local. The system could not become twelve separate websites. It also could not flatten every club into the same template.

The structure stayed fixed. Color carried local identity.

Northern Kentucky

Swan City

Light was the default for Juniors and Academy. Dark was reserved for Elite. You had to earn the heavier treatment.

Academy

Elite

The tokens were the guardrail. One primary color per club, four usable variants, and light/dark mode underneath. Enough flexibility for local identity. Not enough to break the system.

A parent arrives knowing one thing: their kid wants to play soccer. Juniors, Academy, Elite. The names don't explain themselves. Different ages, different commitment levels, different costs.

The right program had to feel obvious without a guide.

Four directions. The client wanted pathways, timeline-style, clickable. I built the variants in HTML with Claude. Easier to figure out the interaction in code than in Figma. Then polished the Figma versions for review. The card style won. Easier to compare, obvious to click.

1

2

3

4 (chosen)

I led product design through Ample. Discovery through launch.