joans.cat

Case study

One language for AI

When every product is shipping an assistant, who decides what AI looks like, and how does a user check what it said?

Context

The AI validation gate decided which AI features deserved to exist. This is what came after: the company's strategy became an assistant on every product, and they started arriving. Regulatory intelligence, CMC, target safety in OFF-X, search across Cortellis itself, and more on the way.

The people on the other side of those assistants are regulatory affairs specialists, safety scientists, CMC teams. They take an answer into a submission or a safety review and have to defend it. A fluent answer they can't trace is worse than no answer at all.

The screens on this page are from the shipped products.

The problem

Three problems, arriving together:

  1. Every team was rebuilding the same things. When we reviewed three production apps side by side, each team had built its own app shell, filters, dialogs, loading and empty states, data grids, export flows, and its own assistant. Helix documented components, but not the compositions people needed.
  2. AI defaults to a chat box in the corner. Left to momentum, every assistant becomes the same detour: leave the data, type into a window, copy the answer back. For work that lives in a table, that is the wrong shape.
  3. The guidance was already drifting. Instructions for developers and for AI coding assistants were being kept by hand in several places, and they had already fallen out of step with the theme. As AI writes more of the code, the guidance an agent reads becomes part of the design system whether you design it or not.

The decisions

Principles in the system, not in a deck. Helix's AI foundations set three rules for every AI feature. Transparent: users always know when content is generated. Assistive: AI supports the decision; it doesn't make it. Trustworthy: predictable states, feedback and explanations. They sit in the public documentation next to colour and type, where a product team will read them.

The AI foundations page of the Helix Design System documentation at helix.clarivate.io: an introduction, three AI principles (Transparent, Assistive, Trustworthy), and the specification of the blue-to-purple AI gradient at a 30-degree angle, with an on-this-page list covering the AI button, avatar, streaming status text, disclaimer, and inline, side panel, modal and full-page AI layouts.
The AI foundations, public at helix.clarivate.io: three principles, a gradient specified down to its angle, and four sanctioned layouts, from inline to a full-page AI workspace.

One signal for "the model wrote this". A reserved blue-to-purple gradient, an AI avatar, an AI tone of the ordinary button, and the same disclaimer under every assistant. A user who learns the signal in one product can read it in the next, which matters when the same scientist works across several of them.

Cortellis CMC Intelligence showing a Clinical Trial Application Procedure view: a collapsible section tree on the left, and a table of official regulations and local practice by country with product type and drug type tags. In the header, a CMC AI Assistant entry point carries the AI sparkle and a New badge.
Cortellis CMC Intelligence. The assistant enters through the header with a one-time New flag; the regulations table it answers from stays the main event.

Put AI where the work is. The work in these products happens in a table: thousands of drug records, adverse events by organ class, regulations by country. So the patterns go beyond chat. The assistant has a fixed way in, from the header or the search bar. Actions apply to the results in place. And in these products, the assistant opens beside the data.

Cortellis drug search for obesity returning 4,805 drug results in a dense table with columns for drug name, highest status, other names, originator, active company, therapy area, active indication and technology. The search bar holds an Assistant button, and the results toolbar offers Generate competitive landscape with the AI sparkle, beside Analytics, Export and Save and Alert.
Cortellis drug search. The assistant lives in the search bar, and Generate competitive landscape is an AI action on the results themselves.
OFF-X target safety profile for GLP-1 receptor agonists: a master view of 3,011 adverse events across 26 system organ classes, each row scored Very high or High with classifier tags such as On-Target, Causality, Severity and Pharmacogenomics. A safety assistant panel is docked on the right with a greeting, four suggested safety questions, a composer, and an AI-generated content disclaimer.
OFF-X target safety. The safety assistant docks as a side panel, so the adverse-event matrix stays in view, and its starters are written as the questions a safety scientist asks.

Make trust a pattern, not a disclaimer. A footer line saying "check for accuracy" isn't enough. The pattern ties each claim in an answer to a numbered citation. The sources are listed and ranked, with their type, origin and date, and each can be summarized or compared against its previous version. A collapsed How was this generated? shows the steps behind the answer. This is design for the user who has to defend the answer, turned into components.

Cortellis Regulatory Assistant answering a question about clinical trial record retention in Ireland. Under the answer heading sits a How was this generated disclosure. The answer is a set of bolded points, each followed by numbered citation markers, and below it a Sources list of five ranked items (two Cortellis expert reports and three pieces of EU legislation), each with type, origin, last-updated date, and Summarize and Version comparison actions. Feedback buttons and a follow-up composer close the page.
Cortellis Regulatory Assistant. Numbered citations tie each claim to a ranked source, and How was this generated? opens the steps behind it. The answer is built to be checked.

No blank box. An empty assistant is a test the user didn't ask to take. The landing state teaches the job instead: what this assistant can do, each with a real example in the user's own language.

The Regulatory Assistant landing page: a gradient greeting asking for the user's regulatory question, a large question field, and five prompt-starter cards: Understand a requirement, Find a document, Summarize a document, Compare versions, and Multi-country comparison, each with an example question.
The landing state. Five kinds of question the assistant handles, each with an example.

Validate before codifying. A pattern earns its place in the system twice: first through the validation gate, then with customers. Every product and every assistant has had at least one innovation programme or beta with customers, co-led by UX and Product as part of the company's co-development strategy. What survives that goes into Helix; what doesn't stays a prototype.

Write it once, for people and for agents. Each pattern is written as one structured guide, and the rest is generated from it: Storybook stories and, through a generator I built, instructions for AI coding agents: skills for Claude Code, an AGENTS.md block for Cursor and other agents, and GitHub Copilot instructions, matched to the installed Helix version. The same guides are set to feed the documentation site, so designers, developers and agents read from one source. Ask an agent for "a list page with filters and a data grid" and it composes the documented patterns instead of inventing new ones. The guidance is public on GitHub.

One pattern guide written once Documentation site for designers and developers Storybook stories examples that compile Guidance for coding agents skills · AGENTS.md · Copilot Product code one AI language
One source, three readers. A designer, a developer and a coding agent get the same pattern, so the guidance has one place to change.

What happened

What I'd tell another design leader

  1. The AI layer is where a design system earns its keep. How AI looks, behaves and proves itself across a portfolio is a system question, and the design system is already where those get answered.
  2. A claim without a source isn't finished. A regulated user should be one click from the source of anything the assistant says, however good the model is.
  3. Put the assistant beside the work, not instead of it. In data-heavy products the table is the job. Design AI to act on it.
  4. Your design system's next user is an agent. When coding assistants write the code, the guidance they read is part of the system. Write it once, and hand it to agents too.

Related: where it started: The AI validation gate · the system underneath: Helix · customers inside the process: Research as an operating system · the essays behind it: Design for the user who has to defend the answer · The assistant is scaffolding · Your next user is an agent