Viu Design System
Viu Design System
Building a Universal Language: Reverse-Engineering a System for 66M+ Users
Building a Universal Language: Reverse-Engineering a System for 66M+ Users
UI/UX Design, Platform Unification, Accessibility, Responsive Design
UI/UX, Brand & Web Design, Design System
April 2022-July 2022
April 2022-July 2022
Platform: App, Mobile & Desktop Web, Television
Platform: App, Mobile & Desktop Web, Television
Tools: Figma, Material Design, Atomic Design, Inspect Tools, Confluence
Tools: Figma, Google Analyrics, Hotjar, Lookback
Summary
Summary
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.
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.
Problem
Problem
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.
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.
Goals
Goals
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.
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.
Research & Insights
Research & Insights
My "research" was a technical deconstruction of the live product to understand how it was actually being built:
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.
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.
Solution & Process
Solution & Process
Atomic Foundations: I deconstructed legacy screens into a clean hierarchy of atoms, molecules, and organisms in Figma. After creating this base foundation that I could work with, I proceeded to create a universal system that could work across all platforms.
Universal Architecture: I scaled these elements to work across drastically different aspect ratios, ensuring the "TV experience" felt like the same brand as the "web experience" and the "app experience."
Technical Handoff: I implemented strict naming conventions and logic-based documentation on Figma and Confluence, acting as a bridge between design and engineering.
✨ Content Tagging & Prioritization
Refined CMS keyword tagging to support partial queries and prioritized program titles.
Designed an "All Results" page to streamline visibility across content types.
✨ Multi-language Support
Built a workaround for multi-database limitations.
Introduced a chip-style button that detects alternate languages and redirects users to the appropriate language database.
✨ Search UI & No-Results Guidance
Designed predictive, visually guided input with autocomplete and highlighted matching terms.
Redesigned no-results pages to offer personalized suggestions and trending topics.
✨ Prototyping & Testing
Created high-fidelity mockups for desktop and mobile.
Conducted usability tests internally and externally.
Iterated based on feedback and technical feasibility discussions with developers.
Viu Foundational Design System on Figma
Impact & Metrics
Impact & Metrics
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.
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.
Reflection
Reflection
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.
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.