Front End / UX
Optimising TV UX: an HTML5 framework for flagship set-top box hardware
Role
Ux & Front-End Development Lead
Timeline
2014
Tools
Balsamiq, HTML5, CSS3, JavaScript
Deliverables
Wireframes, Interface Architecture, Desktop Hardware Emulator, Production Web Application
Overview
Oregan Networks specialised in delivering modern TV streaming experiences on legacy or low-powered hardware, alongside launching a flagship application for updated set-top boxes and TVs. The technical architecture relied on a headless, transparent Chromium-based browser operating over a native HTML5 video element. A custom JavaScript-to-hardware API allowed the browser interface to control underlying hardware components.
The problem
Performance & design debt: the user interface was visually outdated and suffered from poor performance. It had been designed without development input, resulting in layouts that did not align with the constraints of the Chromium browser or the processing limitations of the hardware.
Cross-platform fragmentation: the system lacked an accompanying mobile companion strategy. The existing design was not equipped to handle multi-screen experiences, and supporting secondary screens would require entirely separate design and development efforts.
Development bottleneck: developers could not run or test the interface without deploying an embedded software update to the physical hardware box, creating an operational bottleneck that slowed down the entire product lifecycle.
Siloed knowledge: the previous solo designer had departed the company, leaving behind an undocumented system with significant design debt.
the old underperformant interface
The solution
Given the tight timescales for a working prototype, a complete wholesale redesign was impossible. I proposed a phased strategy: auditing the interface to identify performance wins and adjusting legacy assets to fit the updated aesthetic, whilst redesigning and rebuilding critical core components entirely. Crucially, to solve the development bottleneck, I led the creation of an offline desktop JavaScript Emulator that mocked the hardware API, successfully decoupling UI development from physical hardware constraints.
The approach
wireframes for mobile and tv
Stakeholder alignment: internal teams were heavily invested in the legacy design they had built. I utilised interactive wireframes and competitor benchmarking (Sky, Netflix, Amazon) to demonstrate where the current user experience introduced friction and how the new architecture could compete in the market.
Performance-driven UI: designing for TVs requires strict resource management. I used hardware-accelerated CSS animations and re-developed the UI to reduce screen repaints and layout thrashing. I implemented animation and feature toggle controls so that the interface could scale down smoothly onto lower-spec hardware.
Responsive TV & mobile architecture: we started to re-develop the front-end architecture to support responsive layout scaling. While prioritising the television screen experience, the underlying codebase was re-built to port easily to secondary mobile companion screens without requiring a separate codebase.
Simultaneous design & tech: we worked in tight, iterative cycles. while the team refactored the visual language to look modern and cohesive, we spent equal time checking performance to ensure design choices never compromised the experience.
The impact
the updated tv interface
Hardware efficiency: optimised rendering delivered visible performance gains across hardware, allowing some animations to run smoothly even on low-powered, legacy consumer boxes.
Velocity: the introduction of the desktop hardware emulator transformed development workflows, allowing prototypes to be built and tested offline before deploying code to physical hardware.
Stakeholder management: high-fidelity prototyping, updated visual design and noticeable performance increases secured immediate praise and buy-in from executives.
concept mobile application designs
Takeaways
Empathy for the development pipeline: UX leadership extends beyond research and wireframes; it requires optimising how those screens get built. Selling the value of the offline emulator to executives was the key to gaining the trust needed to overhaul the UX and UI.
Proactive QA integration: when changing core interface components and navigation, automated testing infrastructure can break. I learned the importance of onboarding the QA team early by delivering wireframes and interactive prototypes well ahead of release, allowing them to rewrite their automated remote-control test scripts in advance.