Left arrowTerminal
Console

Terminal

Designing a novel interaction pattern for a global, context-aware AI chat

Background

Developers have Github. Designers have Figma. IT teams are left piecing together a complex web of tools to manage identity, access, security, software and more.

Console set out to build that home base.

We ingested data from all of the tools an IT team would use to manage their workload, allowing you to see and interact with users, apps, groups, policies and more in a single tool using AI.

Console's AI could translate user intent into real API calls letting you interact with data across multiple tools within a single command.

Brief

My task was to design a place for IT agents to issue those commands that would be out of the way (but not hidden) most of the time but globally accessible whenever it was needed. It also needed to feel lightweight so agents could issue commands or ask questions of their data without feeling the same burden you might feel if you had to open a SQL editor.

At the same time, it needed to be able to expand into a more robust surface area that allowed room for conversational history, inline tables for viewing and interacting with data, and educational content to help the agents better understand their system.

Research

The brief was a tall order, so I dove right in to try some of the tried and true options starting with a collapsible sidebar that could appear and disappear just as easily. While it supported conversations just fine, with limited screen real estate, a panel that squeezed your primary content wasn't a great long-term solution. Not to mention, it made it nearly impossible to view a table of data that was returned by the AI.

Chat pane that could be collapsed/expanded

I also briefly explored what it might look like if it were embedded beneath the navigation so it wouldn't squeeze the primary content but ran into similar issues as the dedicated sidebar with data visualization.

Inline chat that lived within the navigation

I ran through a number of other variations including a Cmd+K menu and a floating bubble that opened a popover chat à la Intercom.

Screenshot of some Figma explorations

Finally, I found something that I knew could work beautifully. I called it Terminal.

Terminal was a minimal chat input that lived beneath the main content

It was minimal and unobtrusive - just an input bar beneath your primary content. But it could open slightly in what I called "Peek" view or even expand to fill your entire screen depending on your needs.

While the chat was open in Peek view, your primary content was front and center

For the moments you needed to view your entire chat, your content would get out of the way

As we began to expand Terminal's functionality, we wanted to support conversation history. I explored a few variations of this that resembled ChatGPT's history sidebar but no matter how I sliced it, it felt too hidden and out of the way. To remedy this, I settled on a tab design that would allow you to quickly jump back through your history by clicking on a tab or start a brand new conversation by clicking on the first tab.

Historical conversations lived in tabs

On top of the practicality of this design, there was also a subtle metaphor that reinforced Console's value proposition: visibility and control across your IT system.

When Terminal would open, the primary content view would shrink revealing your conversation scrolling in from behind it. It felt like you were tapping into the source code of the application, giving you the power to execute commands from your IT Terminal.

What now?

I hope that you've enjoyed reading some of my thought process behind Terminal. Console has pivoted away from this idea, so it was unfortunately abandoned before it was fully fleshed out, but if you're interested in reading about our new approach to helping IT teams triage their support requests, I would encourage you to read my case study on Playbooks.