Website
View Detail
TNN NEWS
Project Overview
TNN is a 24-hour Thai news broadcasting network delivering real-time news across politics, business, and global affairs.
This project focused on redesigning the TNN website for both desktop and mobile platforms to modernize the user interface, improve usability, and ensure alignment with organizational standards.
Timeline
3 Months
Dec 2024 - Feb 2025
My Role
UX/UI Designer
UX Research, UX improvements and feature implementation
Conducted UX research and implemented usability improvements and new features
Analyzed existing UX/UI issues across core screens
Redesigned key user flows and interface components
Extended the existing design system with new UI patterns
Ensured visual consistency and improved overall usability
Empathize
Research & Insights
From reviewing core news pages, content structures, and navigation flows across desktop and mobile, the following insights were identified:
01
News categories were difficult to scan quickly due to dense layout structures
02
Homepage prioritized volume of content over clarity
03
Article pages lacked clear visual hierarchy for headlines, metadata, and related content
04
Mobile reading experience felt crowded and text-heavy
User Personal
Problems
Problem 01 – Structural & Navigation Issues
Inconsistent UI patterns across pages
Unclear content hierarchy and navigation structure
Problem 02 – Reading Experience Gaps
Weak visual hierarchy on article pages
Related content not strategically positioned
Limited guidance toward next-read articles
Define & Ideate
UX Strategy & Key Decisions
The redesign focused on clarity, scalability, and content discoverability.
01
Reorganized homepage layout to prioritize breaking news and trending topics
02
Simplified top navigation and standardized category structure
03
Redesigned article layout with stronger typographic hierarchy
04
Introduced clearer related-content modules to increase engagement
05
Extended the design system to ensure consistency across future pages
User Journey
Goal Statements
Goal 01 – Improve News Consumption Experience
Restructure homepage to prioritize breaking and high-impact news
Enhance article readability with stronger typographic hierarchy
Optimize navigation flow across desktop and mobile
Reduce cognitive load during content browsing
Goal 02 – Build Scalable & Consistent Design Foundation
Establish consistent UI patterns across all news categories
Align interaction behaviors across similar page types
Extend and refine the existing design system
Ensure long-term scalability for future feature releases
Prototype & Test
Low - Mid Wireframes
The initial phase focused on redefining core content structures and validating layout directions.
Reorganized homepage content blocks to improve scanning behavior
Explored alternative navigation structures (top nav vs segmented categories)
Simplified article layout structure to emphasize headline and body content
Prioritized mobile-first layout decisions
The goal at this stage was to validate clarity before applying visual styling.
Typography & Theme Color
High-Wireframes
After validating structural improvements, the designs were refined with visual and interaction details.
Strengthened content hierarchy using typography scale and spacing system
Introduced standardized card components for news listings
Redesigned article template with improved metadata positioning
Implemented clearer related-content modules to encourage deeper engagement
Ensured consistency with brand color, grid system, and UI standards
The final designs balanced editorial needs, business objectives, and user behavior patterns — creating a modern yet trustworthy digital news experience.
