Skip to content

Sage

An AI knowledge platform for a UAE bank. Contact-centre agents get a sourced answer mid-call, and the people who own the documents keep those answers right.

Impact

Prototype

In progress. Both halves are built and clickable: agents ask and check the source, and document owners fix what gets flagged, through a review flow I simplified.

In progress. Built and iterating.

Role
Senior Product Designer
What I owned
  • Designed it and built it. Figma for the parts that needed taste, then Claude Code against a DESIGN.md I wrote to keep the generated UI on-system.
  • The information architecture of the document library, and the redesign of the maker-checker review flow.
  • {{TODO: anything else you owned, for example the retrieval behaviour or the document model}}
Duration
2026
Platform
Web
Tools
Figma, Claude Code, Next.js, DESIGN.md

An answer an agent cannot check is worse than the folder it replaced.

The problem

Problem

The answer exists, it is just not reachable in time

An agent has a customer on the line and a policy question. The answer is in a document on the bank's portal, which is a repository and nothing more. Finding it means browsing folders by hand, on one of a dozen open screens, while the customer waits.

So the job is not search. It is a correct answer, fast enough to say out loud, and right often enough that agents keep asking.

The design

The system

One half answers, the other keeps the answers right

Agents ask. Product owners and their reviewers own the documents the answers come from. Design only the first half and you get a fast way to repeat whatever the documents say, out-of-date parts included.

The two halves meet in one loop, and the loop is the product.

  1. Ask

    An agent asks in plain words and gets a short answer.

  2. Check

    Every answer lists its sources, one click away.

  3. Flag

    A wrong answer gets a thumbs-down, a reason and the exact sentence.

  4. Route

    The flag lands in the document owner's queue.

  5. Fix

    The owner edits, and the change goes back through review.

  6. Republish

    The corrected version replaces the old one.

For agents

A sourced answer, not a search result

Type the customer's question roughly as they asked it, get a few lines back. The sources sit under every answer, so checking is a click, not a search.

The sourcing is the part I would not trade away. An answer an agent cannot check is worse than the folder it replaced.

Ask, read, check the source

Designing for trust

Trust

A wrong answer has to go somewhere

Accuracy is the adoption problem. One confident wrong answer in front of a customer and the agent goes back to the portal for good. So the thumbs-down asks three things: what kind of problem (incorrect or outdated, missing, unclear), which source, and optionally the sentence itself.

That becomes an issue for whoever owns the document. They land on the page with the sentence marked, the answer that was given and the agent's note, then mark it fixed or no fix needed. The status goes back to whoever raised it.

The answer says 35,000, the document says 5,000. The flag carries the sentence to the owner.
The Highlight the problem text step, with 'Minimum monthly salary of AED 5,000' selected in the Summit Credit Card document
Pointing at the sentence is optional, and saves the owner a search
The document owner's view of the Summit Credit Card, with the flagged sentence outlined and an issue card showing the flagged answer, what the reporter said, and Mark as fixed
What the owner sees: the sentence, the answer, the note
The Issue Tracker, listing flagged answers with the relevant document, the product, who it is assigned to, and an issue type of Incorrect/Outdated, Missing or Unclear
Every flag, by document and owner, in one queue

Information architecture

The library

Built for how people look, and for a library that keeps growing

The first library mirrored the org chart: business line, a row of category tabs, then a grid of cards. It works when you already know where a document lives, and it breaks as the library grows. Every new category is another tab, every new document another card to scan.

People look for a document in one of two ways. By where they work: someone in HR does not care about Finance. Or by what kind of document it is: someone checking every live campaign wants Campaigns, whichever team wrote them. The new library pivots one tree between the two, with a count on every branch and a sortable table beside it.

I chose the tree because it scales. The document list will keep growing. A tree takes a new category as one more branch, and a table takes a hundred documents the same way it takes ten. Tabs and cards do not.

