Hollywoodbets · Web App · UX Lead

Punters Challenge

SA's biggest free-to-play racing competition, a leaderboard, dense race card data, and users who have maybe 30 seconds to make their picks before the race starts. Then we built a soccer version.

Lead UX

Mfundo Zondi

UX/UI (Admin)

Kwandokuhle Sithole

Interaction Design

Nayaab Sahue

Tools

Figma · Adobe XD

Year

2023

Client

Hollywoodbets

View on Behance ↗

Three objectives. One redesign.

Three goals from the product team. More traffic, more engagement, and a new social feature that had never existed before. I had to hold all three at the same time.

Improve Usability

Reduce cognitive load when reading race data under time pressure. Users are emotionally invested, confusion costs more here than anywhere else.

Improve Navigability

Make every core action reachable without hunting. Race day users are task-focused, intuitive navigation means they spend time on the competition, not the interface.

Increase Traffic & Engagement

Surface the right features at the right time to drive return visits, leaderboard checking, and contest participation across race events.

Who plays, and why they leave

Punters Challenge attracts a wide audience, from seasoned horse racing bettors to occasional punters who play for the social competition. Research focused on identifying the moments where both groups lost confidence in the platform and stopped returning between race events.

User Interviews

Conducted with active Punters Challenge participants across Johannesburg, Durban, and Cape Town, ranging from weekly players to once-off entrants.

320

Survey Responses

Distributed via the Hollywoodbets platform and email list, focused on leaderboard comprehension, race data readability, and return visit motivation.

Competitive Audits

Benchmarked Fantasy Premier League, SuperCoach, and DraftKings for leaderboard UX, race data hierarchy, and social engagement mechanics.

🏇

Themba N.

41 · Johannesburg · Horse Racing Regular · Plays weekly

“I check the leaderboard after every race but half the time I can’t find where I am without scrolling forever. By the time I find it the next race has started.”

Goals

Check my rank without hunting for it

Scan race results fast during race day

Compete with the same group of friends each week

Frustrations

Leaderboard rank buried below race data

Race cards are dense and hard to read quickly

No way to filter the leaderboard to people I know

📱

Zanele M.

29 · Durban · Occasional Punter · Plays during big events

“I entered once for the Durban July and had no idea what was happening on the screen. I didn’t come back because I didn’t understand if I had won anything or not.”

Goals

Understand how the competition works quickly

Know at a glance if my picks scored points

A reason to come back after a bad week

Frustrations

No explanation of how points are calculated

Outcome of each pick not clearly communicated

Platform feels built for experts, not newcomers

Mapping the experience breakdown

User interviews and survey data pointed to the same moments of failure: arriving on race day without being able to find your position, making picks without confidence, and leaving after a race without understanding your result. The journey map formalised these into a redesign framework.

Phase	User Action	Pain Point	Design Response
Arrive	Opens app on race day	Home screen didn’t prioritise the active competition, felt like a generic sports page	Competition status banner pinned to home with countdown to next race, picks status, and current rank
Pick	Selects horses before the race	Race data was presented in a dense table, hard to scan under time pressure	Redesigned race card: horse name, jockey, and form at a glance, one tap to select
Compete	Watches leaderboard during race day	Rank buried in a long list, required scrolling to find personal position	Personal rank pinned at top of leaderboard with delta indicator (moved up/down)
Return	Comes back after an event	No reason to return between race events, platform felt dormant mid-week	Friends Challenge: compete in a private group between events, share banter via chat

Key Research Finding

Users who checked the leaderboard more than twice per session had 3× higher return rates. Making rank visible without hunting for it was the single highest-leverage improvement.

Friends Challenge Origin

Research identified that 68% of players had introduced at least one friend to the platform. Giving that group a dedicated space to compete and communicate drove the Friends Challenge feature.

Three ideas that shaped the redesign

The ideation phase was structured around the three objectives set by the product brief: improve usability, add meaningful new features, and increase return visits. Each idea was evaluated against all three before being taken to wireframe.

Rank Always Visible

Explored three approaches to surfacing personal rank: persistent badge, pinned row in leaderboard, and home screen widget. User testing confirmed the pinned leaderboard row with up/down delta as the clearest signal under race-day pressure.

Race Card Redesign

Compared table-view, card-view, and hybrid layouts for race data. Card-view with progressive disclosure won: essential info at a glance, detailed form available on tap, fast for experts, learnable for newcomers.

Friends Challenge

The most structurally new feature. Ideated on private groups, invite mechanics, and in-app chat. Benchmarked against Fantasy Premier League private leagues and SuperCoach groups before defining the minimum viable social layer.

Usability study: summary

Before touching Figma I ran a structured usability study on the existing product. The goal: understand exactly where the experience broke down, so the redesign would fix real problems, not assumed ones.

Study Type

Moderated Remote

Location

South Africa

Participants

