AI Enablement Hub

The AI Enablement Hub is an internal SharePoint intranet site I built and own. It is the central resource for AI tool updates, enablement content, campaigns, and internal communications across the firm's Marketing and Communications function, serving approximately 2,000 colleagues globally, plus a dedicated sub-audience of licensed users of one AI platform.

My role spans the full program: information architecture, UX design, HTML and JSON development, internal communications, content strategy, and stakeholder coordination. Two workstreams sit at the center of this portfolio piece. Each is distinct technically, but both serve the same program goal: making AI adoption real and accessible for M&C colleagues at scale.

1. Workstream 1

   Custom module design

   Custom HTML module design for the hub: a system of branded, responsive modules embedded in SharePoint via the Embed web part, built without design tools or developer support.

2. Workstream 2

   The AI Library

   A dynamically filtered gallery of 170+ real colleague AI examples, built using SharePoint native capabilities most teams never find, with a full content governance model alongside it.

I used Claude as the primary production tool throughout this program: not as a search engine or writing assistant, but as an iterative build partner for tasks that would otherwise require developer skills. Every structural, design, and content decision was mine.

1. 1

   Define the requirement

   Translate a business or design need into a precise brief in plain language.

2. 2

   Generate and review

   Review HTML, CSS, or JSON output against specs, copy rules, and brand guidelines.

3. 3

   Test in SharePoint

   Upload, embed, and verify behavior in the live environment. Feed results back.

4. 4

   Document findings

   Confirmed behaviors go into the Maintenance Guide and project memory, so nothing gets rediscovered next session.

Before a single module was built, the site needed a clear information architecture. The central question: what does a 2,000-person M&C function actually need to get enabled on AI, and in what order do they need it?

The answer shaped every page. Colleagues fall into three groups: those who need orientation ("what tools do I have access to?"), those who need to build skills ("how do I get better at this?"), and those ready to go deeper ("show me real examples and let me contribute my own"). The hub is structured to serve all three without forcing anyone down a linear path.

1. Principle

   Organizing principle

   Every page answers a specific question a colleague would actually ask. Not "here is information about AI," but "where do I start?", "what tools do I have?", "how do I get better?", "what has my team already built?"

2. Audiences

   Audience segmentation

   The full hub serves ~2,000 M&C colleagues. A tool-specific page serves the smaller group of licensed users of that platform and carries deeper technical content, use case examples, and session replays scoped to that tool.

Each page has a defined job. The homepage routes; the content pages deliver. The architecture is designed so a first-time visitor can orient in under 30 seconds, and a returning colleague can navigate directly to what they need.

1. 01

   Homepage as router, not content page

   The homepage doesn't try to do everything. It orients, surfaces what's new, and routes colleagues to the right place. The "Where do you want to go?" 4-panel navigation is the primary wayfinding element, designed to answer the most common first question without requiring any scrolling.

2. 02

   Task-first, not tool-first

   Both the use cases page and the AI Library are organized by what you want to accomplish, not which tool you're using. A colleague asking "can AI help me write a brief faster?" should find relevant examples immediately, without knowing the tool landscape first. The tools directory is a separate page for when someone is ready to go deeper on a specific platform.

3. 03

   Segmented sub-pages for segmented audiences

   The Claude Deep Dive page exists because licensed users have a different relationship with that tool than the rest of the function: they need habits, use cases, contributor resources, and platform-specific updates. Putting that content on the main tools page would clutter it for the majority of colleagues who use other tools. A dedicated sub-page keeps the main navigation clean while giving that audience what they need.

4. 04

   The content flywheel

   The "Share Your Examples" page and the AI recognition program are not separate initiatives. They're designed to feed the AI Library. A colleague submits work, it enters the library, other colleagues find it, get inspired, and submit their own. Community & Support, Recordings, and the Library are all connected by this loop, turning a static resource into a living record of M&C's AI capability over time.

5. 05

   Learning designed around the behavior change, not the content

   The Learning page is structured around four distinct stages of enablement rather than a flat list of resources. "Get up to speed" covers required onboarding. "Update your skills profile" gives colleagues a tangible next step with a job aid and FAQs. "Get better at prompting" is for those ready to develop real fluency. "Explore more" handles ongoing learning without overwhelming early-stage colleagues with advanced content.

The homepage is designed to answer three questions in sequence: what is this? where do I go? what's new? Every section earns its place by advancing one of those questions.

The Recordings & Materials page houses session replays, tool demos, and supplemental materials from M&C regional calls and an AI learning series. The core IA decision, how to organize it, came down to one insight: colleagues don't remember when they watched something. They remember what it was about.

