Taking Grok Bot outside the APP

Go on. Play with it.

Move your cursor around. It'll follow you.
Annoy it. Slap it. Try three times.

We made it behave.

A working state is easy. A character that can mess around while it's working is a little harder. We wanted it to react, interrupt, get annoyed and keep behaving correctly while the user still understands what the agent was actually doing underneath all of that. So we built the character in Rive and made all the states playable.

It started in the notch.

Grok Bot already uses their mascot to show what an agent is doing.John Bai dropped it into the Mac notch, and that was enough to get us thinking: if the character already tells you what the agent is up to, why should it disappear the second you leave the app? So we started working out what it would need to do if it actually lived outside the Grok window, rather than just sitting there as an animation.

First, we gave it somewhere to live.

We laid the same idea out across the Mac notch, an iPhone widget, a Lock Screen Live Activity and Grok Bot itself.
The point wasn't to make four versions of the same thing.
Each one gives you a completely different amount of room, so we had to work out what the character actually needed to show in each place and what we could get rid of.

One bot in focus. The rest in sight.

Several agents can be running at once, so the useful question isn't just what one bot is doing. It's which one needs you. We gave the active bot enough room to show its state and current task, while the others collapse to the minimum: a face and the line they're working on.

State stays readable even when the interface collapses.

Then we put the interfaces in motion.

The static layouts looked fine, but motion exposed the gaps. We needed to see how focus shifted between bots, how states changed, and what could disappear without losing clarity.

A character needs more than working and done.

If it's going to sit around while you work, it also needs to know what to do when nothing is happening, and what to do when you start messing with it.

Making the states coexist

The harder part was making sure one interaction didn’t break the next. We mapped the logic in Figma, then built the final state machine in Rive.

Figma logic flowchart

Rive state machine

Figma logic flowchart

Rive state machine

Figma logic flowchart

Rive state machine

Figma logic flowchart

Rive state machine

Figma logic flowchart

Rive state machine

Same logic. Very different levels of chaos.

We took it further.

Once the character worked in the notch, we started trying it in places where you might actually want to check in on an agent.

We tried a lot more.

Not everything made it into the final system. A lot of it was just us finding out how far we could push the character before it stopped being useful.

Sketches

Vector explorations

Sketches

Vector explorations

Sketches

Vector explorations

Sketches

Vector explorations

Sketches

Vector explorations

Even the icon got involved.

We tried carrying the state all the way out to the app icon too. Not as another notification badge. Just one more place the character could tell you something had changed.

One character, across the whole system.

What this could do for your product

• Make more use of what you already have
  Grok already had a mascot people recognised. We gave it a bigger job inside the product instead of inventing something new around it.
  
  

• Make the product easier to keep up with
  If something is working in the background, people shouldn’t have to keep reopening the app just to check what’s happening.
  
  

• Turn one idea into a bigger system
  The same mascot and states can work across the app, widgets, Live Activities and the Mac notch without starting from scratch every time.