Trackside NZ & SportNation

01

Problem & goals

New Zealand racing fans had no dedicated website.

The gap in the market

Australia has several large racing sites, such as Punters, Sky Racing and Racing.com, each with hundreds of thousands of monthly users. New Zealand had none. Entain wanted to fill that gap and grow interest in its betting brands, TAB NZ and Betcha.

The brief

Bring the best of Sky Racing and Racing.com to New Zealand
Cover all three types of racing: thoroughbred, harness and greyhound
Serve everyone in racing: punters (people who bet), trainers, jockeys, owners and strappers
Be a real home for racing, not just advertising space

192K+active TAB NZ racing customers in the primary audience

85%of frequent racing bettors said live racing access matters

150Kaverage monthly users targeted by year three

02

Research

We researched the audience before designing anything.

Where we started

Research began with a workshop in March 2024 with product, content and broadcast teams, and New Zealand's three racing bodies (NZTR, HRNZ and GRNZ). We also used a survey of 289 TAB NZ customers.

Stakeholder workshop & audience mapping
Agreed on two audiences with Entain's marketing, product and content leaders: regular racing punters first, people who work in racing second.
Competitive analysis
Compared six Australian sites. Racing.com was the strongest. New Zealand was behind on form guides (a horse's past results), on-demand video and replays.
What customers told us
Customers wanted to stream on smart TVs, watch races without delays, and have more on-demand video, including a channel for each type of racing.
Information architecture
Planned the full site structure so any brand could use it, as a second brand was expected.

Information architecture How the pages connect

Home

Races starting soon
Live racing TV
Top stories
Quick Links
TV shows
Expert picks
Videos by Category
Latest news

Racing

Today's races
Race Card
Results
Horse, jockey & trainer profiles
Racing Calendar
Expert tips
Race replays

Video

Featured shows
Live TV channels
Videos by Category
Latest Videos
Video Player
Mini player

News

Top stories
News by Category
Article

Account

Sign up & Login
My Account
Saved horses
Settings
Search

Low-fi to mid-fi Tap a stage to compare

HomeToday's races, live TV and news

Race cardEvery horse in a race, with its odds

VideoWatch races live or catch up later

03

Phase one

The Trackside website, designed section by section.

A brief for every section

Design ran from April to June 2024, and the site launched in September. Each section started with a short brief covering its purpose, content, user flow and reference examples. This kept reviews focused.

Home

Quick access to what's on

Upcoming races by start time, live TV and radio, and featured videos and news.

Form

Detailed race data

Race pages for experienced punters, with odds, price changes, each horse's form, and where the money is being bet.

Tips

Expert tips

Best Bets, Best Value and Quaddies (picks across four races), based on a review of how competitors show tips.

Video

Live and on-demand video

Live races, replays, official race reviews and interviews, with channel switching, captions, AirPlay and picture-in-picture.

Trackside home on mobile — **Trackside** on mobile

Trackside race card on mobile — **Trackside** on mobile

Trackside desktop home with live racing TV and headlines — **Trackside** on desktop

Trackside race card on desktop — **Trackside** on desktop

04

Phase two

SportNation, built from the same designs.

A second brand, a new audience

SportNation started in October 2024. Its audience is different: Trackside serves experienced racing fans who want detail, while SportNation serves a broad audience who follow many sports.

Same components as Trackside
New colours, fonts and icons for the SportNation brand
Site structure expanded to cover many sports
A Trackside podcast section inside SportNation

SportNation home on mobile — **SportNation** on mobile

SportNation trending news on mobile — **SportNation** on mobile

SportNation desktop home with live radio streams — **SportNation** on desktop

SportNation listen page on desktop — **SportNation** on desktop

Trackside home page — Drag the handle to switch between the two home pages. Both are built from the same components.

SportNation home page — Drag the handle to switch between the two home pages. Both are built from the same components.

05

A challenge we faced

[A short headline about the problem we hit]

The problem

[What went wrong, in one or two plain sentences, and why it mattered to users or the team.]

What we tried

[The first idea, and why it didn't work. Optional.]

How we solved it

[The fix, in plain words.]

Before

Before[What the screen looked like]

After

After[What changed]

The result

[One line on what improved: a number, feedback, or what got easier.]

06

Design system

One design system, two brands.

Shared values, two looks

Both brands share the same design tokens: named values for colour, type and spacing. Trackside uses them for high-contrast, data-heavy pages. SportNation uses them for a brighter look suited to browsing.

Trackside NZ

code-grey

#F5F5F5
#E0E0E0
#BDBDBD
#9E9E9E
#616161
#424242
#212121

coral

#FBE9E7
#FFCCBC
#FF8A65
#FF5722
#E64A19
#BF360C
#7B1F0A

jade

#E8F5E9
#A5D6A7
#66BB6A
#43A047
#2E7D32
#1B5E20
#0D3B12

midnight

#E8EAF6
#9FA8DA
#5C6BC0
#3949AB
#283593
#1A237E
#0D1257

moonrock

#F5F5F0
#E0E0D8
#BDBDB2
#9E9E90
#6D6D62
#4A4A42
#28281F

royal

#EDE7F6
#CE93D8
#AB47BC
#8E24AA
#6A1B9A
#4A148C
#2A0A5E

yellow

#FFFDE7
#FFF59D
#FFF176
#FFEE58
#F9A825
#C77800
#7A4A00

SportNation

blue

#E3F2FD
#90CAF9
#42A5F5
#1E88E5
#1565C0
#0D47A1
#062272

green

#E8F5E9
#A5D6A7
#4CAF50
#388E3C
#2E7D32
#1B5E20
#0A3D12

neutral

#FAFAFA
#F5F5F5
#EEEEEE
#9E9E9E
#616161
#424242
#121212

red

#FFEBEE
#EF9A9A
#EF5350
#E53935
#C62828
#8B0000
#4A0000

yellow

#FFFDE7
#FFF59D
#FFEE58
#FDD835
#C6A800
#8A7200
#4A3D00

Breakpoints

Name	Width	Range
XS min	320	≤ 320px
XS	576	≤ 576px
S	768	768px
M	992	992px
L	1200	1200px
XL	1200+	≥ 1200px

Layout specs

Desktop12 cols24px gutter · ≥ 1200px

Tablet6 cols24px gutter · 768–1199px

Mobile4 cols16px gutter · ≤ 767px

shadow/small0 1px 1px rgba(0,0,0,.02), 0 2px 4px rgba(0,0,0,.04)

shadow/medium0 1px 4px rgba(0,0,0,.04), 0 4px 10px rgba(0,0,0,.08)

shadow/large0 2px 20px rgba(0,0,0,.04), 0 8px 32px rgba(0,0,0,.08)

shadow/xlarge0 8px 20px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.12)

odds-button-default0 2px 0 #B1ACBE

07

Phase three

SportNation in the car.

Working within Apple and Google's rules

The in-car app lets fans listen to sports podcasts while driving, sorted by sport, with a Trackside racing section. Apple and Google set strict rules for in-car apps, so the design had to work within them.

Two platforms

Designed for each platform

CarPlay and Android Auto have different rules and navigation. Each version follows its own platform.

Safety first

Built for a quick glance

Controls, layout and button sizes are designed so drivers can use them at a glance.

Screen sizes

Works on any car screen

The layout adapts from small built-in screens to wide displays.

Simple structure

Easy to find content

A clear structure for podcasts across many sports, plus racing.

SportNation mini player on mobile — **SportNation** on the phone

SportNation full player on mobile — **SportNation** on the phone

SportNation on CarPlay: list view — **SportNation** on Apple CarPlay

SportNation on CarPlay: live playing — **SportNation** on Apple CarPlay

SportNation on Android Auto: list view — **SportNation** on Android Auto

SportNation on Android Auto: live playing — **SportNation** on Android Auto

08

Deliverables

What I delivered.

From first workshop to handoff

The full project, from the first workshop to developer handoff, across two brands and four platforms.

Stakeholder workshopCompetitive analysisResearch synthesisInformation architectureDesign briefsWireframesUI designWhite-label theming ×2PrototypingDesign systemCarPlayAndroid AutoDeveloper handoff

09

Reflections

What I learned.

Write briefs before designing

A short brief for each section kept reviews focused on the right things.

Base decisions on evidence

The competitive analysis showed where New Zealand was behind, which set our priorities.

Plan for reuse early

Designing for multiple brands from the start meant SportNation extended Trackside instead of starting over.

Designing for drivers improves clarity

Designing for a quick glance made every screen simpler and clearer.

Trackside NZ & SportNation

My role

Client

Platforms

Timeline & status

Tools

Overview

New Zealand racing fans had no dedicated website.

The gap in the market

We researched the audience before designing anything.

Where we started

Stakeholder workshop & audience mapping

Competitive analysis

What customers told us

Information architecture

The Trackside website, designed section by section.

A brief for every section

Quick access to what's on

Detailed race data

Expert tips

Live and on-demand video

SportNation, built from the same designs.

A second brand, a new audience

[A short headline about the problem we hit]

One design system, two brands.

Shared values, two looks

code-grey

coral

jade

midnight

moonrock

royal

yellow

blue

green

neutral

red

yellow

Display

Heading

Body

Label

Breakpoints

Layout specs

SportNation in the car.

Working within Apple and Google's rules

Designed for each platform

Built for a quick glance

Works on any car screen

Easy to find content

What I delivered.

From first workshop to handoff

What I learned.

Write briefs before designing

Base decisions on evidence

Plan for reuse early

Designing for drivers improves clarity

SportsPick