Gigaplay (via HumanX) · 2021

GigaplayDesigning one streaming system for four screens

Solo contributor on the design system and UI/UX for Gigaplay, an OTT streaming platform: designed to feel native on TV, web, tablet, and mobile.

TV
Web
Tablet
Mobile

Role: Solo designer at HumanX
Client: Gigaplay (via HumanX)
Timeline: 2 months, 2021

Gigaplay's web homepage showing all categories of live and on-demand content.

500K+
Android downloads on Google Play, by October 2023
4 screens
TV, web, tablet and mobile, from one design system
Sept 2021
Launched free to Smart and TNT subscribers across the Philippines

Sources: Google Play listing (Internet Archive, Oct 2023); Smart Communications launch announcement, Sept 2021. The app was later renamed Smart LiveStream.

Context

The problem: an OTT streaming service needed one product across TV, web, tablet and mobile.
What I did: solo, in two months, one design system for all four, with the same rail, tile and player tuned for a remote, a cursor and a thumb.
The goal: a product that looks and behaves like itself on every screen.

Gigaplay is an OTT streaming platform. The brief was one product across four screens (TV, web, tablet and mobile) so that moving from your phone to the living-room TV feels like staying in the same app. Solo, in two months, I designed the design system and the UI/UX for all four, built from one set of components.

Read the full storyShow less

The constraint that shaped everything: each screen is driven differently. A thumb on mobile, a cursor on web, a remote on TV. The system had to hold one visual language while respecting three ways of moving through it.

Beyond the home screen, the work covered channel swimlanes, pay-per-view for movies and live events from before purchase to after it airs, and time-bound promotions.

What I owned

Design system across four form factors: TV, web, tablet and mobile, from a single component source.
UI/UX end-to-end for each form factor.
Cross-device consistency: making sure a rail on the TV read like the same rail on the phone, at a different tempo.

Three phone screens: the Gigaplay home with a featured show and a Live rail; search with top searches such as Mandalorian and Cobra Kai; and a UAAP channel page with a basketball hero, Live and UAAP Extras rails. — Mobile: home, search and a channel page

Four phone screens for a pay-per-view basketball event, Philippines vs Germany: before purchase with the price and Pay to Play; after purchase with Start Watching disabled until it airs; when it's live with Start Watching active and a LIVE badge; and after it aired, available to rent again. — Pay-per-view, from before you buy to after it airs

Three phone screens: the home with a Limited Time Offers rail at 50% off; Black Adam with a countdown showing when the offer ends; and Jumanji: The Next Level with a Free Preview button. — Time-bound promos and free previews

The system

Foundations

Colour, type and grid, rendered here from the real values rather than as screenshots.

Colour

A dark, cinema-first palette: two brand colours for action and interaction, a stepped set of near-blacks for depth, and one semantic red.

Brand

#7EB63EGigaplay Green7.6:1 AAA
#0085BBGigaplay Blue4.4:1 AA large

Text

#FFFFFFPrimary text18.4:1 AAA
#8C8E8ESecondary text5.6:1 AA

Backgrounds

#141414Background 1
#171717Background 2
#212121Background 3

Semantic

#FF4B4BError5.6:1 AA

Contrast shown against the app background, #141414.

Type

Typeface

Poppins

Regular 400
Medium 500
SemiBold 600
Bold 700

H1
24/29 · 500Continue watching
H2
21/25 · 500Continue watching
H3
19/27 · 500Continue watching
H4
17/27 · 500Continue watching
H5
16/20 · 600Continue watching
H6
15/20 · 600Continue watching
Body
14/22 · 400Continue watching
Caption 1
14/24 · 600Continue watching
Caption 2
12/19 · 500Continue watching
Overline 1
12/18 · 400Continue watching
Overline 2
11/20 · 400Continue watching

Grid

One grid that widens with the screen: four columns in the hand, eight on a tablet, twelve on the web.

Mobile 0–599

Columns: 4
Margin: 16
Gutter: 12

Tablet 600–904

Columns: 8
Margin: 24
Gutter: 16

Web 1240–1439

Columns: 12
Margin: 80
Gutter: 40

Components

Mobile-first components that scale up cleanly to TV. Same tile grid, same rail rhythm, same playback controls: sized and spaced for each device’s interaction model. The buttons and fields below are built live from the style guide.

Primary: high emphasis

With icon
Without icon
Disabled

Primary: low emphasis

With icon
Without icon

Secondary and text buttons

Wrap text
Full width
Text button

Mobile number

Default+36
Active+36
Error+36Please enter a valid mobile number

OTP

Default
Active48
Error4812Enter a valid OTP

Artwork ratios

1:1Square tiles: live channels
16:9Landscape thumbnails
2:3Portrait posters

Built for the remote

On a TV there’s no pointer, so focus is the interface: the viewer always has to know where they are, and every press has to land somewhere predictable. Try it below: a slice of the real TV home, in Gigaplay’s own colours, type and artwork.

Arrows move, OK plays, Back steps out.Tap the remote’s arrows to move, OK to play. Artwork from the Gigaplay TV home in Figma.

Same screen, every device

Gigaplay on the web: a featured film hero, 'Starting over again', with Watch now, above Live and Sports rails.

Results

One component source for four screens: the same rail, tile and player, tuned for a thumb, a cursor and a remote, so moving from the phone to the TV feels like staying in the same app. Gigaplay launched in September 2021 and passed 500K Android downloads by October 2023; those figures are about the product, not a measure of my design.

Credits

Design: myself, as the solo contributor on the engagement at HumanX
Client: Gigaplay