Homebase Assistant

Visual cues that indicate agentic workflows in the app

What is the Homebase Assistant?

It’s a company-wide effort to incorporate agentic workflows throughout the app in order to:

  • Empower managers to work better (and not just faster) by drastically reducing repetitive tasks and saving them time
  • Position ourselves as enablers of this quality work and provide value

We’ll differentiate them through subtle yet unique styling that aims to be distinct but not distracting.


Read more about what makes something a “HB Assistant”, how does this involve AI, and how we talk about this to customers.


HB Assistant visual cues

Both visual cues should be visible in the resting or final state.

Lightning bolt

  • Use as a standalone icon placed on the specific area that triggers or shows the assistant
  • Don’t use in buttons or as a replacement for bullets.

Gradient border

Apply to the following components:

Selection card + lightning bolt

States

Turned off (default)

Shows that this part of the app offers an enhancement but it hasn’t been turned on by the user yet.

  • Lightning bolt: default color for that section (see iconography color)
  • Gradient border: default border for component

Turned on + working

The Assistant is on and at work. The animation represents the “in progress” aspect of this state.

  • Lightning bolt: animated gradient while turning on, purple haze when turned on.
  • Gradient border: animated border with pink, purple, and neon yellow
Lightning bolt

 

Done working / resting state

The Assistant is done and has made its suggestion to the user. The user can now accept it or not.

  • Lightning bolt: purple haze
  • Gradient border: border with pink, purple, and neon yellow (yellow at the bottom), no animation.

Are all states necessary every time?

No.

If the suggestion is automatically prompted by the system and doesn’t need to be turned on, show a one-time animation and go straight to resting state.

Applying look and feel

Lightning bolt

  • Use icon “AI bolt”
  • Choose selection color “AI border, Active”
  • If icon is in rest state, icon color should be Purple Haze

Gradient border

  • Change component stroke choosing “AI Border, Active” or “AI Border, Rest”
  • Change stroke weight to 2

Examples

Magic Assistant Manager Log

Treatment is applied only to where we’ll supercharge the action through AI by rewriting it to “make it better.”

AI-enhanced Manager Log

AI-enhanced frequent shifts

AI treatment is applied only to the frequent shift suggestion, and not the entire scheduler or the entire Add shift modal.

Frequent shits