1. Decision

   Why topic-based, not chronological

   A chronological list works for people who attended the session live and want to go back. It doesn't work for the colleague who missed it and is searching for content on a specific tool or topic six weeks later. Topic-based organization (M&C Regional Calls, AI learning series, Claude, Copilot, firm platforms) maps to how colleagues actually navigate. Tools are embedded within the topic schema rather than as a separate organizational layer, because tool and topic often overlap.

2. Decision

   Accordion structure for scannability

   Sessions accumulate over time, and a flat list would become unwieldy quickly. Accordion sections let a colleague expand only the topic they care about, without scrolling through irrelevant content. The popular-topics quick links at the top surface the most-accessed categories immediately. With accordions now grouping content clearly, those links may be redundant and are worth revisiting as the page matures.

3. Decision

   Viva Engage right rail: a deliberate cross-promotion

   The Viva Engage community feed appears on the right rail across all hub pages. The intent isn't just to surface content. It's to remind colleagues that a live community exists alongside the static resources. A colleague watching a recording is already in an engaged, learning mindset, which is the right moment to prompt them to join the conversation. Consistency across pages also means the feed becomes a recognizable element, not a surprise.

The Claude page is not part of the hub's primary navigation. It's a sub-page, accessible from the Explore Tools directory, scoped to the M&C colleagues who hold Claude licenses. Every design decision on this page ties back to one premise: access to this tool is licensed separately, so the page is built to make sure that investment turns into real, everyday use.

1. Decision

   Why a sub-page, not a main nav item

   The full function uses nine AI tools. Giving one tool a top-level navigation slot would imply it outranks the broader tool landscape, and would clutter the navigation for the majority of colleagues who primarily use other platforms. A sub-page keeps the main nav clean while giving licensed users a dedicated, rich experience that the tools directory card format can't support.

2. Decision

   Four habits: grounding people in AI fundamentals, not features

   The four habits section (always start in a Project; give Claude a role, audience, and format; paste the real thing; iterate) was a deliberate editorial choice to lead with mindset and behavior rather than feature documentation. The goal was to change how colleagues think about working with AI, not just show them where the buttons are. The note at the bottom, that these tips apply to other AI tools too, was included intentionally: licensed users aren't the only M&C colleagues using AI, and the habits are genuinely transferable.

3. Decision

   Use cases organized by verb, not role

   Use Claude to Write, Analyze, Reason, Create, rather than "for strategists" or "for content teams." Every marketer, regardless of role or seniority, will at some point need to write, analyze, reason, and create. Verb-based organization is role-agnostic by design: it meets colleagues where their actual task is, instead of asking them to self-identify their job function before finding relevant content.

4. Decision

   Right-rail jump nav: necessary for a dense sub-page

   The Claude page is significantly denser than any other page in the hub. It carries habits, use cases, session replays, eight resource cards, colleague-contributed guides, and a What's New module. A right-rail jump navigation (Home, Roles & Use Cases, Agents & Platforms, Learning & Events, Community) lets a returning colleague navigate directly to what they need rather than scrolling a long page. It isn't standard across the hub. It was added specifically because this page warrants it.

