Back to work
Atrium cover

Atrium

A CRM that finds the follow-up before you do.

Timeline
Apr – May 2026
Role
Product Designer, at Refract
Deliverables
Design system, product UI, iOS app, dark mode
01context

Atrium is a CRM for founders and salespeople whose day is spread across email, LinkedIn, WhatsApp and Slack. It watches all four, finds the follow-ups, and drafts the reply for you to send.

The product already worked, and it had demand before we arrived. The interface was the problem. It had grown a component at a time, the way a product does when engineering ships faster than design can catch up, and it read as an engineer's tool: dense, inconsistent, and hardest exactly where the founders needed it to be easiest.

Six weeks to rebuild it as a design system and redraw the product on top of it.

No identity work: Atrium had a brand and it stayed. But the visual system inside it was largely undecided, so a fair amount got settled on the way through — Geist over Archivo for the product face, ten muted badge sets narrowed to the palette the chips use now, gradient direction, and a blue-to-orange language reserved for anything the AI had drafted.

02insights

Three things that set the direction.

Insight 01

"Atrium already knew which screen was blocking its buyers"

The team raised it themselves: the config view was too technical for non-technical users, and those users were exactly who they were selling to. A team that can name the screen costing it deals has done the hard half of the research already — it gave the engagement a target that was not a matter of taste.

Insight 02

"There was no system to redraw the product on"

The app had components but no source for them. Before a single screen could be reworked, the live product had to be documented back into Figma — tokens for colour, type, spacing and radius, then the atoms, then the modules built out of those. Six weeks meant the system and the screens had to be built in the same pass, not in sequence.

Insight 03

"Nothing could change what the product does"

Atrium had paying interest and a working back end. That ruled out the version of this job where the interface improves because the scope shrinks. Every surface had to keep every capability it already had and still read as something a salesperson would open by choice.

03the problem

Widen who can operate Atrium without changing what Atrium does.

That is a tighter brief than it sounds. Atrium sells to salespeople and founders, not to operators — nobody in that group is going to learn a configuration language to set up a follow-up. But the product had real customers on the existing behaviour, so nothing could be simplified by removing it. The interface had to get easier while the capability stayed exactly where it was.

Six weeks put a second constraint on top: there was no design system to redraw against, so the kit and the screens had to be built in the same pass. That decided the order of everything — document the live app into tokens and atoms first, then compose each surface out of them, so the last screen costs a fraction of the first.

04solution

Everything below is the live component from the build, not a screenshot of it — the same markup, the same states, the same motion.

The screen that decided who Atrium was for

The automation builder was a split panel: a list on one side, a form on the other, and no way to see a whole workflow at once. It is a full canvas now. A trigger, then the blocks that follow from it, each card stating what fires it, what it does and the conditions attached — read in one pass without opening anything. The palette beside it is what that canvas is drawn in: Atrium's ultramarine at two weights, each with a hovered and a pressed step. It is the interaction ramp rather than the whole system — the badge colours are the ones doing the work on the cards to its left.

The builder assembling itself, on the Figma frame's own keyframes.
Hover a base swatch and it moves to its hovered value; hold it for the pressed one. The tiles below are the reference you are checking it against.

An assistant you have to check twice is slower than none

That is the line the two busiest surfaces were designed against: the message you are part-way through writing, and the list you are working down. So the rewrite arrives beside the sentence you selected rather than replacing it, with the original still there to weigh it against, and anything the AI drafted carries the blue-to-orange treatment so you can tell at a glance which words are yours. The list stays a list for the same reason — sortable, selectable in bulk, not summarised into a verdict you would have to go and verify.

Press the arrow and the draft is actually rewritten.
The list stays a table you can sort and act on in bulk.

The kit under all of it

Before a screen was redrawn, the live app was documented back into Figma: tokens for colour, type, spacing and radius, then the atoms — badges, buttons, inputs, avatars, checkboxes — then the modules built out of those. Six weeks meant the kit and the screens were built in the same pass, which is what made the last surfaces cost a fraction of the first.

Six weights, on the layout grid they were drawn against.
An atom composed into a module.
The home screen is what falls out of the kit. Every part of it already existed as a component before the screen was drawn.

Six weeks, and what it left

A design system, the product UI redrawn on it, an iOS app and a dark mode, between April and May. The collage is that set in one frame — different jobs, one palette, one type ramp, one handful of shapes.

05outcomes

What shipped, what changed.

  • A design system, built in the same six weeks as the screens: tokens, atoms and modules, documented from the live app rather than invented alongside it.
  • The product UI redrawn on it, screen by screen: including the automation builder the team had named as the one blocking who they could sell to.
  • An iOS app and a dark mode: two dark variants delivered, warm and cool. Cool sits better against the sidebar and is the recommended one; the final call went to Atrium when the engagement ended.
  • It ended on budget, not on completion: which is the ordinary way a fixed engagement finishes, and not the same as it going badly. Atrium offered to act as a reference off the back of it. The designs went into build, and the product goes to launch on these screens.

A note

Atrium had not launched at handoff, so there are no adoption or conversion numbers to report here — the honest claim is what was delivered and what it goes to build on. Happy to talk through the process and the decisions.

Next case study

KeeyuAI agent for post-purchase ecommerce operations.