Viva Website
​​
​
Viva is a multi-channel TV brand specializing in international drama series, with a strong digital presence across TV, web, and social platforms.
​
As part of a broader rebranding initiative, I led the full UX redesign of Viva’s website to improve clarity, simplify navigation, and enhance content discoverability.
​
The original site suffered from fragmented structure and unclear hierarchy. I restructured the information architecture, grouped content based on user intent, and aligned the updated interface with Viva’s new brand identity - creating a streamlined, accessible and consistent user experience.
Project Overview
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.
Wireframes
The wireframing phase focused on validating layout logic, content hierarchy, and user flow - especially around key actions like discovering new shows, navigating between channels, and finding episode information. This wireframe was the original one used to guide design decisions before applying the visual system.
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.
Imagery Style
The visual imagery throughout the site supports a narrative-driven, emotionally immersive experience, consistent with Viva’s broadcast identity. Image selection and cropping were handled manually to ensure relevance and alignment with layout and tone.
​
All images were selected and edited from official Viva materials to reflect tone, tension, and emotional presence.
Visual direction was based on three guiding principles:
​
Dramatic, high-contrast aesthetic
Inspired by Viva’s TV identity - using deep shadows, rich tones, and clean composition.
Emotion, intensity, and connection
Faces, body language, and framing were chosen to highlight emotional tension and character dynamics.
Cropped to maximize impact
All images were manually adjusted to create clarity, hierarchy, and engagement within the layout.
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.
Final Screens
Dynamic Popover with Content Switching
Who Are We Page
Our Series Page
Series and Summaries Page
Membership Page | Landing Page
Channel Page | Product Page
Product Page's Hamburger Button
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.
