Viu Design System
Building a Universal Language: Reverse-Engineering a System for 66M+ Users
When I joined Viu, the platform was struggling with fragmented user experiences across its web, mobile, and TV ecosystems. I led the effort to build a Universal Design System by reverse-engineering legacy features to establish a single, unified source of truth. This wasn't just about visuals; it was about creating a production-ready infrastructure for 66M+ monthly users.
Design Debt: Inconsistent components made maintenance difficult and slowed down new feature launches. It created a lack of consistency and branding across pages and platforms, as if a different designer created each page!
Engineering Friction: A lack of centralized documentation created significant bottlenecks during the handoff process.
Brand Fragmentation: UI patterns varied too much between app, mobile, desktop and TV, weakening the overall brand experience.
Unify the Experience: Align Web, App, and TV platforms under one cohesive, high-polish brand language.
Improve Production Velocity: Provide developers with pre-validated, responsive components and templates to speed up the build cycle and clear confusion.
Scale for Inclusivity: Ensure every component met WCAG accessibility standards for our global, diverse audience.
My "research" was a technical deconstruction of the live product to understand how it was actually being built:
The Audit: I audited the live CSS and existing Figma files to identify recurring patterns vs. "one-off" components.
The Key Insight: I discovered that nearly 40% of UI inconsistencies were caused by a lack of shared "atoms" (colors, spacing, and typography).
The Pivot: This led me to build backwards, starting with the atoms to ensure the new system was compatible with the existing build.
35% Efficiency Gain: Standardized documentation and component logic significantly reduced developer back-and-forth as noted from developer feedback and JIRA ticket completion rates.
Cross-Platform Harmony: Successfully unified the brand identity across Web, App, and TV for the first time.
Accessibility Standards: Integrated WCAG compliance into 200+ components, making the platform more inclusive for millions of users.
Building a system "backwards" required a mix of design intuition and engineering logic. It proved that a truly effective design system isn't just a library of buttons—it's the operational backbone that allows a global product to scale without breaking.