HR.

Case II — FlyOnTheWall · AI Meeting Notes for Mac

FlyOnTheWall

How do you design trust into every pixel when the entire product is built on a promise — your audio never leaves your Mac?

Industry
Native macOS · Privacy-first AI
Role
Lead Product Designer · End-to-end · Creo IT
Duration
12 weeks → ongoing
Year
2025

§ The pitch

Shipped to the Mac App Store, August 2025. Competing with $1.5B unicorns by refusing to send your audio to the cloud — and letting you bring your own AI key.

Launch

Aug 2025

Distribution

Mac App Store

Ship weight

34.6 MB

Pricing

$4.99/mo · free with own key

§ The brief

Build the privacy-first alternative.

The AI meeting notes market is a $3.5 billion race to the cloud. Every major player — Otter, Fireflies, Granola, Read AI — sends your audio off-device. Most also send a visible bot to your meeting. The category is consolidating fast, and incumbents are racing to lock users into their AI models and their data infrastructure.

Creo IT bet the opposite direction. Every recording stays on the user's Mac. Every AI key is the user's own. The product would launch as a 34.6 MB menu bar utility competing with apps a hundred times its size.

I led the entire design — brand, product, marketing surfaces, and the App Store storefront. Sole designer of record, from the first wireframe to the shipped 1.0 on macOS 15.0+.

§ Market context

What the giants got wrong.

Two macro trends reshaped the category in 2025–2026. First, bot fatigue: users stopped tolerating an opaque robot joining their calls. Granola rode that wave from a $250M valuation to $1.5B in ten months. Second, commoditization: Zoom, Teams, and Meet all shipped native AI notes, collapsing the floor under standalone transcription apps.

Differentiation now lives in three places — privacy, AI flexibility, and native craft — and almost no competitor commits to all three. Granola comes closest on privacy but locks users into its own cloud model and charges $14–35/month. Jamie is bot-free but processes audio on its servers. Otter ships visible bots. Fireflies ships visible bots.

The gap I designed into was the unowned middle: a Mac-native app that processes audio locally, lets the user pick the model, and prices itself under five dollars a month.

§ Design principles

Three rules I shipped every screen against.

  1. I.

    Show the contract, not the policy.

    Privacy isn't a footnote — it's a pulse in the menu bar that says 'audio is local, right now.' I designed every recording surface to make the promise visible without saying it twice.

  2. II.

    Make BYOK feel like a premium choice, not a configuration chore.

    Bring-your-own-key is a developer-flavored feature. I designed the setup flow to feel as honest about its trade-offs as Apple's onboarding is about Face ID — one screen, four model choices, no jargon.

  3. III.

    The smallest surface wins.

    A 34.6 MB menu bar utility competing against 500 MB Electron apps. Every kilobyte saved is a UX choice. Discipline is what users feel, even when they can't name it.

§ Selected design moves

I.

The recording pulse

A discreet red dot in the menu bar while recording. Click it and a popover shows exactly where the audio lives (your Mac), how long it's been recording, and one button to stop. The pulse is the privacy proof — no marketing copy needed.

II.

BYOK as a moment

One screen, four logos — Claude, GPT, Gemini, Grok. Paste your key, click connect. The BYOK setup happens after the user's first recording, so they feel the value before the friction. Free dev tier means power users never hit a paywall.

III.

Notes that prove themselves

Structured notes (summary · decisions · action items) sit beside a 'Chat with this meeting' panel. Every AI answer cites the timestamp it came from. No cross-meeting search by default — that would require server-side indexing, which would violate the contract.

IV.

Integrations that honor the line

Notion and Slack export, but only structured notes. Audio never leaves. The export flow asks the user to review before sending, every time. Friction, but the right kind.

V.

Copy that respects the reader

Microcopy throughout uses 'audio stays on your Mac' instead of 'industry-leading privacy infrastructure.' The audience for this app reads the privacy policy. We design like they do.

§ Design workflow

From blank Figma file to Mac App Store, in twelve weeks.

