A suitcase that shows what the agent is doing

The job

The agent searches flights and hotels, checks them against the company’s travel policy and sends trips for approval. Each of those moments feels different for the person on the other side: typing, waiting, getting a result, hitting a limit, waiting for someone else.

The mascot’s job is to make each moment readable at a glance, in the chat header and next to every answer.

Version 1: two eyes

The first version was a navy square with two white eyes. Four moods: idle, listening, thinking and happy. Pure CSS and one small JavaScript helper, no images.

The eyes did all the work. They blink twice every 4.2 seconds, look down at the input while you type, look around while the agent searches, and turn into arcs when the answer is ready.

The wishlist for the next round was already clear: narrow the eyes when a trip is over policy, a sleepy blink while it waits for approval, eyes that follow the cursor, and a wink when the chat opens.

Version 2: the suitcase

In the second version the eyes moved onto the brand’s green suitcase from Figma. The handle became its own layer, so it can tilt while the agent thinks and pop up when something goes wrong.

Every item on the wishlist became a mood: surprised for an over-policy hotel or a sold-out flight, sleepy while a manager approves the trip, eyes that follow the cursor when nothing is happening, and a wink to say hello. Seven moods in total.

Small sizes need their own body

Below 40 pixels the tall suitcase turns into a thin stripe and the eyes get lost. So small sizes use a shorter, almost square body with slightly bigger eyes. The handle, the eyes and every mood stay the same.

Light by design

• The body and the handle live in one hidden SVG on the page. Every mascot points to it with a single <use>, so dozens of avatars in a long chat weigh almost nothing.
• Only transform is animated, so nothing is laid out or repainted again.
• Only the mascot in the chat header and the empty-chat hero react. Avatars next to answers just blink, otherwise the whole chat would come alive at once.
• With reduced motion turned on nothing moves, but the expression still changes.
• Screen readers skip it. What the agent is doing is also written in the chat.

All seven moods

Click a mascot in the table to replay its mood.