Viva Tv Channels
Viva is a leading TV brand. As part of its channel-wide rebranding, I redesign the website - improving clarity, intuitive navigation and content discovery while aligning the interface with the brand identity.
Final Screens
Landing Page | Product Page
UX Process
The redesign process was grounded in hands-on insight gathered while managing Viva’s social media presence. Through ongoing interactions with viewers, I gained a deep understanding of real user behavior, frustrations, and priorities - especially around navigation and content access.
​
Rather than relying on formal research methods, I drew from hundreds of user messages, recurring requests, and behavioral patterns to shape a content-first, intuitive experience that reflects the true needs of Viva’s audience.
​
The process included:
-
Auditing the site’s architecture and identifying key navigation gaps
-
Restructuring and grouping content based on user logic and channel relevance
-
Translating these insights into clear wireframes and interface design directions
​
These real-world insights shaped a redesign that prioritized clarity, accessibility, and audience logic - resulting in an interface that was not only visually aligned with the brand, but also deeply attuned to how users think, navigate, and interact with the site.
Information Architecture
As part of the UX restructuring, I mapped out Viva’s core content areas and redesigned the site’s information architecture to establish a clearer hierarchy, streamline navigation, and enable faster access to key content.
The sitemap below visualizes the updated top-level structure, reflecting user flow logic and channel-based segmentation.
Design Language
The visual direction of Viva’s website redesign was guided by a desire to balance clarity, emotion, and brand authenticity.
Drawing from Viva’s updated brand materials - provided by the in-house designer - I developed a cohesive design language that supports both usability and aesthetic expression.
Typography & Font Styles
The core typeface served as the foundation for the site’s typographic system.
I developed a consistent hierarchy based on its available weights and adapted it to support different content layers across the interface - from headlines and subheaders to body text and calls to action.
Primary typeface used across all textual elements
of the Viva website.
Text Color Usage
The color palette was derived from Viva’s renewed visual identity and adapted to a clean, content-focused layout. White serves as the dominant text color for optimal contrast against dark backgrounds, while accent tones - sampled from official brand assets - were used for headlines and key UI elements to maintain a vibrant and recognizable experience.
Backgrounds
Two key background visuals were incorporated into the website design. Originally created for Viva’s promotional materials (including TV promos and broadcast campaigns), these assets were used as visual anchors throughout the interface - reinforcing brand familiarity and continuity.
Usability Improvements
As part of the UX optimization process, I implemented a wide range of improvements to enhance the site's clarity, accessibility, and overall user experience:
​
Content Hierarchy Reorganization
Restructured the homepage to reflect user priorities and highlight key actions and content areas.
​
Improved Navigation Structure
Refined the menu and category layout to support faster, more intuitive access to content.
Stronger Call-to-Action Emphasis
Adjusted wording and placement of CTAs to guide user interaction and increase engagement.
​
Enhanced Visual Readability
Applied typography and color refinements to improve text clarity and reduce visual fatigue.
​
Clearer Navigation Flow
Streamlined user paths and reduced friction in content exploration.
​
Cognitive Load Reduction
Organized content blocks more logically, minimized distractions, and grouped elements by user intent.
​
Inclusive Design for Non-Tech Audiences
Tailored the interface for clarity and ease of use, especially for users with limited digital fluency.
​
Accessibility-Aware Adjustments
Ensured sufficient contrast, legible font sizes, and clear structures to support broader user needs.
Live Website (Developed externally)
The final version of the Viva website was implemented by an external team, following the UX architecture and visual direction I designed. While some visual and structural changes were made during production, the published site remains grounded in the core flow, layout logic, and interface concept I originally created - including the section structure, user hierarchy, and branded tone. My wireframes and mockups served as the foundation for the implementation, shaping both the site’s functionality and its overall look & feel.
