Watch Hockey

How do you give hockey fans live scores and streams in one place?

Interaction and visual design for a field-hockey app: live scores, streaming, and news, made fast and glanceable on mobile.

Project frame: Watch Hockey: live scores and streams for field-hockey fans

Role: Interaction & Visual Designer (interaction design, visual design, prototyping)
Year: 2021
Platform: iOS · Android

Glanceable

live scores

Fans check scores in seconds, often mid-task, so the design has to read at a glance.

One app

scores + streams + news

Following the sport shouldn't mean juggling separate apps for scores, video, and news.

01 · Context

The problem

Field-hockey fans want live scores, streams, and news in one fast app they can glance at, but those were scattered across separate places. The job was to bring them together and make them effortless on mobile.

02 · Evidence

What shaped the direction

Built for the quick glance

Live sport is checked on a phone in short bursts, so the interaction model is built around quick, repeated glances.

03 · Process

How it came together

The brief

Field-hockey fans want the same things every other sports fan wants: live scores, streams, and news, in one fast app they can glance at. The job was to make that effortless on mobile.

First-run and access

The entry flow had to move quickly from brand moment to useful setup: open the app, get in, choose what you care about, and land in a feed that already feels tuned.

Watch Hockey splash screen over a field-hockey video background with NAGRA Kudelski branding — Splash

Watch Hockey login screen with email, password, account creation, forgotten password and skip options — Login

Watch Hockey onboarding screen inviting fans to discover hockey, choose favourite teams and access news, videos, scores, live video and replays — Onboarding

Built for the quick glance

People check live sport in short bursts, usually mid-task. I designed the score views to read instantly and prototyped the core flows to test the interaction model before engineering built it.

Watch Hockey home feed with favourite teams, a featured Kookaburras story, tournament promotion and latest results — Home feed

Watch Hockey browse screen with search, favourite teams, competition cards and bottom navigation — Browse competitions

Watch Hockey training screen with video categories, sale modules, and training class cards — Training content

Team players

Watch Hockey social video feed showing a hockey player video with likes, comments, caption and bottom navigation — Social video

Scores, video, and news together

Rather than scatter scores, video, and news, I brought them into one coherent app, so following hockey is a single, simple habit.

Account states and recovery

The form states cover the less glamorous but important parts of the app: validation, recovery, confirmation, and a clear way back into the product.

Watch Hockey forgot-password flow showing empty, invalid, resolved, and check-your-email states — Forgot-password states

Watch Hockey create-account flow showing validation errors and resolved input states — Create-account validation

Watch Hockey reset-password flow showing default, error, and password-changed states — Reset-password states

04 · Craft

Decision trail

01Designed the live-score view to read at a glance, since it's the most frequent and least patient interaction.
02Brought scores, streaming, and news into one coherent app so fans don't leave to follow the sport.
03Prototyped the key flows to pressure-test the interaction model before build.

05 · Impact

Outcome

Livescores & streams

iOS · Androidnative apps

Next case study →Runite: one platform for running clubs to grow, run events, and get paid