Old design
The earlier library: a Personal Banking page with category tabs (Cards, Accounts, Loans, Wealth, Insurance, Digital Banking, Remittance), a search bar, and rows of document cards under Products & Services and Internal Documents
One way in, through the business line. Tabs and cards that grow with every document.
New design
The Document Library, a tree of product documents, campaigns, SOPs and policies with counts, beside a sortable table of documents
A tree you can pivot, with counts, beside a sortable table
New design
By domain, then by document type. Same documents, two ways in.

Governance

The old review flow

Every reviewer could reject, so drafts went in circles

The first review flow gave every checker Accept and Reject at every stage. A rejection sent the draft back, a fix restarted the round, and a document could loop between maker and checkers without anyone knowing what was still blocking it.

Old design
The earlier review panel: three stages (Draft, Checker review, Division head review) beside the document, with Reject and Accept buttons on the checker's stage
Reject and Accept for every checker, at every stage
Old design
The earlier review panel after a checker approves: a toast reading 'Request was approved and process moved to next step', and collapsible Draft, Checker review and Division head review stages
Approvals as a stack of collapsible stages

The new review flow

Checkers approve or hold. Only the head of the area rejects.

I took Reject away from checkers. A checker either approves, or leaves a comment and does not. Nothing moves until every assigned checker has approved, then the head of the area gives final approval. They are the only one who can reject, which sends the document back to Draft.

Editing a live document starts a new version. The original stays published until the new one is approved, so agents never lose it mid-fix.

New design
Draft, two checkers, final approval, published. The role switcher is a demo affordance.
New design
A campaign in Final review, seen by the head of the area, with Reject draft and Approve & Publish at the top right
Reject lives in one place: final review
My Workspace as a board, with documents in Draft, Checker Review, Final review and Published columns
A product owner's area, by stage

Friction on purpose

You cannot approve past your own comment

A checker with an open comment cannot approve. The button locks and says why. The maker replies and marks it addressed, the checker resolves it, and only then does Approve come back.

It is deliberate friction. Without it, a comment is a suggestion someone can approve straight past, and the document publishes with the question still open.

Comment, Approve locks. Resolve, Approve unlocks.

The build

How I built it

Figma for taste, DESIGN.md for consistency

Figma first, for the handful of screens where the layout needed judgement. Then a DESIGN.md, then Claude Code building against it.

Generated UI drifts: ten sessions, ten spacing scales. The DESIGN.md writes the system down once, so the model works inside it. A few of its rules, as written:

From the DESIGN.md

RuleWhy it is written down
Never hardcode a hex in a componentColours come from tokens, so one change reaches every screen. It is also why de-branding the prototype for this page took one file.
Tune corners by changing --radius, never per componentOne number sets every radius, so a generated card cannot invent its own.
A dialog is a frame, not a pageTitle and actions stay put and only the body scrolls, so a long form never pushes its own buttons off screen.
Vocabulary is load-bearingOpen means read, Review means approval, Report issue means feedback. One word, one meaning, everywhere.

Looking back

Measure

Adoption is the measure, and accuracy gates it

Success is agents choosing Sage over the portal on a live call. There are no adoption numbers to share yet, so this is how I would show the loop is working: the share of flagged issues closed within a week, whether the same document keeps collecting thumbs-downs after it is fixed, and weekly active agents over time.

Checkable
Every answer carries its source
Routed
A thumbs-down reaches the document owner
In progress
Status

In progress, so no adoption numbers yet. It is here for how I design for trust in an AI tool, and how I build.

What I would do differently

Accuracy first. The interface cannot fix it.

The feedback from the business was blunt. The experience is easy to use, and it is not accurate enough to use. Agents repeat what Sage tells them to a customer, so a wrong answer is not a bad experience, it is wrong information given out by the bank.

Two things were behind it, and neither was the interface. Sage was running on an older GPT model. And the documents underneath were incomplete or out of date, because nobody owned keeping them current. The governance I designed answers the second, but it came after the screens, not before.

Next time I would get accuracy to a usable bar before building anything around it: the right model, tested against real agent questions. And I would push for one person to lead the content, so someone is accountable for getting up-to-date product documents in. Better tooling does not make people upload documents. That part is a people problem first.

Next project

Sage