CineAr Play | UX UI VOD Platform Design
Joaquin Cardelli
Core Homepage Design: Focus on crucial user flows, including the "Continue Watching" feature, curated recommendations from the catalog (Most Viewed), and high-visibility sections for successful platform series/special episodes.
High-Fidelity Desktop Mockup: Final visual representation of the CineAr Play platform optimized for the laptop/desktop viewing experience.
Structured UX/UI Design Process: Overview of the complete methodology: Problem Analysis and Research → Action Plan Development → Interactive Prototyping → Iterative Feedback & Correction Cycles → Final High-Fidelity Design.
Information Architecture and User Flowchart: Documentation detailing the structural map of the application, defining user journeys and navigation logic to ensure an intuitive experience.
Typographic Hierarchy and Color Palette: Definition of the visual system, establishing clear typographic scaling and a color palette that ensures accessibility while aligning with the INCAA/CineAr brand identity.
Complete Font Library: Overview of all typefaces selected and implemented across the platform for various content and interface needs.
Onboarding and Welcome Page Design: UX/UI focus on the initial user touchpoint, designing the welcome screen to effectively introduce the platform and guide the user into the experience.
Homepage Access and Featured Banner Strategy: Design of the main entry point to the platform and the dynamic, high-impact hero banner used for promoting the current featured content or release.
Series Content Presentation Format: Detailed design of the screen layout for series pages, focusing on hierarchy for season/episode selection, synopses, and metadata presentation.
Video Player Design and UX: Design and optimization of the core video player interface, focusing on controls, timeline UX, accessibility, and minimal visual intrusion during viewing.
Mobile-First Design Strategy: Overview of the approach to adapting the platform’s experience, content, and functionality for smaller screen sizes.
Mobile Wireframe Iteration: Comparison of Medium-Fidelity (structural) vs. High-Fidelity (visual) wireframes for the mobile design, demonstrating the transition from concept to polished design.
Interactive Mobile Prototyping: Showcase of the clickable prototype for the mobile application, used for user testing and validating interaction flows.
Mobile Video Player UX: Optimization of the core video player interface for the mobile environment, focusing on touch targets, minimal controls, and gesture functionality.
This project represents the end-to-end UX/UI design of the CineAr Play platform for the National Institute of Cinema and Audiovisual Arts (INCAA). The core objective was to optimize the user streaming experience, ensuring intuitive navigation and maximum visibility of the national film catalog.
The process began with a rigorous phase of research and problem analysis, followed by the conceptualization and Flowchart design to define the information architecture and key user journeys.
A mobile-first design approach was implemented, creating medium and high-fidelity wireframes to validate the structure before establishing the final Look & Feel. The scope covered the complete definition of the visual system, including typographic hierarchy, the color palette, and the design of key screens such as the Homepages (with a focus on the "Continue Watching" feature) and the series presentation format.
A central aspect was the optimization of the video player to ensure a fluid viewing experience in both desktop and mobile environments. The final deliverable consisted of exhaustive documentation of the UX/UI system, ready for implementation by the development team, demonstrating the capability to drive a product from ideation through to final design resolution.
Like this project
Posted Nov 3, 2025
End-to-End UX/UI for CineAr Play (INCAA VOD). Full process: research, flowchart, mobile-first design system, and player optimization for content visibility.
Likes
1
Views
3
