Skip to content
Yong Hyun Yoon

Product & UI/UX designer in Sydney

Contact

Stan · 2024

Implemented

Planning what to watch

Find an Olympic event, check the local start time and open the coverage.

Contribution
I designed the TV schedule from scratch, adapted a third-party widget for web and mobile, and reviewed the implemented UI.
Outcome
Implemented across web, mobile and TV.
Role
Product Designer
Platforms
TV · Web · Mobile
Timeline
Mar–Aug 2024, Stan contract
Team
2 product designers
1 product manager
Stan Olympic schedule with date selection and a grid of sports and event start times
Olympic Schedule on mobile, with event details and Watch Live.

The task

Start with the event.

Stan had no schedule feature. With so many Olympic events, viewers needed to find what to watch.

“I want to watch the Men’s Eight Rowing final.
Which day is it on?”

Design scenario, paraphrased from the user stories

Event-led, not channel-led

I recommended an event-led approach. The team chose a date → sport → event structure, with local time and watch actions kept in view.

Channel guide

Channel → Time

May not identify the sport.

Event schedule

Chosen

Date → Sport → Event

Still needs a clear place to watch.

Web schedule: third-party widget adapted to the Stan brand.
Web schedule: a third-party widget adapted to the Stan brand

Date browsing

Keep the sport. Change the day.

Competitor benchmarking led to a design hypothesis: keep the selected sport open while dates change.

Option 1

Leave the sport to change the day

  1. Open Rowing
  2. Check events
  3. Leave Rowing
  4. Change the day
  5. Open Rowing again

Option 2

Hypothesis

Continue in the same context

  1. Open Rowing
  2. Check events
  3. Change the day within Rowing
  4. Continue browsing
Choose a sport.
Choose a sport
Check the event details and start time.
Check the start time
Open live coverage from the event.
Watch live

TV

Continue to the full schedule.

TV shows what’s live and next. A QR code and web address open the full schedule on another device.

TV schedule design with sample event data.
TV schedule with sample event data
TV handoff instructions with a QR code and link to the full schedule.
A link and QR code to the full schedule

Device constraints

Adapt the layout to the device.

Some TVs couldn’t support the grid, so I adapted those to horizontal carousels that keep the same event groups.

Original TV grid design: Live Now events arranged in multiple rows.
Grid on compatible TVs
Original TV carousel design: Live Now and upcoming event groups each use a horizontal row.
Carousel on other TVs

Allow for grid spacing limits

The handoff asks for 40px between grid rows, with device spacing as the fallback.

Requested grid spacing · detail from the original handoff.
Requested spacing
Device fallback · detail from the original handoff.
Device fallback

Event states

Make the state explicit.

A Live badge marks coverage in the compact list. An empty state explains days with no sessions.

Live event row · original design.
Live event row, original design
No sessions are available for the selected day.
Empty state, redrawn for this case study

UI kit

The parts behind the schedule.

I aligned type, colour, spacing and states with Stan’s design library, and documented them for handoff.

Schedule UI kit.
Schedule UI kit

Date controls

A detail from the kit, which also covers filters, buttons and event states across the layouts.

Date controls. Detail from the UI kit.

Outcome

Implemented across web, mobile and TV.

I reviewed the delivered UI. The work connected event-led planning with platform-specific layouts and detailed handoff rules.

Next project

An app for esports fans

Riot Games · 2022

Handed off

Thanks for stopping by.

Curious about the work? Let’s talk.

Say hello