ADR·002

Brieff, an AI sales copilot you don't have to babysit.

A meeting-prep and follow-up copilot for Account Executives. A working, deployed product with live AI, taken through strategy, IA, UI, brand and front-end build.

Role
Product design: strategy → IA → UI → brand → build
Type
Self-directed, shipped live
Status
Deployed, live AI on seeded CRM data
Stack
Next.js, React, Tailwind, Groq

A1Overview

Sales reps lose one to two hours a day to call prep and CRM admin, and they distrust AI that’s slower, wrong, or uncontrollable. Brieff is a copilot scoped to one job, walk in prepared, close out the admin fast, built around a single thesis: review-and-approve, not chat. Every claim cites its source record, every output is an editable draft, and nothing is ever sent or written without the rep’s approval.

Brieff post-call recap, fully generated: cited summary, action items, CRM diff and drafted follow-up
fig.1 the hero screen: a post-call recap, fully generated and fully reviewable.

A2The problem

A mid-market B2B Account Executive runs 25-40 live opportunities and 5-8 calls a day. Between calls they’re reconstructing context (“who’s on this call, what did we last say, what’s at risk?”) and after calls they owe follow-up emails and CRM updates that pile up. That’s the 1-2 hours a day that isn’t selling.

The trap most “AI for sales” tools fall into: they add an assistant that’s slower and less trustworthythan the rep’s existing muscle memory. Real Salesforce-community pushback is blunt about it: if the AI is slower, less accurate, or less controllable than search, reps route around it.

So the design problem wasn’t “add AI.” It was: earn a skeptical power-user’s trust on a narrow, high-value job.

A3The wedge

Not a general office assistant. An AE copilot inside the CRM, scoped to one loop: prep before the call, recap and follow-up after. Narrow workflow, obvious business value, and a clear trust bar to clear.

The job to be done: “When I’ve got a call coming up and a pile of follow-ups after, help me walk in prepared and close out the admin fast, without babysitting the AI.” North-star metric: active selling time reclaimed per rep per week, surfaced in-product as a “Saved ~14 min” chip after each approved follow-up.

A4The four trust principles

Every decision had to honor these four principles. They’re the spine of the whole product:

  • FastOne step, no chat ping-pong. It must beat the rep's old shortcut, never be slower.
  • TransparentEvery AI claim cites its source record (“from the call on Jun 12”).
  • EditableEverything is a draft; the human approves before anything is written or sent.
  • OptionalNever blocks the rep's existing fast path. AI is a shortcut, not a tollbooth.

The biggest consequence of these principles was a thing I didn’t build: a chatbot.Studying M365 Copilot, I adopted its task-grade ideas (reassignable owner and due chips on actions, sales-signal tags on summary bullets, a responsible-AI disclosure line) and deliberately rejected its Q&A chat panel. A conversation surface violates “Fast” and invites the babysitting reps already distrust.

A5The core loop

Three screens, one workspace shell.

Home: the rep’s day. Next call, this-week stats, today’s meetings as a card grid, quick actions. A command center, not a cold open.

Brieff home: next call, weekly stats, meeting card grid
fig.2 home, the workspace.

Prep: a read-optimized brief. “Walk in knowing” (one primary insight plus three supporting leads with the detail collapsed), attendees with roles, likely objections, and copyable discovery questions. Posture is skim and trust your read of the room.

Brieff prep brief: walk-in-knowing insights, attendees, objections, discovery questions
fig.3 prep, the pre-call brief.

Recap, the hero: paste rough notes once, get a cited summary, owner-assigned action items, a reviewable CRM diff (stage/next-step/health, each Approve/Reject), and a drafted follow-up email. Approve & send, then “Saved ~14 min.” Transparency is made spatial: a sticky left rail shows exactly which records the AI read (“Brieff read · 4 records”) and every bullet links to its source.

Brieff recap after sending: CRM updated, follow-up sent, time-saved chip
fig.4 recap, sent: CRM updated, follow-up away, time saved.

B1Selected design decisions

“The UI feels off”: the honest one. The first recap pass was a stack of identical white cards: monotone, low-density, and it read like a form, not a workspace. I called it out, then fixed it research-first, locking references (Attio’s density, HubSpot and Gong’s left context rail, Linear’s section rhythm) and rebuilding into a two-pane layout: a sticky context rail beside a denser work column with the follow-up email elevated as the primary action. The rail is the Transparent principle made physical.

First version of the recap: a monotone stack of identical white cards
fig.5 before: v1, the card stack that read like a form (and scrolled like one).
Final recap: two-pane layout with sticky context rail and dense work column
fig.6 after: v3, the two-pane workspace. This before/after is the centerpiece of the redesign.

Accessibility isn’t optional. A contrast audit caught a metadata grey failing WCAG AA (2.52:1). Fixed the secondary and tertiary greys and introduced a stepped type scale (title → section → body → meta) so hierarchy comes from weight and color, never from shrinking text below legibility.

Fill vs. distribute.On wide monitors the layout either capped early (dead zones) or stretched single elements (a button floating at the far edge). The resolution: don’t add width, add columns. Dashboards fill with a card grid; record pages distribute into multi-column flows at comfortable widths. “Fill vs. cap” was a false binary. The answer is distribution.

B2The rebrand: Relay to Brieff

The product shipped its UI as “Relay,” a placeholder that was generic and un-ownable. I coined Brieff, the Workable/Airtable trick of doubling a letter to make a real word trademarkable. It names the product (a briefbefore and after every meeting), and the doubled ff became the logo device: the wordmark reads “Brief,” but the second f carries the brand color.

The wordmark itself is drawn, not typed. It starts from Halyard Display, the brand’s display face, but I reworked the letterforms to make it ours: the r, the i, and of course the double f, tweaked and refitted until the pair reads as one mark instead of two letters standing next to each other.

The color work is the part I’m proudest of as reasoning, not taste. The mark started purple on instinct, detoured into a bright azure, and the azure taught the lesson: it read like Facebook. Rendered comparisons showed why. A white letter on a dark rounded tile isthe Facebook/Messenger form, and blue is the sales-tech category default (Salesforce, Apollo, Outreach, Gong). A blue Brieff disappears into the crowd. So the way back to purple had reasoning behind it this time: the brief was “vibrant, with contrast against the warm paper,” and that’s a color-theory question. The background is yellow-warm, so its complementary is blue-violet, which pops hardest against it. Landed on vivid violet #7C3AED, vibrant but still credible for an enterprise-sales buyer (rejected magenta as too consumer, iris as the over-used Stripe/Linear lane). Tinted the near-black ink to #18121F so the neutrals belong to the accent family.

I also interrogated whether the brand even neededa bespoke icon (research says no for a young brand: wordmark-led, derived ff monogram for the favicon), and replaced the generic hand-rolled icons with Phosphor to escape the default “shadcn dashboard” look. Because the design system is tokenized, the entire re-skin across three screens was a few-line change.

B3Reflection

The hardest and most valuable work here wasn’t visual. It was deciding what not to build (no chatbot, no bespoke symbol, no marketing landing) and defending choices with evidence(category differentiation, complementary contrast, the trust principles) rather than taste. The trust wedge is the product: a copilot a skeptical rep will actually adopt because it’s fast, cites its sources, stays editable, and never gets in the way.

Brieff is deployed and live: paste real notes and you get a real, context-aware recap, generated by a hosted model, with cached outputs kept as a graceful fallback so a demo never breaks. The thinking, the system, the brand, and a working product are all done. The point was never a mockup, it was to ship something a skeptical rep could actually use.