6 Racing Fans

Duration

45–60 min each

Key Finding 01

Users struggled to identify their current leaderboard position at a glance. The data was present but not prioritised, rank was buried below race details.

Key Finding 02

The “Double Your Money” jackpot CTA was not prominent enough. Multiple users missed it entirely during timed tasks, a direct revenue opportunity lost.

Key Finding 03

Navigation between today’s races and upcoming events required too many taps. Users lost context switching between views and had to re-orient frequently.

Who I designed for

The Punters Challenge audience is not casual. These are habitual racing fans who track form, follow jockeys, and check leaderboards between races. The UX needed to respect their knowledge while removing friction.

🧔🏿

Sipho, 38

Logistics Manager · Durban · Weekend Racing Regular

"I know the horses, I know the form, I just need the app to get out of my way and let me play."

Goals

Check leaderboard position instantly

Track today’s races without scrolling

Spot the Double Your Money opportunity fast

Frustrations

Too many taps to find current race

Rank not visible without scrolling

Missed jackpot CTA due to poor placement

Context

Uses app on mobile during race broadcasts

High-stakes emotional investment per race

Checks app 8–12 times on race day

The race-day flow

Mapping Sipho’s race-day journey revealed three peak anxiety moments, each one a direct design target in the redesign.

Stage	Open App	Check Position	Find Race Info	Jackpot CTA	Track Results
Before	Long splash, slow load	Buried below fold	Multiple taps to find today’s race	Not visible without scroll	No clear results state
Feeling	Impatient	Frustrated	Confused	Missed opportunity	Uncertain
After	Instant dashboard	Rank pinned at top	Today vs Upcoming toggle on home	High-visibility banner, above fold	Clear results with position change

Improve Usability

Redesigned information hierarchy across all screens. Leaderboard rank pinned visible. Race details structured with clear visual weight. “What’s happening now” answered before anything else. Dense data made scannable through consistent typographic scale and colour coding by race status.

Improve Navigability

Rebuilt the navigation architecture. Today’s races and Upcoming separated into a persistent toggle on the dashboard. Bottom nav for primary flows. Zero dead ends. Every screen has a clear next action, race selection, leaderboard, results, or jackpot, one tap away.

Increase Traffic & Engagement

High-visibility Double Your Money banner repositioned above the fold. Push notification triggers for race start, leaderboard changes, and results. Designed to create return-visit habits; if you check your rank once, the UI makes it feel natural to check again after the next race.

Race Day Dashboard

Today vs Upcoming split at the top. Live race status indicator. Current leaderboard rank visible without scrolling. Time to next race displayed as countdown.

Leaderboard Design

Rank, username, and points visible at a glance. Sticky header during scroll. Personal rank card pinned above the list, users always know where they stand, even mid-scroll.

Double Your Money CTA

High-visibility banner repositioned above the fold. Colour-coded urgency based on time remaining. Tappable from the dashboard, no navigation required to reach the jackpot entry.

Punters Challenge, Redesigned UI · Dashboard, Leaderboard, Race Detail · 2023

⚽ New Sport Added

We built a soccer version

The Punters Challenge format proved strong enough to extend beyond horse racing. After the horse racing redesign shipped, the team commissioned a soccer version, same competition format, same free-to-play structure, redesigned for a football audience and its fundamentally different content model.

Soccer Punters uses the same design system foundations but adapts every content pattern to the football context, match fixtures replace race cards, team form replaces jockey stats, and the competition cadence shifts from daily race events to weekly fixtures and knockout rounds.

🐎 Horse Racing Version

Daily race events · Multiple races per session
Jockey + horse form data
Countdown timers per race
Leaderboard resets per meeting
Race card as core content unit

⚽ Soccer Version

Weekly fixture schedule
Team form + head-to-head data
Match kick-off times
Season-long leaderboard
Fixture card as core content unit

Design System Reuse

The soccer version was built on the same component library established in the horse racing redesign, colour tokens, spacing system, typography, and interaction patterns. New sport, shared foundation. This reduced design time significantly and maintained visual consistency across both products under the Hollywoodbets brand.

What this project taught me

Research before redesign

Starting with a usability study rather than jumping to Figma meant every decision had a user reason. The redesign fixed real problems, not assumed ones.

Emotional stakes change hierarchy

In high-stakes contexts, what sits above the fold matters enormously. Rank, countdown, jackpot, not decorative, not secondary. Primary, always.

Strong systems scale

Building with a proper design system from the start made the soccer version a faster, more consistent extension, not a rebuild from scratch.

Punters Challenge

Three objectives. One redesign.

Who plays, and why they leave

Mapping the experience breakdown

Three ideas that shaped the redesign

Usability study: summary

Who I designed for

The race-day flow

Three lenses. One solution.

What changed in the UI

We built a soccer version

Results & Impact

What this project taught me

Next Case Studies