huddlesOpen Huddles
A single black ink circle brushed onto thick cream paper.
Design

Why Huddles looks the way it does

Paper and ink, circles for people, red means live. The design decisions behind the product, and the ones we refused to make.

People ask why Huddles does not look like other collaboration tools, and the honest answer is that we spent more time deciding what to leave out than what to put in. Here are the decisions, and the reasons.

Paper, not a dashboard

The background is paper — a warm off-white in the light, a warm near-black in the dark, never grey. The reason is simple: you are going to look at this all day, and it has to feel like a place rather than an application. Dashboards are for glancing at. A room is for being in.

Everything drawn on the paper is ink. One ink colour, and the type is a plain Helvetica with tight spacing on the headings, because the product is not the typography. The people are the product. The type should get out of their way.

Circles are people. Pills are everything else.

You will notice that every person is a circle and every control is a pill. That is a rule, not a habit. A circle is a face; the shape says somebody before you have read a name. A pill is a thing you can press. Cards have big soft corners because they are surfaces to read, not buttons to hit. Once you know the rule you can read any screen in the product without reading it.

We do not put rings around avatars. A ring is a status, and a person is not a status. The one exception is you: your own avatar has a thin ink border so you can find yourself. It used to be red. We changed it, because —

Red means live. Only live.

One colour means one thing. In Huddles, red means something is happening right now: a huddle that is talking, a broadcast that is on air, a microphone that is open. Green means connected. Nothing else in the interface is allowed to be red, ever, including the leave button (which is red because leaving is a live thing you do right now — the one exception that proves the rule).

The moment you let red mean "error" and "live" and "important" and "delete", it stops meaning anything, and your eye stops going to it. We would rather have one signal that works.

Avatars are identity, not decoration

You pick a gradient, a character, or your face. Whatever you pick is yours, and it never changes with the theme. The gradients are the same twelve in the light and the dark. This sounds obvious, but a lot of products tint avatars to match their palette, and the result is that the people look like part of the furniture. People are not furniture.

No purple. Every AI product in the world has landed on a purple gradient, and it has come to mean "a robot is about to talk to you." Nothing in Huddles is a robot.

Emoji are content, not chrome

You will not find an emoji in a button, a heading, or a menu, with one deliberate exception — the avatar menu marks each row with a small glyph, because a column of identical text is slower to scan than one with a mark beside each line. Otherwise emoji are things people say: reactions, characters, a note above somebody's head. When emoji are decoration, the ones people actually send stop standing out.

Motion has to mean something

Things fade up when they arrive and fade out when they go, on one curve, in a quarter of a second. Beyond that, motion is reserved for things that are true: the little equaliser bars on somebody who is talking, the dots on somebody who is typing, the pulse on a red dot that is live. Those are not decoration. They are the product telling you something that is happening, and they earn their movement.

If you have asked your operating system for less motion, you get less motion — except the reactions, which keep their scatter, because a reaction with no movement is a reaction nobody sees.

Nothing is pinned to the screen

Every card in the space is anchored to the thing it is about. Click a person and their card grows out of them; move the camera and the card moves with them. A card pinned to the corner of the viewport reads as disconnected — a notification about somebody rather than a conversation with them. It was harder to build. It was the right call.

The phone is not a small desktop

On a phone, cards become sheets from the bottom edge with a grab handle, because that is what a hand expects. The whiteboard goes full-bleed with an icon toolbar along the bottom, because sixteen pixels of decorative margin on a 375-pixel screen is eight percent of the screen spent on nothing. The huddle card keeps four verbs and puts the rest behind one More button, because twelve icons in a row is a keyboard, not a card. Destructive actions live in corners, never as a full-width button under the thumb.

What we refused

There is no activity feed. There are no read receipts. There is no "last seen". There is no friend count on anybody's card, and there are no mutual friends, because a count makes people countable and a graph is something you can be conspicuously outside of. There is no leaderboard of who talks most. There is no purple.

A lot of these were suggested, by people who meant well, and every one of them would have made the product busier and a little more like a network and a little less like a room. We kept saying no. We plan to keep saying it.

The test we use

When a new thing lands on a screen we ask one question: would this be in the room? A whiteboard would. A person's face would. A green dot saying somebody is connected would — that is the door being open. A number saying how many friends they have would not, and so it is not.

It is a simple test. It is surprising how much it rules out.

Was this useful?
More from the room
What is Huddles?6 min The third space: why your team needs a room, not another meeting5 min Ten ways teams actually use Huddles5 min
huddles

A room your team is already in, that anyone can walk into from a link.