ANODA Discuss your product

An enterprise AI workspace employees can read

AI Gateway, by Larridin, is an AI workspace for employees and the admins who oversee it.We designed its first stage, from specification to handoff.

AI Gateway chat on desktop: a question, an answer with a list and a comparison, a Sources button under it, and the mode shown beside the message box; AI Gateway on a phone: the empty chat with the message box and the mode at the bottom
Employee
and admin staff chat and prompts, admin connectors and usage
Sources
and steps citations, thinking, model choice and a stop control
Ready
for Dev prototypes and a system on the client’s foundations

We designed AI Gateway’s first-stage enterprise workspace inside Larridin’s product team. We connected model switching, reusable prompts and tool access with the usage views admins need, then carried those flows into responsive UI and a design system extending the client’s foundations. Clickable prototypes and a Ready for Dev handoff gave Larridin’s engineers a defined experience to build.

What an employee and an admin pass through

One product, two ways in:

  1. Ask

    • Model and mode
    • Saved conversations
    • Attachments

  2. Reuse

    • Prompt Library
    • Starred prompts
    • Connectors a prompt needs

  3. Connect

    • Discover a tool
    • Authorise it
    • Choose what it may do

  4. Read

    • Thinking
    • Sources
    • Stop, or an error

  5. Oversee

    • Connectors for everyone
    • Usage by department
    • App inventory
A simple chat A visible model
The choice is one small control beside the message box, with more models a step away.
Fast answers Answers you can check
Thinking and sources sit one click from the text, and stay out of the way until needed.
Employees Admins
One shell and one language, with a menu that shows each role only what is theirs.

One chat screen, read in the order of trust

Found
Saved chats, the answer, where it came from, the model and the connected tools all ask for a first look, and an answer that hides its origin is one nobody can check.
Decided
The answer takes the centre. Its sources sit directly under it, the model and mode sit in the message box, and the chats and connected tools stay in the side column.
For the user
An employee sees which model answered and where the answer came from, without leaving the conversation.
AI Gateway chat on desktop: a side column with saved chats and connectors, a question, an answer with numbered points and a comparison, a Sources button, and a message box with the mode
After: the chat on desktop, with an answer and its sources; the content is example data

  1. The answer and where it came from

    Plain structure, the sources one click under it.

  2. Model, mode and tools

    Model and mode in the box, tools beside it.

How the work progressed

From a specification to prototypes and files an engineering team could build from.

  1. Discovery

    What the specification asked of employees and admins, and where the two sides needed different answers

    Artifact A reading of the specification against both roles

  2. User Flow

    How chat, prompts, model choice and connectors connect, and what happens when a connector is not yet authorised

    Artifact Information architecture, flows for both roles and role-based screen maps

    A map of AI Gateway screens in three rows: starting a chat and a prompt, choosing a model, and connecting a tool

  3. Wireframes

    Where the model, the sources and the connectors sit, before any styling

    Artifact High-fidelity wireframes and visual-direction studies

  4. UI & Design system

    One set of components for chat, prompts, connectors and admin tables, with the AI states the client’s system lacked

    Artifact Final responsive UI, a design system and a UI kit extending the client’s foundations

  5. Delivery

    What engineers needed to build every state

    Artifact Clickable product and go-to-market prototypes, organised screens and Ready for Dev files

From a question to a connected answer

Found
A chat looks simple until it has to start from a prompt, switch models and reach a tool, and each of those has states of its own.
Decided
Three runs drawn with their states before the interface, and a menu that gives an admin the settings and usage an employee never needs to see.

  1. From a prompt

    The empty chat with its suggestions, a prompt that needs apps authorised first, then the prompt in the message box.

    Open the full map
    Three AI Gateway screens: the empty chat with suggested tasks, a dialog asking to authorise apps a prompt needs, and a prompt placed in the message box with two connectors chosen

  2. Choosing a model

    The default, the short list of models, then two models chosen side by side.

    Open the full map
    Three AI Gateway screens: a menu with Auto and three models and More Models, a dialog to select up to two models, and a response in a model’s own card

  3. Connecting a tool

    Connected and not connected tools, the sign-in step, then an answer that used the connector.

    Open the full map
    Three AI Gateway screens: a menu of connected and not connected tools, a dialog explaining the redirect to Google, and a response summarising emails found through the connector
AI Gateway side menu for an admin: Nexus Chat, Analytics and Settings, then the list of recent chats and the connected tools

One menu, two roles

Employees see their chats and prompts; admins get Analytics and Settings above them, in the same shell.

  • A role-aware side menu, collapsible
  • Entry points to chat, prompts, analytics and settings
  • User flows and role-based screen maps

