Jitterbean is a jittery coffee bean facilitating a five-minute expressive arts activity for friends and family at a café: two minutes of playful, mostly wordless moments on a phone, then a hands-on coffee drawing on small watercolor paper.
Who: mixed ages around one table, each person on their own phone
Where: any café, with drinks already in hand
How people join: a QR code on a small Jitterbean table card opens the web app
What people leave with: their own coffee drawing and a short conversation about where they want to put their energy
Character
Jitterbean is a small coffee bean designed by Sonia in Adobe Illustrator. Jitterbean loves swimming in people's cups and sharing his energy with whoever is sipping. Like Ted Lasso, Jitterbean is curious not judgmental: he helps you see your energy levels, he doesn't rate it.
Layers for animation
The paths are only grouped, never redrawn:
Legs (3): one shape each, set behind the body; they paddle from the top of each leg, staggered
Body: the bean silhouette, which bobs up and down
Eyes (2): a white oval and a pupil; they blink every few seconds, and the pupils look up as energy rises
Lips: the lip shape and smile line, which grow slightly as energy rises
Groove: the light rim and dark cavity, which move with the body
Energy states
One energy value drives every motion. Low energy: half-closed eyes, slow small bob, gentle paddling. High energy: wide eyes, fast big bounce, quick paddling, and a light buzz at the very top of the scale.
Concept: energy and intention
The activity moves people from noticing their energy to choosing where it goes.
Roast = energy: how much energy you have today, from light roast (low) to dark roast (high); darker means more energy because that matches how most people think about strong coffee
What's brewing = intention: where you would like to put that energy today
Every roast is a good roast. The tool shows energy without ranking it, so a sleepy light roast is as welcome as a buzzing dark one.
Flow
Six screens, each with a short prompt on top and the interaction below it. Every reflection screen carries the cue "Take a minute to think, then share with your table."
Meet Jitterbean
Prompt: his backstory and how the prompts work
People tap Start, which turns on sound
Jitterbean bobs and paddles
Roast
Prompt: How's your energy today?
People slide from light to dark roast
Jitterbean's energy rises with the roast, and the coffee under him changes color
Pour
Prompt: What's been giving you energy lately?
People press and hold the cup to pour
Jitterbean floats up on the rising coffee and splashes
Stir
Prompt: What helps you settle?
People trace circles in the cup for three turns
Jitterbean orbits as the crema swirls
Brew
Prompt: What's brewing? Where would you like to put your energy today?
People think and share
Jitterbean waits beside the prompt
Draw
Prompt: Paint where your energy is going
People drip a few drops of coffee while moving their hand, then draw what they see in the shapes with a pen
Pour and stir must be done before the next arrow lights up. The last screen ends with "When you're done, share your drawing with your table."
Expressive arts grounding
The design follows IEATA's description of intermodal expressive arts and the REACE ethics guidance.
Intermodal: one thread, energy, moves through color, gesture, sound, conversation, and drawing
Education, not therapy: prompts invite noticing and sharing; nothing digs into problems
No interpretation: no roast, pour level, or drawing is labeled or explained; people name their own meaning
Literal, emotional, imaginal: the real cup in hand, the feeling of today's energy, and Jitterbean's imaginary swim
Voluntary: every step can be skipped, sharing is an invitation, and nothing is saved
Inclusive: any drink and any age, with text only where needed so it works across languages
Sources: IEATA REACE Code of Ethics · What IEATA does
Visual and sound design
Logo
A square app-style icon: the full Jitterbean art centered on a crema background (#F1E8DE) with rounded corners and a soft tan shadow under his legs. Files: jitterbean-logo.svg and a 1024 px PNG.
Palette & Type
Layout rules
Visual first; text only for the intro and the reflection prompts
Each screen is one compact, centered block: prompt on top, animation below with clear space, button directly under
Large touch targets (44 px or more) for one-handed use with a drink in the other hand
Sound
Gentle and short, built in the browser: bloops on the roast slider, a soft pour while holding, a quiet low swish while stirring, and a two-note chime on each step. Sound starts with the Start tap and has a mute button on every screen.
Facilitation at the table
Materials
Small watercolor papers (postcard size), one or two per person
A pen per person for drawing into the shapes
A small cup of strong black coffee to share (latte barely shows on paper)
Napkins and a flat surface
Jitterbean table card with the QR code
Running it
Set the card on the table and invite people to scan it; no one has to join
Let everyone go through the phone screens at their own pace
At each prompt, pause for a minute, then let whoever wants to share go first
Drip, draw, and lay the papers side by side to look at together
Care notes
Use cooled coffee, especially with children
Ask about what people see in their drawings; never tell them what it means
Passing is always fine, at every step
