```
The Problem
A knowledge base that nobody
trusted.
Barclays' HR knowledge base on ServiceNow was meant to be the single source of truth for 98,000+ colleagues across the UK, US, and India. In practice, it was a patchwork of inconsistently written, poorly structured, and often inaccessible articles — authored by subject matter experts with no design guidance, no content standards, and no scalable process for turning existing policy documents into usable knowledge.
The problem wasn't effort — SMEs were working hard. The problem was a system that gave them no way to do the job well.
01
Inconsistency at scale
SMEs writing independently produced wildly different article structures, tones, and formats — making the KB feel unreliable and hard to navigate.
02
No conversion pathway
Existing policy documents and guidance notes had no scalable route into ServiceNow format. Authors were copying and reformatting manually — a slow, error-prone process.
03
Accessibility gaps
Without design guidance, articles routinely failed WCAG standards. Poor heading structure, missing alt text, low contrast, and inaccessible interactive elements were common.
The Insight
The bottleneck wasn't the people. It was the absence of a system that could do the heavy lifting — leaving skilled SMEs doing work that shouldn't require their expertise.
— Design principle that shaped the solution
The real opportunity wasn't to train more authors. It was to remove the need for authoring expertise entirely — to build something that could take a source document and produce a design-quality, accessible, on-brand knowledge article with minimal human intervention.
That meant solving three problems simultaneously: building a robust design system for the ServiceNow/Amaze environment, establishing content standards that could be encoded into an AI agent, and creating a workflow that SMEs could actually use without UX support on every article.
The Approach
Design, content, and technology
as one system.
This wasn't a project I could hand off to a developer or outsource to a content team. It required holding design, content strategy, and technical implementation together simultaneously — which meant leading it end to end myself.
Audit the existing knowledge base
Conducted a full content audit across the HR Hub knowledge base — cataloguing structural patterns, accessibility failures, and the range of article types in use. This formed the evidence base for the design system scope.
Output: Typology of 12 distinct article patterns, accessibility failure report, priority matrix for component development.
Build the design system for ServiceNow/Amaze
Designed and built a 29-component library in pure HTML/CSS — no JavaScript — constrained by the Amaze plugin environment. Every component built to WCAG 2.2 AA from the ground up, including interactive elements like modal guided tours and step-by-step navigation.
Constraint: Zero JavaScript. All interactivity achieved through CSS-only techniques — checkbox hacks for modals, :target selectors for navigation, focus states for guided tours.
Encode content standards into the agent
Developed a comprehensive content framework — voice, structure, heading hierarchy, reading level guidance — and encoded it as the agent's instruction set. The agent needed to understand not just what to produce, but why each structural decision mattered for the end user.
Approach: Each component in the design library was documented with usage guidance, accessibility notes, and when-to-use criteria — giving the agent the context to make intelligent layout decisions.
Build and test the KB Article Builder Agent
Built the agent to accept source documents — policy PDFs, Word docs, legacy HTML — and produce structured, component-based knowledge articles ready for ServiceNow. Tested across a range of real HR content types including payslip guidance, annual leave policy, and onboarding materials.
Key behaviour: The agent selects components intelligently based on content type — using step-by-step guides for processes, info banners for important notices, and series indicators for multi-part content.
Present to the UX community
Presented the KB Article Builder Agent to Barclays' broader UX community — framing it not just as a productivity tool, but as a model for how AI and design systems can work together to raise quality at scale without increasing headcount.
Reception: Very positive — generated significant interest and follow-up conversations across multiple teams about applying the same approach to other content workflows.
The Design System
29 components. Zero
JavaScript.
Every component was constrained by the ServiceNow/Amaze plugin environment — no external scripts, no JavaScript, no third-party dependencies. Accessibility and interactivity had to be achieved entirely through semantic HTML and CSS.
📋
Series Indicator
Multi-part content navigation with progress state
🗂️
Step-by-Step Guide
Sequential process walkthroughs with numbered states
🔔
Accessible Banners
Info, warning, success and critical alert variants
🎯
Modal Guided Tours
CSS-only modal overlays for contextual guidance
📌
Sticky Navigation
In-article jump navigation for long-form content
🃏
Content Cards
Structured information blocks with consistent hierarchy
❓
Expandable FAQ
CSS-only accordion for progressive disclosure
🔗
Related Content
Cross-linking patterns for knowledge graph navigation
+ 21 further components covering tables, media embeds, contact blocks, download patterns, role-based content flags, and more.
29
Components in the design library
0js
JavaScript used — CSS only
98k
Colleagues across UK, US & India
AA
WCAG 2.2 compliance standard
Outcomes
What it changed.
🚀
A new model for AI-assisted content production
Demonstrated that AI and design systems can work together to produce quality-controlled, accessible content at scale — without requiring design expertise from authors.
📐
Design system adopted as the KB standard
The 29-component library became the reference standard for knowledge article production across the HR Hub platform.
♿
Accessibility built in, not bolted on
Every article produced through the agent inherits WCAG 2.2 AA compliance by default — removing accessibility as a post-production concern.
💬
Significant cross-team interest
Presentation to the Barclays UX community generated follow-up conversations across multiple teams about applying the same model to other content workflows.
Reflection
What I learned about
systems thinking.
This project confirmed something I'd long suspected: the most impactful design work happens at the intersection of design, content, and technology — not within the boundaries of any single discipline.
Building the design system without JavaScript forced a level of creative constraint that ultimately produced better, more robust components. The limitation became the principle.
And encoding design decisions into an AI agent's instruction set — making the system understand not just what to produce but why — was a genuinely new way of thinking about design system documentation. It turns out the best way to write component guidance is to write it for a machine. The clarity that requires benefits human authors just as much.
```