Skip to content

JHONATAN OLIVEIRA®

PORTFOLIO / 2026

FRONTEND / PRODUCT / DESIGN

Engineering, direction and digital craft in one continuous system.

ISSUE / 01

Project archive

02 / Case study

Landing Page / 2026

RA Play - site

RA Play website: streaming platform.

RA Play - site
J / O — Landing Page

Case index

01 — 04

Discipline
Landing Page
Year
2026
Status
Completed
Visual records
04

Technologies

Next.jsTypeScriptTailwindCSSshadcn/ui

RA Play — Custom Streaming Platform with Unique Visual Identity

The RA Play website was developed as the materialization of a project that had been built from the ground up: the visual identity and UI Design of the platform, created earlier in Figma.

More than just “coding an interface”, the challenge was transforming a solid visual concept into a functional product, maintaining aesthetic consistency, navigation fluidity, and a sense of a real streaming platform.

Project Context

Before the website development, RA Play already had:

  • Defined visual identity

  • Color system, typography, and components

  • Complete UI Design thought out for a streaming experience

The development project started from this material, with the goal of faithfully respecting the design while also adapting it to the real needs of the web.

The Challenge

Streaming platforms require more than just a beautiful interface. They need:

  • To organize a large volume of visual content

  • To create a clear hierarchy between highlights, categories, and titles

  • To offer a fluid, intuitive, and familiar navigation experience

  • To convey a sense of a robust and professional product

The challenge was to balance visual impact, usability, and performance, without losing the original design.

Approach

The website development focused on:

  • Fidelity to the UI Design created in Figma

  • Clear componentization of sections and layouts

  • Well-defined visual hierarchy for highlighted content

  • Experience inspired by established streaming platforms, without losing its own identity

Each technical decision was guided by the question: does this maintain the experience thought out in the design?

UX and UI Decisions

  • Strong visual emphasis for covers and main content

  • Consistent use of the previously created visual identity

  • Layouts designed for scannability and content discovery

  • Simple navigation, reducing friction and visual noise

The focus was to create an experience that felt familiar to the user, but also unique within the RA Play proposal.

Result

The project delivers:

  • A visually consistent platform from concept to code

  • A fluid experience aligned with the streaming universe

  • A website that demonstrates mastery of design and development together

  • A solid foundation for future evolution of the platform

This project highlights the importance of thinking product from end to end, where visual identity, UI Design, and development are not isolated steps, but parts of the same process.

04 / Visual evidence

04 ITEMS

The work, in context.

Screens, motion and supporting artifacts that show how the system behaves beyond a static cover.

Selected work / archive

END / CASE

One case is only one chapter.

Return to the archive to see other interfaces, products and experiments built with the same attention to product, visual direction and frontend engineering.

View all projects