Composture

Timeline
A weekend
Role
Designer and developer
Skills
Interaction design Creative coding Computer vision Desktop app development
Composture — a shrimp posture tracker on the desktop

Overview

There's a meme of a shrimp hunched over a laptop googling why does my back hurt. I thought it was funny and then I couldn't stop thinking about it, because a shrimp curls up when it cooks and that's exactly what your spine does when you slouch.

I already knew body tracking from p5.js. I'd never made a desktop app before, but I wanted to see if I could.

So Composture watches your posture through your webcam and puts a shrimp on your screen. Sit up and it's fine. Slouch and it starts cooking.

The posture-check shrimp meme

Solution

Raw shrimp — good posture
Raw
Cooking shrimp — starting to slouch
Cooking
Cooked shrimp — dead, slouched
Dead

Slouch and it starts cooking. Stay like that and it dies, and then you're sitting straight for thirty seconds to bring it back.

Hover for your session time, how long you've stayed alive, and how many times you've cooked it.
Hide it, mute it, or recalibrate whenever. It keeps tracking either way.
Every session logged, with times cooked and your best streak.

Key design moments

It shouldn't be a dashboard on your screen all day

Everything I built kept wanting to sit on top of your work. Timers, a counter, the camera feed, an end button. All useful when you want them and clutter the rest of the time.

So it's just the shrimp until you hover over it, and you can drag it anywhere on your screen.

It only worked on me

I started with a fixed threshold and it was fine until other people tried it. Everyone has a different body and desk and idea of what straight feels like. So it calibrates now, three seconds learning your posture when you open it, then it watches how far you drift from that.

It kept nagging

Shifting in your chair shouldn't cook the shrimp. There's a delay before cooking starts, and recovery is basically instant, because sitting up should feel like it worked.

It sounded like every other posture app

Generated beeps felt like an alert. I made custom sounds instead, sparkle and sizzle and a gasp when it dies.

Turn your sound on for this one.

Reflection

Reminders don't work because nothing is at stake.

A notification goes off, you swipe it away, and nothing actually happened. But give someone something to lose and it works, because nobody wants to kill a shrimp even when they know it's a PNG on a webcam feed.

The rest of it was everything past the tracking, which was all new to me, and figuring that out made me feel like I could build whatever I think of and it won't take me that long either.

More projects