01
// Problem
A knowledge base that nobody trusted
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 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, and inaccessible interactive elements were common.
02
// Pivot
Remove the need for authoring expertise entirely
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.
The HR Article Builder agent live in Microsoft Teams — built in Copilot Studio, available to colleagues across the HR platform
1. Audit the knowledge base
Full content audit across the HR Hub knowledge base — cataloguing structural patterns, accessibility failures, and the range of article types in use.
Output: Typology of 12 distinct article patterns, accessibility failure report, priority matrix for component development.
2. Build the design system
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.
Constraint: Zero JavaScript. All interactivity achieved through CSS-only techniques — checkbox hacks for modals, :target selectors for navigation, focus states for guided tours.
3. Encode content standards into the agent
Comprehensive content framework — voice, structure, heading hierarchy, reading level — encoded as the agent's instruction set so it could make intelligent layout decisions.
Approach: Each component documented with usage guidance, accessibility notes, and when-to-use criteria.
4. Build and test the agent
Agent accepts source documents — policy PDFs, Word docs, legacy HTML — and produces structured, component-based knowledge articles ready for ServiceNow.
Key behaviour: Intelligent component selection — step-by-step guides for processes, info banners for important notices, series indicators for multi-part content.
5. Present to the UX community
Presented to Barclays' broader UX community — framing it 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.
The Design System
29 components.
Zero JavaScript.
Every component constrained by the ServiceNow/Amaze plugin environment — no external scripts, no JavaScript, no third-party dependencies. Accessibility and interactivity achieved entirely through semantic HTML and CSS.
The knowledge article structure wireframe — each component annotated with CSS specifications, mapping directly to the 29-component library
📋
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
❓
Expandable FAQ
CSS-only accordion for progressive disclosure
+ 23 further components covering content cards, related content, tables, media embeds, contact blocks, download patterns, role-based content flags, and more.
03
// Impact
A new model for AI-assisted content production
29
Components in the library
0js
JavaScript used — CSS only
98k
Colleagues across UK, US & India
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.
A finished article in ServiceNow — the CSS-only modal guided tour component in action, no JavaScript, fully WCAG 2.2 AA compliant
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.