Sorting theletters

ಸ್ವಲ್ಪ ತಾಳಿ

Skip to content

Pantaya (via HumanX) · 2022

PantayaTaking a streaming app from phones to TV

Solo designer on the TV app for Pantaya, a Spanish-language streaming platform expanding from mobile and web onto the living-room screen.

Role
Solo designer: design system + UI/UX for the Pantaya TV app
Client
Pantaya (via HumanX)
Timeline
2 months, 2022
Pantaya's TV onboarding screen for linking an account.

  • 1M

    Paying subscribers, reached in the third quarter of 2021

  • 3 screens

    TV, web and phone, from one design system

Source: Hemisphere Media Group releases filed with the SEC, 2021.

Context

  • The problem: Pantaya’s viewers watched on phones and the web. On a TV, a remote replaces tap and scroll, and everything is read from across the room.
  • What I did: solo, in two months, I designed the TV app’s design system and its screens, built around a focus state you can’t miss.
  • The goal: existing viewers could keep watching on the TV without relearning the app.

Pantaya is a Spanish-language streaming service. It already had viewers on mobile and web, and wanted to move onto TV, where the remote replaces tap and scroll. Solo, in two months, I designed the design system and the UI/UX for the TV app, so that viewers felt at home the first time they picked up the remote.

Read the full storyShow less

On TV, everything is read from across the room and reached with four arrows and OK. That meant big type, generous spacing between rails, and a focus state you can’t miss.

Beyond the home screen, the TV work covered onboarding (linking an account with a code, signing in, choosing a plan and paying), content details, search, profiles and the player. The same file carries account management on the phone and the web: profiles, parental controls, subscriptions and downloads.

What I owned

  • The design system for the TV app, alongside Pantaya’s existing mobile and web products.
  • UI/UX end-to-end for the TV surface.
  • A focus-first interaction model: every state designed for the remote, not for touch.

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 Pantaya’s own colours, type and artwork.

InteractivePress the remote, or click the screen and use your arrow keys

Featured

La Reina del Sur

▶ Watch

Continue Watching

Lo Imperdonable
Ran Ghotel
Coco
Julie’s Eyes
Durante La Tormenta

Movies

Terminator
3 Bodas De Más
Secretos
Day of Wrath
Arrows move, OK plays, Back steps out.Tap the remote’s arrows to move, OK to play. Artwork from the Pantaya TV home in Figma.

The Pantaya TV home with the side menu open: Link Account and Login at the top, then Search, Home, Movies, Shows, Language and Settings, over a La Reina del Sur banner and a Continue Watching rail.
TV: the home, with the side menu open
Three phone screens from Pantaya account settings: User Profiles with Dave, Kate and John and Add Profile; Parental Control with a four-digit pin and maturity ratings per profile; and Subscription Details with the next billing date, the card on file, Transaction History and View Invoice(s).
Phone: profiles, parental control and subscription
Pantaya on the web: Parental Control inside account settings, with the pin set, a confirmation toast, and maturity ratings for three profiles.
Web: parental control in account settings

Pantaya · 13 screens

The system

Foundations

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

Colour

One warm gold for everything you can act on, set against a stack of near-blacks. The style guide also has a “Special BG”: a gradient from #2F2A1C to #141414 that warms the background behind the gold.

Brand

  • #FCCC31Primary13.4:1 AAA
  • #000000Secondary

Backgrounds

  • #050505Dark 1
  • #121111Dark 2
  • #383838Dark 31.7:1 low

Text

  • #FFFFFFWhite 120.4:1 AAA
  • #F6F6F6White 218.9:1 AAA
  • #4A4A4AWhite 32.3:1 low

Semantic

  • #E9182DError / alert4.5:1 AA large

Contrast shown against the app background, #050505.

Type

Mulish throughout, on a scale sized for the TV: at 1920 wide, body copy is 24px so it reads from the sofa.

Typeface

Mulish

  • Regular 400
  • SemiBold 600
  • Bold 700
  1. H1
    43/52 · 600    Popular on Pantaya
  2. H2
    38/46 · 600    Popular on Pantaya
  3. H3
    34/41 · 600    Popular on Pantaya
  4. H4
    30/36 · 700    Popular on Pantaya
  5. H5
    26/31 · 700    Popular on Pantaya
  6. Body
    24/30 · 400    Popular on Pantaya
  7. Caption 1
    24/30 · 700    Popular on Pantaya
  8. Caption 2
    21/30 · 600    Popular on Pantaya
  9. Overline 1
    19/23 · 400    Popular on Pantaya
  10. Overline 2
    17/21 · 400    Popular on Pantaya

Grid

TV 1920 × 1080
Columns
12
Margin
150
Gutter
40

Components

The buttons and the phone-number field below are built live from the style guide: 4px corners, SemiBold labels, and gold for anything that moves you forward.

Primary: high emphasis

  • With icon
  • Without icon
  • Disabled

Primary: low emphasis

  • With icon
  • Without icon

Secondary

  • Wrap text
  • Full width

Mobile number

  • Default+ 36
  • Active+ 36
  • Error+ 36

Artwork ratios

  • 1:1Square
  • 16:9Landscape
  • 2:3Portrait

Same screen, every device

Subscription Details on the TV: the profile on the left with Subscription Details, Device Management, User Profile, Parental Controls and Logout, and on the right an offer to switch to the annual plan, the next billing date, the card on file and Cancel Subscription.

Subscription details on each screen: the same information, laid out for a remote, a cursor and a thumb.

Results

A design system and every TV screen, from linking an account with a code through choosing a plan to the player, plus account management on the phone and the web. All of it was built so a Pantaya viewer could move to the TV without relearning the app. I handed it over at the end of the engagement, so I don’t have launch numbers.

Credits

  • Design: myself, as the solo contributor on the engagement at HumanX
  • Client: Pantaya (Lionsgate)