A Rive UI system for a physical robot, using variables and code to dynamically drive real-time facial expressions and medical metrics. watch it live on drrobot.ae

Description

For the Dr. Robot project, I designed a dynamic visual system that brings the robot’s face and interface to life in real time as it interacts with visitors on the exhibition floor. Instead of using videos or rigid animations, I created the designs to automatically adapt to physical human interactions. The moment a visitor engages with Dr. Robot, its display seamlessly switches between welcoming facial expressions and live medical displays. This gave the dev team an incredibly lightweight, ultra-smooth system that creates a memorable, human experience for guests while making future software updates effortless.

The Challenge

The primary obstacle of this project stemmed from its unique operational environment: Dr. Robot functions in real-time across busy exhibition floors, constantly navigating chaotic physical spaces and responding to unpredictable, spontaneous human interactions.
In such a dynamic setting, conventional UI solutions fail. Standard timeline-based animations and traditional click-driven state machines cannot anticipate or fluidly adapt to real-world events. The display couldn't rely on static video loops or standard touch menus; it needed to operate as an expressive, living digital character and continuous diagnostic interface.
To deliver a truly interactive experience, the project required an ultra-lightweight, high-performance motion system capable of directly communicating with the robot’s hardware logic. The UI had to instantly listen to physical sensor triggers and update facial expressions, status loaders, and health metrics with zero latency.

The Solution

Engineering a Data-Driven Motion Architecture To solve this, I created a modular UI system in Rive built entirely around dynamic data binding. Instead of hardcoding click events or complex timeline triggers, I decoupled the visual design from the interaction logic, exposing clean state machine parameters (such as expNum) directly to the backend development team.
When physical sensors detect a human interaction, the developer updates a single numeric input to instantly trigger corresponding facial expressions, health metrics, and diagnostic loaders in real time. This eliminated rendering latency, kept file sizes lightweight, and gave developers full flexibility to adjust hardware behaviors without needing to modify the animation files.

Behind The Scenes

Mohammad Alhelany

Motion Graphic Designer

https://www.behance.net/mohammad-alhelany

https://wa.me/message/ZS36J7X2VXVNA1

✉️ [email protected]

https://www.linkedin.com/in/mohammad-alhelany/

https://www.instagram.com/mohammad.alhelany?igsh=a3p0YW1yMmVjczEw