Logo of UI Challenges
Sign in

Gallery

See what others have created

Dynamic Island Live Timer
S

sheeshable

@sheeshable

MediumSystem

Dynamic Island Live Timer

Design the Dynamic Island state for a live countdown timer while the app is backgrounded. This should feel like a native iPhone system surface, not an in-app widget.

The island needs to show the timer at a glance: remaining time, clear countdown motion, and enough context to know it is active without opening the app. Keep the treatment compact and readable in the pill and expanded shapes.

Think through how the timer behaves as it ticks down, how it transitions between compact and expanded states, and what happens near zero. The surface should stay useful when the phone is in use, locked, or multitasking.

This is interesting because the timer has to communicate urgency and progress with almost no space. Every pixel has to earn its place, and the live state should feel calm, precise, and always current.

What to deliver

  • Design the compact Dynamic Island timer state
  • Design the expanded Dynamic Island timer state
  • Show the timer at start, mid-countdown, and near zero
  • Include the transition into and out of the live state
  • Show the zero state or completion handoff

Use one strong time format and keep it stable as the countdown changes; avoid reflowing the layout every second.