Five jobs the product has to do

In the order a team meets them.

Reading an answer you can check

Found
An AI answer that arrives as a finished block gives an employee nothing to judge it by, and one that shows everything buries the answer.
Decided
Thinking as a collapsible step under the answer, and sources as a list one click away, both closed until asked for.
AI Gateway chat with a Show Thinking control open above an answer, listing the model’s steps as short headed paragraphs
AI Gateway chat with a list of four sources open above the Sources button, each with the site and the page title

Stopping, and failing well

Found
A response can run too long, a service can be busy, a message can be too big, and unexplained each of them reads as a broken product.
Decided
A stop control in the message box while a response runs, and a banner above the message box for each failure that says what happened and what to do.
AI Gateway chat with two model cards loading and a Stop Response tooltip on the send button
AI Gateway chat with a yellow banner saying the service is experiencing high demand and to try again in a few minutes
AI Gateway chat with a very long message and a banner saying the message is too long and to shorten the request
AI Gateway chat with a banner saying an unexpected error occurred and a Retry button

Finding a prompt worth reusing

Found
A team’s best prompts live in private notes, and a list of them is useless unless a person can tell at a glance what each one is for.
Decided
A library of cards: each with its category, the apps it needs, who wrote it and how often it is used, filtered by who it suits.
AI Gateway Prompt Library with three tabs, filters for who a prompt suits, connectors and category, and a grid of prompt cards each with tags, apps, author and a usage count

Setting up a connector as an admin

Found
A connector lets AI act inside a person’s tools, and an admin has to see which are connected and choose what each may do.
Decided
One list of connectors with their status, and a page per connector where each action is a switch grouped by what it touches.
AI Gateway settings on the Connectors tab: Gmail, Slack and Google Drive connected with a Configure button, Google Calendar, Github and JIRA with a Connect button
Configure Gmail page with Folder Management, File Management and Document Management groups, each with a master switch and switches for find, create, delete, download and upload actions

Reading usage by department and app

Found
Leaders need to know which departments use which AI apps and which apps are approved, and a wall of charts answers neither.
Decided
A usage trend by department and app, with the inventory of apps below it: status, type, users, growth and adoption in one filterable table.
Analytics screen with a Department Analytics tab, a line chart comparing departments, and an AI App Inventory table with department, app, status, type, active users, growth rate and adoption columns

One connector row, everywhere a tool appears

Found
A connector shows up in the chat, in a dialog and in the admin list, and drawn separately each of them would drift.
Decided
One row: the tool’s logo and name, one action on the right, and a status that means the same thing in every place. Added to the client’s foundations as a component with its states.

The same tool, in a menu and in a dialog

A tool row in the chat’s popover and in the authorise dialog.

  • Popover with Connected and Not Connected tabs, a search field and three tool rows: Gmail, Jira and Slack, each with a menu button
    In the chat: Connected and not connected, one tab each.
  • Three tool rows in a dialog: Gmail, Google Drive and Jira, each with a Connect button
    In the dialog: The apps a prompt needs, each with Connect.

A connector row, in two states

The admin list row, connected and not.

  • Connector row for Gmail with a green Connected badge and a Configure button
    Connected
  • Connector row for Google Calendar with a grey Connect button
    Not connected

The same chat on desktop and on the phone

Kept
The order of the conversation: the question, the answer, and its sources under it, with the message box and mode at the bottom.
Changed
On desktop the chats and connectors sit in a side column; on the phone the column folds away and the message box carries the mode. Only selected screens were adapted, not the whole product.
AI Gateway chat on desktop with a side menu of Nexus Chat, Analytics and Settings, an answer with a comparison list, and a message box
Desktop · Chat with an answer An answer with its sources, and the menu for an admin at the left.
AI Gateway on a phone: the end of an answer with a comparison list, a Sources button and the message box with the mode
Mobile web · Chat with an answer The same answer on a phone, sources still under it.

Where the first stage ended up

The first stage of AI Gateway designed and handed off, with prototypes and a system that extends Larridin’s own. We designed it; development and launch were Larridin’s, and how each state behaves in production is theirs.

employees, admins and the teams reviewing usage
Three roles
with thinking, sources, stop and failure states
Answers
discovered, authorised and configured
Connectors
prototypes, screen maps and Ready for Dev files
Handoff

Will your users understand your AI, or just use it?

Model, mode, sources, connectors and roles: we designed AI Gateway so an employee can tell which is which. Bring us your AI workspace, and we’ll show where a user cannot tell what the product just did.

Discuss your product Explore more case studies

What we brought to AI Gateway

The product

The interface and its system