Sole designer of record. Every decision below was mine to defend — to engineering, to the founder, and to users who would later read every word.

  1. Discover

    Frame the unowned middle.

    Mapped 14 competitors — Otter, Granola, Fireflies, Jamie, Read AI — on a privacy × pricing grid. Found the gap: Mac-native, on-device, BYOK, sub-$5.

    • Competitive audit
    • Stakeholder interviews
    • Positioning memo
  2. Define

    Three rules I shipped against.

    Wrote design principles that doubled as decision filters. Every feature got gated against them: show the contract, BYOK as a moment, smallest surface wins.

    • Design principles
    • Job stories
    • Success metrics
  3. System

    Tokens before screens.

    Built the Material-3-shaped design system first — color · type · spacing variables with Light/Dark modes. Atoms before molecules before organisms before screens.

    • MD3 token set
    • Atomic library
    • Light + Dark theming
  4. Prototype

    Clickable, end-to-end.

    Wired every flow in Figma — onboarding through export — and pressure-tested it with five interviews. The recording pulse and BYOK setup were both rewritten after round one.

    • Hi-fi mockups
    • Figma prototype
    • 5× user interviews
  5. Ship

    Mac App Store, August 2025.

    Dev-mode handoff with annotated specs, weekly design QA against builds, App Store storefront design. Now iterating against telemetry and direct user feedback.

    • Dev-mode specs
    • App Store assets
    • Live · ongoing iteration

§ Stack

Tools that earned their place.

  • FigmaDesign
  • SwiftUIBuild
  • Core MLOn-device AI
  • WhisperTranscription
  • Anthropic · GPT · Gemini · GrokBYOK
  • LinearTracking
  • TestFlightQA

§ AI pipeline

AI in the loop.
Human at the wheel.

One pipeline. Eight stages. Each one hands off cleanly to the next — Notion bookends the doc trail, ChatGPT shapes the prompt, Claude executes through the Figma MCP, and every artifact lands in a place a teammate could pick up cold.

  1. Notion

    Business doc & design brief

    Goals, constraints, success criteria, and the brand voice land in a single Notion canvas. Nothing moves until this reads cleanly.

  2. ChatGPT

    Prompt engineering for Claude

    Use ChatGPT to shape the brief into a tight, system-grade prompt — persona, context, constraints, success bar — that Claude will execute against.

  3. ClaudeFigma MCP

    Wireframes — generated in Figma

    Claude pairs with the Figma MCP and writes the low-fi structure directly into the file. Real frames, real components, real positions — not a screenshot.

  4. FigmaNotion

    Iteration on wireframes

    Hands-on edits in Figma; reasoning + decisions captured back in Notion. Loop until the structure earns its place against the brief.

  5. ClaudeFigma

    Building components with Claude

    Atoms → molecules → organisms. Tokens, variables, naming conventions. Claude does the heavy lift; I keep the judgment calls.

  6. Figma

    Mid-fi screens· Optional

    Only if the project needs a stakeholder gate before hi-fi. Greyscale layouts that prove the IA without committing the visual.

  7. Figma

    Hi-fi screens

    Pixel-perfect frames with real copy, real data, real states. Light and dark, edge cases handled, motion noted in-frame.

  8. Notion

    Storyboard documentation

    The final handoff lives in Notion: decisions, scope cuts, telemetry plan, what shipped, what didn't, what's next.

The same loop runs at any scale — a 12-week shipped product or a 3-day design sprint. What changes is the depth at each stage, not the order of the moves.

§ Sitemap

Menu bar, main window, settings. Three surfaces, one contract.

The product lives across a tiny menu-bar pulse and a 902-px notes window. The IA is built so any privacy decision is reachable in one click. Click a node to inspect.

§ User flow

Welcome → first recording → notes that cite themselves.

Six states, one privacy contract held the whole way through. No bots, no cloud, no surprises. Hit play to watch the flow auto-advance.

Step I / VI

Currently inspecting

Welcome

Brand-first splash. The promise is the headline: bot-free, on-device, bring your own AI key.

Next: Continue

§ Outcomes

Aug 2025
Launched to the Mac App Store. Live, paid, real users on macOS 15.0+.
34.6 MB
Ship weight. A fraction of Otter, Granola, or Fireflies — every byte a deliberate choice.
3 segments
Beachhead locked: developer power-users, privacy-first professionals (legal, clinical, financial), and Mac-native minimalists.

§ What I learned

The discipline is the moat.

The hardest part of designing a privacy-first product isn't the UI — it's holding the line every time a feature wants to phone home. Cross-meeting search would have been a great feature. Server-side embeddings would have made summaries faster. Both would have broken the contract. I chose the slower path. Two quarters in, the bet is paying.

If I were starting again, I'd invest earlier in visible privacy state — make the local-only architecture readable from the recording surface itself, not from settings. Trust is earned in glances, not in dialogs.

Currently viewing: FlyOnTheWall