Firefox OS TV
I worked within the Mozilla Connected Devices team to design the visual and motion experience for Firefox OS TV. This platform was a core component of Panasonic’s premium 4K lineup. My work was focused on creating a rhythmic living room experience for the 10-foot UI that prioritized ease of use and visual clarity. The platform launched globally and powered the entire Panasonic 4K TV lineup in over 100 countries.
Team
Mozilla Firefox
Timeline
201
Role
Visual & Motion Designer
The Challenge
A TV is a shared device viewed from across the room. We had to move away from mobile-first thinking and address three specific practical problems:
The Visual Context
Elements had to be large and clear enough to be read from 10 feet away.
The Emotional balance
A TV is for relaxation. The UI shouldn't feel busy or demanding like a phone; it should be simple and get out of the way of the content.
The Challenge
A TV is a shared device viewed from across the room. We had to move away from mobile-first thinking and address three specific practical problems:
The Visual Context
Elements had to be large and clear enough to be read from 10 feet away.
The Emotional balance
A TV is for relaxation. The UI shouldn't feel busy or demanding like a phone; it should be simple and get out of the way of the content.
The Visual Language: Softness for the Home
I looked to nature for inspiration, specifically the fluid and soft shapes of water and sea foam. By moving away from the rigid grids of web hard edge and toward organic, circular bubbles, I created a UI that felt like a natural part of the living room, floating alongside the content. These forms turned the television from a mechanical tool into a living presence that felt light, approachable, and non-intrusive.
The Visual Language: Softness for the Home
I looked to nature for inspiration, specifically the fluid and soft shapes of water and sea foam. By moving away from the rigid grids of web hard edge and toward organic, circular bubbles, I created a UI that felt like a natural part of the living room, floating alongside the content. These forms turned the television from a mechanical tool into a living presence that felt light, approachable, and non-intrusive.
The Motion Logic
I developed the Wave Concept to give the system a subtle sign of life. By tuning the movement to a relaxed breathing rhythm, the interface signaled it was awake without needing to be loud. This fluid motion carried over into the transitions, turning navigation into a rhythmic experience rather than a series of mechanical tasks. The UI maintained a distinct character while remaining secondary to the 4K content.
The Motion Logic
I developed the Wave Concept to give the system a subtle sign of life. By tuning the movement to a relaxed breathing rhythm, the interface signaled it was awake without needing to be loud. This fluid motion carried over into the transitions, turning navigation into a rhythmic experience rather than a series of mechanical tasks. The UI maintained a distinct character while remaining secondary to the 4K content.
Impact
Successfully shipped on Panasonic Smart TVs, launching in Japan and several Asian countries. Proved that web platforms could deliver high-quality experiences across different device contexts.
Post-launch research with actual users revealed areas for improvement: smoother motion transitions, better education around hidden functions, enhanced content discovery. We conducted several rounds of field research to refine the experience based on real usage.
Impact
Successfully shipped on Panasonic Smart TVs, launching in Japan and several Asian countries. Proved that web platforms could deliver high-quality experiences across different device contexts.
Post-launch research with actual users revealed areas for improvement: smoother motion transitions, better education around hidden functions, enhanced content discovery. We conducted several rounds of field research to refine the experience based on real usage.
What I Learned
Designing for emerging platforms means you can't just adapt existing patterns. You need to understand the context completely. The same person has different needs 10 feet from a TV versus holding a phone.
Motion became more than transitions. It set the emotional tone for the entire experience. When done right, it communicates the product's character and makes the interface feel alive without demanding attention.
Working across platforms taught me that great design isn't about consistency for consistency's sake. It's about understanding what changes and what stays the same when context shifts.
What I Learned
Designing for emerging platforms means you can't just adapt existing patterns. You need to understand the context completely. The same person has different needs 10 feet from a TV versus holding a phone.
Motion became more than transitions. It set the emotional tone for the entire experience. When done right, it communicates the product's character and makes the interface feel alive without demanding attention.
Working across platforms taught me that great design isn't about consistency for consistency's sake. It's about understanding what changes and what stays the same when context shifts.
Other Cases
Other Cases
