Logo of UI Challenges
Sign in

Gallery

See what others have created

Live-viewing apps
G

gasui

@gasui

MediumSocial

Live-viewing apps

Design the core live-viewing flow for a social app: discovery, playback, and participation. Start with a feed or browse screen that surfaces live sessions first, using a clear live badge, creator name, short title, and a preview image or thumbnail. Live items should be distinguishable from recorded content at a glance.

The viewer screen should keep the stream as the main focus. Place title, creator identity, viewer count, and follow/join actions in a compact header or overlay. Add chat and reactions as secondary surfaces that can be opened without hiding playback controls. If you include gifting, sharing, or moderation controls, keep them clearly separated from the primary watch experience.

Show the states that matter in a live product: connecting, buffering, muted audio, chat disabled, stream ended, and replay available. Each state should preserve context and offer a next step such as retry, follow for alerts, or watch the replay. Design for both portrait and landscape so the same hierarchy still works when the device rotates.

What to deliver

  • Design a live viewing home feed with clear live badges and content previews.
  • Design the player screen with video, stream title, creator identity, and viewer count.
  • Add chat and reactions in a docked panel or bottom sheet without covering the stream.
  • Include a clear follow, subscribe, or join-live action near the player.
  • Show loading, buffering, and stream-ended states with next steps.

Excite users with anticipation! Incorporate a countdown or 'coming soon' feature for upcoming live events in your design to build engagement and keep your audience coming back.