Modular TV

Interaction Design - Senior Capstone Project

An exploration into advanced and interactive prototyping, creating a data-driven, fully functional, remote-responsive TV UI.

Team

Cobi Stancik

Services

User Interface

Prototyping
Exhibition Design

Tools

Figma
Protopie
Premier Pro
After Effects

Date

June 2024

Advanced Prototyping


Undertook the exciting challenge of developing a custom TV Interface, focusing on developing my advanced prototyping abilities. Crafting a low-weight, dynamic, data-driven design by integrating APIs, I ensured the content was able to adapt in real time, making the user experience richer and more engaging.

I crafted scalable Ul components, designed intuitive media playback controls, as well as mapping keyboard and remote inputs to enhance accessibility and ease of use. Additionally, I was able to implement a grid navigation system with focus states to improve the browsing experience. This project allowed me to delve deeply into the intricacies of TV Ul design and create an interactive, functional prototype.

This project was also showcased as a senior capstone project at the University of Washington's Jacob Lawrence Gallery, where I incorporated exhibition design to present both the interactive prototype and the development process. The display highlighted the evolution of the custom TV interface, emphasizing advanced prototyping techniques, dynamic media retrieval, and intuitive navigation systems, offering visitors an engaging look into the project’s technical and design innovations.

Process & Storytelling


The process entailed times of extensive debugging due to the inherent complexity of the detailed and dynamic configurations. Additionally, when building, I implemented a focus state debug to run, this helped to identify inaccuracies in the modular states and movements from the key binds, helping recognize both the coloums and rows in which the focus states should be targeting.

Accompanying the prototype, I wanted to document the project's process by creating a YouTube-style video to communicate the project's storyline. It was vital to me to make this video digestible for everyone, regardless of their design background. It was a priority to make the video entertaining and engaging for all types of audiences.

(You can find it below)

Create a free website with Framer, the website builder loved by startups, designers and agencies.