Article Hub UI Blueprint

Published on September 25, 2026 Article Hub

The Article Hub is the self-service Knowledge Portal where users search, browse, and read published Knowledge Articles. This blueprint outlines the portal's layout, from the homepage hero and search experience through to the article detail view and footer engagement controls.

This page is organized into five core sections: Homepage Hero & Search, Search Results, Popular Articles, Article Tree & Content View, and Article Footer.

1. Homepage Hero & Search

The homepage opens with a hero section built around discovery:

1. Search Bar — free-text search across Knowledge Articles.
2. Solution Dropdown — a picklist beside the search bar listing all published Solution Names, letting users scope their search to a specific solution.

Below the hero, a Cards Section surfaces the key solutions that have been marked as featured within their Knowledge Articles, giving users quick visual entry points into the portal's main content areas.

Homepage hero with search bar, solution dropdown, and featured solution cards.

2. Search Results

Running a search returns a results list where each match displays:

1. Title — the Knowledge Article title
2. Solution Name — the associated solution
3. Solution Category — the category the solution belongs to
4. Summary — a short summary of the article content

Search results list showing title, solution name, category, and summary for each match.

3. Popular Articles

A Top 10 list highlights the Knowledge Article titles most viewed by users. Each title is clickable and links directly into the article's detail view.

Top 10 most-viewed articles, displayed as clickable titles.

4. Article Tree & Content View

Clicking an article card or title — from the homepage, search results, or Popular Articles list — opens the two-panel Article view:

1. Left Panel — Article search and a navigable article tree view.
2. Right Panel — Article display, including a breadcrumb, the article title, a "Watch Video" button for inline video while reading, the article summary and content, and like/dislike controls.

Two-panel article view: navigation tree on the left, article content and engagement controls on the right.

5. Article Footer

Every article's right panel ends with a footer that surfaces engagement and reference details:

1. Number of views for that article
2. Article Number, for reference
3. Last Updated date — when the article was last modified
4. Like or Dislike buttons

Article footer showing view count, article number, last updated date, and like/dislike buttons.

Quick Reference

Knowledge Article Number: KA-00421