5. Decision

   Resources chosen to maximize license ROI

   The eight resource cards (onboarding, training, community, prompting, enterprise community, Anthropic's marketing course, Anthropic Academy, and support) were selected to cover the full enablement lifecycle. Onboarding and 101 for new users. Token efficiency and prompting guides for those building fluency. Academy and the marketing course for those going deep. Community and support for ongoing engagement and issue resolution. The aim: a licensed user at any stage of their journey finds something immediately useful.

Building a system of branded, responsive HTML modules for the hub, designed and shipped entirely without a design team or developer.

SharePoint's native web parts weren't enough

SharePoint's built-in content blocks are limited in design flexibility. To deliver a hub that felt modern, on-brand, and genuinely useful, I built custom HTML modules hosted in a SharePoint document library and embedded via the Embed web part. That introduced a real technical constraint: HTML files render inside an iframe sandbox, which blocks most default browser behaviors.

There was no existing internal playbook for this approach at the function level. I built one from scratch, documented every constraint as it was discovered, and maintain a Maintenance Guide (currently v4) so the system can be handed off or scaled.

Modules built

Six distinct HTML modules shipped across the project, each solving a specific content and UX need.

1. Primary module

   What's New Card Module

   A responsive CSS grid of content cards tagged by type, with color-coded category labels, inline SVG icons, action-oriented CTAs, and optional closing-date badges. The hub's homepage anchor.
   v1 to v9+ shipped · 6 card types

2. Spotlight

   Recognition Program Winners Module

   Dark-themed 4-column spotlight recognizing internal AI competition winners. Grayscale headshots, category-matched color labels, hover-state CTA.
   Base64 image embedding · Dark theme

3. Directory

   Tools Directory Module

   Grid of cards covering nine AI platforms available to M&C colleagues, each with text-style CTAs.
   9 tool cards · Text-style CTAs

4. Promo

   Survey Promo Banner

   Dark strip banner with a color-coded badge, designed to sit between native SharePoint web parts without visual disconnect.
   Inline placement · On-system styling

5. Sub-page

   Claude Page What's New

   A separate card module for the Claude tool page, with its own IA: date, headline, description, optional contributor attribution, CTA.
   Scoped to licensed Claude users

6. System

   Maintenance Guide

   A living internal document (v4) capturing layout rules, iframe sandbox behavior, file naming conventions, known bugs, and module filenames.
   v4 · Ongoing documentation

Module wireframes

Each module was designed with a clear information hierarchy before any code was written. The wireframes below reflect the layout, card structure, color system, and content hierarchy developed for the primary modules.

Constraints discovered and solved

Every constraint below was confirmed through live testing in SharePoint, not assumed. Each finding was documented in the Maintenance Guide so it wouldn't need to be rediscovered.

A dynamically filtered gallery of real colleague AI examples, built in SharePoint with no developer support, no external dependencies, and a full content governance model alongside it.

Great work was invisible

M&C colleagues were building agents, writing prompt sets, and designing new AI workflows every day. But that work lived in inboxes and slide decks. There was no way for a colleague in a different region or team to discover what had already been built, borrow a prompt that worked, or understand which tools were most useful for their type of work.

The AI Library was designed to fix that: a browsable, filterable gallery of real examples, living in SharePoint with no external dependencies and no ongoing developer involvement.

1. Challenge

   Technical challenge

   SharePoint has no obvious native dynamic filtering between web parts. The standard path was a custom Power App or a developer. I had neither, and found a native SharePoint capability most teams never use.

2. Challenge

   Change management challenge

   A library with outdated or miscategorized content builds distrust faster than no library. Content operations had to be designed alongside the product itself.

Organized by task, not tool

The obvious structure was to organize by AI tool. But that's inside-out: it requires the user to already know which tool they want. Instead, the library is organized by what you used or created (agent, prompt set, workflow, accelerator, experiment). Tool and marketing phase work as secondary filters.

A colleague asking "how can AI help me speed up content review?" should find relevant examples without knowing which tool was involved. Task-first organizing solves that.

Dynamic filtering, without code

The solution uses two native SharePoint list web parts connected via SharePoint's built-in web part filter connection, a feature most teams never find because it's buried in web part settings. A marketing phase list acts as the filter source; the AI Library gallery receives it. Clicking a phase filters the gallery instantly with no page reload.

Designing branded gallery cards in JSON

SharePoint gallery views allow custom JSON formatting, but the tooling isn't visual: you write raw JSON that describes element hierarchy, conditional expressions, and style rules. The card design went through 32 iterations of the gallery JSON before landing on the final layout, each one built with Claude from a plain-language description, tested in the live list, and fed back with what broke or worked.

1. Card element

   Color-coded top bar

   Maps to the "What did you use or create?" field using nested if() expressions across all eight possible values, each tied to a brand color.

2. Card element

   Outcome pull quote

   Surfaces the Outcome field (falling back to the one-line summary if empty) as the primary card content, in italic. This keeps cards outcome-led rather than tool-led.

3. Card element

   Impact, tool, and phase metadata

   A secondary row shows impact delivered and the AI tool used in truncated single-line format, plus a phase thumbnail icon surfaced from list column images via getThumbnailImage().

Problems found and fixed

Building the system around the product

A library with no content, or outdated content, is a liability. Content operations were designed in parallel with the technical build.

• Form-to-library automationA Microsoft Forms intake workflow auto-populates the SharePoint list from colleague submissions, managed by a project partner.
• Structured data cleanup briefBefore launch, a brief for two colleagues covered field corrections, deduplication, and tool retirement handling, specific enough to execute without further input from me.
• Archive vs. delete policyRetired entries move to a separate archive list rather than being deleted, preserving historical records without cluttering the live library.
• Tool sunset handlingWhen a tool was retired, its entries were mapped to equivalent tools or archived, keeping the library accurate without losing the historical record.

170+

Unique AI examples in the live library

~2x

Unique viewers in the 30 days after relaunch

3+ min

Average time on page: colleagues are browsing, not bouncing

1

person built and runs it: built on her own

• Dynamic filtering live in SharePointNo Power App, no developer, no external tools. Built using a native web part connection most teams never find.
• Branded gallery card designEight color-coded categories, outcome-led copy, phase icons, and impact metadata, consistent with the broader hub design system.
• Content governance modelForm-to-library automation, data cleanup process, archive policy, and onboarding documentation for future maintainers.
• Replicable pattern documentedThe web part connection approach and JSON templates are documented for any M&C team that wants to build something similar.

Across both workstreams, this program required moving between product thinking, UX design, technical execution, content strategy, and stakeholder coordination, often within the same week.