Redesigning The Blog Experience Into A Scalable CMS-Driven Content System

Overview

The goal of this project was to redesign and restructure the blog experience of Chata.ai into a scalable, CMS-driven content system.

The clients had a clear vision supported by references and examples. My role was to translate these expectations into a structured, consistent system aligned with the existing SaaS design language.

While the blog contained valuable content, it lacked consistency with the rest of the product and suffered from weak hierarchy, suboptimal reading flow, and no structured topic system for content organization and navigation.

The objective was to redesign the blog UI and build a flexible CMS architecture supporting multi-category content, improved discoverability, and smoother navigation between topics and articles.

The Challenge

The blog experience was visually and structurally disconnected from the main SaaS product, creating inconsistency across the user experience.

Article layouts were not optimized for reading: hierarchy was unclear, headings were too dominant, and imagery disrupted content flow.

The main challenge was structural rather than visual.

The clients wanted a topic-based CMS system where articles could belong to up to two categories, along with a persistent navigation system enabling users to explore topics within the reading experience.

This required a seamless experience where navigation between topics and articles felt continuous rather than like page transitions.

Additionally, the blog index needed category filtering while maintaining clarity and simplicity.

The challenge was to design a scalable CMS system that:

supports multi-category content
enables topic-based navigation across articles
maintains seamless browsing without breaking user flow
integrates into a consistent SaaS design system

Strategic Approach

The project started by translating the client’s references into a structured system aligned with the existing product.

I analyzed the existing blog to identify friction in content consumption and navigation, then reframed the experience as a connected system rather than isolated pages.

The work focused on:

aligning UI with the SaaS design system
improving article readability and hierarchy
restructuring the blog index for category-based browsing
building a scalable CMS-driven topic architecture

A key focus was designing navigation logic that allowed users to explore topics without feeling page transitions, preserving continuity across the experience.

The CMS structure became the backbone of both navigation and content organization, enabling scalable and flexible categorization.

Solution

CMS Topics System & Unified Navigation

A scalable CMS-driven topic system was built to structure the entire blog.

Each article can belong to up to two topics, enabling flexible categorization without rigid constraints.

This system powers both navigation and discovery, allowing users to browse content through a unified topic layer.

A dynamic filtering system on the blog index reinforces this structure, creating a continuous browsing experience across articles and topics.

Article Page Hierarchy Redesign

The article page was redesigned to improve readability and content flow.

Hierarchy was refined to reduce visual competition between title, imagery, and body content, creating a clearer reading structure.

Typography and spacing adjustments improved readability and established a smoother content rhythm.

The result is a more focused reading experience aligned with the SaaS design system.

Blog Cards & CMS-Driven TOC

Blog cards were redesigned to improve scanability and emphasize article titles over metadata.

Supporting information like date and reading time was reduced in visual weight to improve clarity.

The reading experience was enhanced with a CMS-connected dynamic Table of Contents (TOC), implemented via code.

The TOC adapts automatically to article structure, enabling easier navigation in long-form content while remaining scalable across all CMS entries.

Outcome

The blog is now a structured and scalable content system fully integrated into the Chata.ai SaaS experience.

It is no longer a disconnected layer, but a cohesive extension of the product with consistent design and clear information architecture.

The CMS-driven topic system enables flexible categorization and improves content discoverability, while unified navigation ensures a seamless browsing experience.

Article readability has been significantly improved through clearer hierarchy and layout refinements.

The blog index is now easier to scan and navigate, with stronger emphasis on content relevance.

Finally, the CMS-connected TOC improves usability for long-form reading and reinforces structural clarity across all articles.

Key Improvements

Scalable CMS-driven topic system (up to 2 categories per article)

Unified navigation logic across topics, articles, and index
Improved content discovery through category filtering
Redefined article hierarchy for better readability
Enhanced blog cards for faster scanning
CMS-integrated dynamic Table of Contents (TOC)
Stronger visual consistency with SaaS design system
Improved reading flow and reduced visual noise

DESCOVER MORE PROJECTS

Discover the artistry and innovation that have earned us accolades and a reputation as leaders in the digital design industry.