Knowledge Article Template - Design Case Study

Prioritizes clarity and consistency, guiding users through content with intuitive structure, headings, and embedded search and navigation tools. By aligning layout and interaction patterns with an intuitive design system, the experience reduces cognitive load and helps users quickly find and absorb relevant information.

Hero image

Knowledge Article Template - Design Case Study

Prioritizes clarity and consistency, guiding users through content with intuitive structure, headings, and embedded search and navigation tools. By aligning layout and interaction patterns with an intuitive design system, the experience reduces cognitive load and helps users quickly find and absorb relevant information.

Hero image

Knowledge Article Template - Design Case Study

Prioritizes clarity and consistency, guiding users through content with intuitive structure, headings, and embedded search and navigation tools. By aligning layout and interaction patterns with an intuitive design system, the experience reduces cognitive load and helps users quickly find and absorb relevant information.

Hero image

Knowledge Article Template - Design Case Study

Prioritizes clarity and consistency, guiding users through content with intuitive structure, headings, and embedded search and navigation tools. By aligning layout and interaction patterns with an intuitive design system, the experience reduces cognitive load and helps users quickly find and absorb relevant information.

Hero image

Understanding the legacy experience

Intel's knowledge articles provide critical self-help content for millions of users, from consumers troubleshooting hardware to developers integrating Intel technologies. However, the existing article template was outdated, hard to read and inconsistently implemented across products and platforms. This case study details the process of redesigning the Knowledge Article Template to deliver a cleaner, more accessible and scalable experience that supports both users and content authors alike.

Poor readability

Articles were often dense with technical information, presented with little formatting or hierarchy.

Outdated UI

The template was not as responsive as intended, making it less mobile-friendly. Over time, enhancements were done to the template, causing it to be fragmented from Intel's modern design standards.

Inconsistent implementation

Different teams were customizing the template in conflicting ways, leading to large swaths of inconsistency.

Limited authoring flexibility

Content creators and page authors lacked modern, standardized, components to organize information effectively.

Inconsistent implementation

Different teams were customizing the template in conflicting ways, leading to large swaths of inconsistency.

Limited authoring flexibility

Content creators and page authors lacked modern, standardized, components to organize information effectively.

The goal: Build a user-centered MVP

The redesign aimed to create an MVP experience that would improve readability and user comprehension, provide structure and consistency across all articles and empower authors with modular, flexible components.

Discovery & planning

We began by auditing the existing experience and gathering both qualitative and quantitative data. From this research, we defined key design principles: Scannability, consistency, modularity and build user trust.

Stakeholder Input

We worked with support, localization, engineering and global content teams to understand business needs and authoring workflows for an authorable template and a Salesforce CRM driven template.

Content Audit

We analyzed hundreds of existing articles to identify common formats, frequent pain points and opportunities for reusable content blocks.

User Feedback

Input from Intel’s customer support channels and surveys highlighted where users struggled with the current format.

Design System Audit

We identified areas where the article experience diverged from Intel’s evolving modern design system, web standards and accessibility goals.

User Feedback

Input from Intel’s customer support channels and surveys highlighted where users struggled with the current format.

Design System Audit

We identified areas where the article experience diverged from Intel’s evolving modern design system, web standards and accessibility goals.

UX design process

The UX design process for creating a new Knowledge Article Template began with auditing existing content and gathering feedback from both authors and readers to identify usability gaps. We then developed and tested a new template focused on readability, consistency and accessibility, ensuring users could quickly scan, understand and act on the information.

Wireframing

We created low fidelity wireframes to explore a content-first experience with modular components.

Expandable Sections: Users could quickly scan the page, expanding only what was relevant to them.

Visual Hierarchy: Clearly defined headers, callouts and code blocks helped structure complex, developer focused content.

Contextual Support: Related articles, support links and feedback modules were designed to increase engagement and help users take successful next steps.

Visual Design

The final design incorporated our Atomic Design System with prioritized clarity, accessibility, and user friendly content.

Typography and Spacing: Improved line lengths, a universal font ramp for all breakpoints and standardized padding made reading long articles easier.

Component Library: Designed reusable content modules (alerts, troubleshooting steps, code samples, image captions, etc.) for authors.

Mobile Optimization: The layout was restructured for easy navigation on smaller screens, including collapsible sections and improved readability.

Accessibility

We conducted a full, thorough WCAG 2.1 compliance review, with features like:

ARIA labels and semantic HTML.

Keyboard navigation support.

Screen reader testing to ensure all users can navigate the experience.

Sufficient contrast and focus indicators.

Documentation

To streamline development and remain consistent with the design, we created robust documentation including:

UX specifications for all viewports and interaction states.

Figma file annotated with behavior notes and variant usage.

Authoring guidance and content best practices.

Dev handoff with behavior and accessibility annotations.

Accessibility

We conducted a full, thorough WCAG 2.1 compliance review, with features like:

ARIA labels and semantic HTML.

Keyboard navigation support.

Screen reader testing to ensure all users can navigate the experience.

Sufficient contrast and focus indicators.

Documentation

To streamline development and remain consistent with the design, we created robust documentation including:

UX specifications for all viewports and interaction states.

Figma file annotated with behavior notes and variant usage.

Authoring guidance and content best practices.

Dev handoff with behavior and accessibility annotations.

Takeaways

The Knowledge Article Template redesign demonstrated how even behind-the-scenes infrastructure like content templates can dramatically impact the end-user experience. Through thoughtful design, stakeholder alignment and accessibility-first thinking, we delivered a modern, modular and scalable system that improves comprehension, trust and efficiency across Intel’s entire support ecosystem.

99

Accessibility score

100

Best practices score

92

SEO score

99

Accessibility score

100

Best practices score

92

SEO score

99

Accessibility score

100

Best practices score

92

SEO score

Together, let's have some fun and create something great.

© Kevin Shalkowsky 2025 - All rights reserved

© Kevin Shalkowsky 2025 - All rights reserved

Together, let's have some fun and create something great.