Design & interfaces

A product no longer has one screen

The same product now lives on a phone, in an admin panel, inside somebody else's chat app and on an editor canvas. Every surface has different rules. Below are four of them, with screens that run in production.

  1. 01Mobile
  2. 02Web
  3. 03AI
  4. 04Diagram
01Surface

Mobile

The screen gets read one-handed, between sets, in a half-dark gym. Anything you can't reach with a thumb, in poor light, at 140bpm, may as well not exist.

GymTime AIMobile

The week's plan

Training days listed with the real names of the machines in the gym, not generic labels.

GymTime AIMobile

The session in progress

A set is logged in one tap. No keyboard opening halfway through a lift.

GymTime AIMobile

The machine library

Over 200 machines, with short instructions and a selection tied to the gym you train in.

02Surface

Web

Here the constraint inverts: someone sits in this screen for eight hours and wants density, not white space. You win with hierarchy and alignment, not by showing less.

ShapePitchDesktop

Delivery cycles

An admin screen: the current cycle, the scopes inside it and progress, on one dense page.

TailThemesDesktop

The theme gallery

Every theme ships with a documented design system. The same grid has to hold a restaurant theme and a dashboard theme alike.

03Surface

AI

An agent has no screen of its own. It lives inside Telegram, Slack or WhatsApp, where the only thing you control is the shape of the message: how short it is, what state it shows, and whether it says plainly what it changed in your systems.

RAReefAgentbot

today

What came into the inbox today?

09:41

14 new messages: 3 quote requests, 2 invoices, the rest newsletters.

09:41

Just the quote requests.

09:42

Quote requests · today

  • 1.Mobilă Trend — 40 desks, delivery in 3 wks
  • 2.Delta Construct — office fit-out, urgent
  • 3.Nord Logistic — contract renewal
09:42

Added all three to the CRM as new leads and set a follow-up for 9am tomorrow.

09:42
Message

Mockup · ReefAgent in Telegram

The design is the shape of the message

  • One message, one thing

    If the answer needs scrolling, the agent answered a different question.

  • A list, not a paragraph

    Structured results read as a numbered list, so you can reply “the second one”.

  • It says what it changed

    When it writes to the CRM or sends an email, it says so explicitly, in the same message.

  • No filler

    No decorative emoji and no “Sure! Here's what I found…”. People read these on the move.

ReefAgentDesktop

The gateway console

The same command line reports which channels are connected. An agent is started here and used somewhere else entirely.

04Surface

Diagram

Editors are the hardest thing to design: the same diagram has to be directly manipulable by a person and programmatically editable by an agent, without two different truths about what's on the canvas.

Wire DiagramDesktop

The diagram editor

Canvas, SVG and Mermaid from one canonical JSON, so agents edit the structure rather than the picture.

Product design

The same thing, for your product

Research, flows, prototypes and a design system your team keeps using without us — on any of the surfaces above.

4
Surfaces designed: mobile, web, chat, canvas
+35%
Satisfaction, after the app redesign
+28%
Retention, over the same period