Overview
This project was created as a self-initiated case study to explore how animated interfaces can tell stories in high-stakes environments. It showcases a fully designed and animated fictional UI system, combining system thinking, motion design, and automation to simulate real-time behaviors and create a cinematic experience.
Challenge
I wanted to create a case study that demonstrated both my design system thinking and motion design expertise in VFX production. The challenge was to build a project from scratch that felt realistic and engaging, while showcasing creative storytelling and technical execution.
Solution
I developed a fictional UI design system in Figma, creating reusable components and consistent design rules. I animated it in After Effects, where I implemented automation through JavaScript expressions to centralize controls, streamline animation, and simulate real-time interface behaviors.
The narrative was brought to life in a final 35-second video.
Creative Direction
The design language draws on technical and cinematic fictional UI aesthetics: dark theme, sharp geometry, layered panels, alert messages, and real-time charts. Animation played a key role in visualizing urgency and escalation, while transitions and motion behaviors were created to feel functional and cinematic at the same time.
Workflow Highlights
The project combined design and motion into a seamless workflow. I started by designing screen layouts and building components in Figma, ensuring consistency and scalability. These components were then animated in After Effects, where I used JavaScript expressions to automate behaviors, centralize controls, and simulate real-time system responses. The workflow allowed for quick iteration, precise timing, and a smooth transition from static design to dynamic storytelling in the final video.
