Left arrowPlaybooks
Console

Playbooks

Designing new interfaces for workflow builders in the age of AI

Background

Console is an AI pipeline that sits in between your employees and your IT team, helping triage, escalate and even solve IT-related issues at scale.

As you might imagine, every company has their own workflows for how they handle a wide variety of tasks ranging from app access to hardware provisioning. Typically, these workflows would be defined in an "old school" infinite canvas with different steps tied together with noodles in a decision tree.

But we wanted to push the limits of what a "workflow builder" could be in the age of AI.

Brief

In its simplest form, a workflow is a set of instructions routing information through different systems to solve a problem.

So... what if that's all we required?

After all, if you were to train a human IT agent, you would explain your workflows in natural language and they would understand. And LLMs are fantastic at parsing natural language and even understanding intent.

Of course, there are plenty of questions and concerns we wanted to answer including:

  • Could the LLM handle edge cases correctly?
  • Even if it could, IT teams trust it?
  • How do we handle requests to highly sensitive information like finance or HR data?

My task was to:

  1. design an interface that would emphasizes the simplicity of training our system the same way you would train a human agent - in natural language
  2. while taking into account these higher level questions and considerations
  3. and helping our users form a brand new mental model for this unique workflow builder.

Iteration

I quickly ran through the usual approaches - a drawer, a dialog, an accordion. Each, though perfectly usable, didn't quite capture the feeling that I was looking for.

If you've ever just opened your notes app on your phone to jot a few thoughts down, you know there's something visceral about writing a bullet list of something. A shopping list, a brain dump of ideas, step by step instructions for your mom on how to reset the wifi router.

That's the feeling I wanted to capture.

Inspiration

I keep a swipe file for design inspiration and decided to take a few minutes to search for things that might spark my imagination. Things that felt dead simple and brought a sense of playfulness to the experience.

I believe we're in the midst of a hardware renaissance right now and, despite the fact that many of these new products will fail, I'm excited by the exploration of these highly tactile devices with simple, intuitive controls. That was the spirit of our workflow builder and I decided to bring a bit of that energy into my designs.

To start, I created these small notebooks that brought a sense of opening of a new page where you could just... write. No configuration settings, no drop down menus, no noodles connecting cards on an infinite canvas.

Just a notebook and a page. We decided to call these sets of instructions, Playbooks.

To add a little whimsy to the Playbooks, I wrote some lightweight CSS that opened the Playbook just a bit on hover. After shipping this internally to staging, I received messages from four of my teammates who were delighted to stumble upon this little easter egg :)

Clicking on "New playbook" would open up to a new page with space for a title, a description of the playbook that told the LLM how and when it should be used and, of course, your instructions.

Delight

While this was a fun start, I wanted to bring a bit of personality to the experience. Everyone remembers those high school notebooks, color-coded for each subject. I wanted to give our users the ability bring a bit of that same energy to their Playbooks. A way to customize them in a useful way just like those color-coded notebooks from school.

So I created a variety of color options that tinted the Playbook covers, allowing users to easily categorize and scan their playbooks.

Multi-platform workflows

As we began to flesh out the Playbook concept, we wanted to give IT teams the ability to orchestrate multi-platform actions.

To give you a concrete example, let's say someone requested access to Figma. A fairly traditional IT workflow might look something like this:

  • Look in our SaaS management platform like Vendr to check if our organization uses Figma or if we use an alternative tool like Sketch
  • If we use Figma, check in our HRIS system like Workday to see if the user is part of the design team or has a reasonable need for the tool
  • If they do, look up their manager and reach out to them on Slack for approval
  • If the manager approves, look in our SaaS management tool to see if we have a policy for Figma and, if so, use the access timeframes and permissions outlined in that policy

That simple workflow that happens dozens of times every month required access to three different tools at minimum.

So we built integrations with the most common tools that IT teams use. We used integrations to create a library of actions using the tools' APIs as well as a way to create custom webhooks for platforms we don't support, all piping into these primitives called Actions.

You could call another Playbook or an Action in another tool by simply typing a hashtag in the Playbook and you'd immediately get a dropdown of actions that you could insert. If you kept typing, it would begin filtering the actions by the app or action title so you could quickly insert the most relevant action without ever touching your mouse.

Human-in-the-loop

As you might imagine, IT handles some sensitive requests. The odds of an IT team taking us seriously if we entrusted every action to an LLM are very low. To remedy this, we knew we'd have to give IT agents the ability to control whether or not a human should be in the loop on a certain action.

To accomplish this, we gave each Action a configuration object that could handle things like whether or not we wanted to confirm the action with the requester or get approval from a third party before running it. This allowed IT agents to inject a human in the loop on a per-action basis to ensure sensitive actions were handled appropriately.

What's next?

Personalized Templates

We're currently working on an interesting way to create personalized Playbook templates by ingesting the organization's support tickets and using an LLM to identify common, solvable requests.

We can then use AI trained on successful Playbooks to write custom templates based on the tools (+ their respective actions) and existing Playbooks that the organization uses.

There are always a lot of unanswered questions when you introduce a new interface and we're in the midst of getting this into the hands of our early design partners. We're already seeing a lot of excitement and feature requests from our partners that have helped guide our roadmap for the foreseeable future.