VisuallyMeta

Writing

Field Notes

Working notes, experiments and thinking on AI, product and design.

  1. When the requirements are met but the client still wants more

    Context: A bank needed a video calling and scheduling platform for its relationship managers, connected to its existing CRM, with notifications and support for customers in India and abroad. My job was to build a full working prototype, not mockups.

    Why banks need this now

    Two shifts made video banking a priority rather than a nice-to-have:

    1. Bank calls became one-way.
    TRAI now requires banks to make service and transactional calls from the dedicated 1600 number series, so customers can tell a genuine bank call from a fraudulent one. That helps with trust, but these numbers don't take incoming calls. A customer who misses an RM's call can't simply call back. The bank needs a channel where the conversation is scheduled and two-way.

    2. Banks are competing for NRI customers.
    The RBI's special FCNR(B) deposit window in 2026 let banks offer NRIs higher rates on foreign currency deposits, and lenders began engaging more actively with NRI customers across key overseas markets. Those customers are in different time zones and countries, often unable to visit a branch, and expensive to reach by international phone call. A scheduled video call with their RM fits their situation far better. socialnews

    Regulation made outbound calls more trustworthy but harder to call back. NRI demand made distance the main obstacle. Video banking addresses both.

    What I did

    • Built the prototype end to end with Claude Code.
    • Covered every requirement in the brief.
    • Demoed it live to stakeholders as a working product rather than a slide walkthrough.

    What happened

    The prototype met their needs as written in the brief. The client still wasn't satisfied. They wanted a "cherry on top": something beyond the brief, and in some cases beyond what current technology can do.

    Meeting the requirements isn't the same as meeting the expectation. A brief records what a client can put into words, not what they imagine.

    What I'm thinking about

    • Was the gap in the brief or in the moment? A working prototype makes the possibilities feel real, so the client starts imagining further. That reaction suggests the prototype did its job.
    • Separating the impossible from the unfamiliar. Some of what sounds impossible is possible but hasn't been done in banking yet. Finding the one feasible thing in the wish list could be the real cherry.
    • Where to draw the line. Chasing features the technology can't yet deliver risks the project. The skill is saying "not yet" in a way that keeps the client excited.

    Status: Open. Let's see where it goes.

  2. The clients ignored the charts

    What happened: I showed clients the redesigned monitoring dashboard: an Overview tab full of charts, and an RTM tab with five sub-tabs (Agents, Inbound, Outbound, Campaign, OBD). The Overview tab got almost no reaction. RTM got all the questions.

    What they actually asked for:

    • Which agents are idle right now?
    • Who has been on an unusually long call?
    • Which campaigns have run out of leads?
    • Filter inbound calls by queue status.

    Supervisors didn't want to see how the day was going. They wanted to know what needed their attention right now.

    What changed:

    • A right-side drawer for each row in Agents, Inbound, Outbound and Campaigns, with live actions in it: Monitor, Whisper, Barge.
    • Advanced filters for each tab, with an estimated record count shown before the filter is applied. Supervisors can see the size of a query first, which also keeps API calls efficient.

    Workflow note: Screens were built in HTML with Claude Code first, then ported into Figma for refinement.

  3. One Detector Library (Checkpoint vs Moment)

    Initial approach. The existing platform had scattered concepts — checklists, highlights, entities, signals — plus 143 live detectors.

    Where it broke. Overlapping vocabulary meant overlapping screens. Nobody could say cleanly what was scored and what was merely observed.

    Resolution. Collapsed everything into one unified Detector Library. A detector assigned to a template renders as a scored Checkpoint; an unassigned detector firing in the wild renders as an observed Moment (unscored). Detectors are typed — rule (deterministic) vs instructional (AI) — versioned, and pinned to each evaluation. Retired: checklist, highlight, entity, signal. This unification later flipped the entire build order (see §6).

    Two more locks that came out of the same work:

    • All three detector states must be authored — pass, fail, and not applicable. "Not applicable" is a first-class state that changes the scoring denominator, not an afterthought.
    • Overrides happen only at the checkpoint leaf, recomputing upward with a delta preview before commit (e.g. parameter 25 → 50 · total 62 → 68). Parent-level overrides break explainability; showing the consequence before the click turns a reflex into a considered judgment.
  4. Analytics: Clara Dashboard

    We started on flat, comfortable ground. The scope for Analytics was strong — clean charts, solid metrics, everything a dashboard is supposed to have. We felt good. The line was steady and high.

    Then we fell into the hole.

    The problem was quiet at first, easy to miss: we had designed the whole thing from our side of the glass. We were thinking like people who build charts, not like people who live with results. And a customer who has run their Agentic AI Voice Platform for a month doesn't open Analytics to admire charts. They walk in carrying real weight — business questions:

    "Is my AI actually helping my business?"
    "Where am I losing opportunities?"
    "How can I improve my agents and campaigns?"

    Our beautiful scope had no answer to any of that. That was the bottom of the hole.

    Climbing out meant flipping the entire frame — designing for the people who'd actually use it, and more specifically, for the perspective each person brings based on their job:

    • The campaign / operations manager — "Is it working?"
    • The sales / growth owner — "Am I making money?"
    • The inbound / support lead — "Are we dropping the ball?"
    • The product / AI owner — "Does it feel good to the caller?"

    Once the questions led the design instead of the charts, everything reorganized around them. We came out of the hole standing higher than where we started — not with a prettier dashboard, but with one that actually answers for itself.

  5. Docs as a design tool, not a handoff

    I had to spec out Cloud Telephony page by page for the dev team. My first instinct was to open Figma and start annotating screens. Instead I gave Claude the codebase and asked it to write markdown specs for each page. First two files came back accurate but useless — every button, every column, every colour dutifully listed. Screenshots in prose.

    So I flipped the brief. I asked Claude to drop the CSS notes and audit each page as a designer would — flagging what should change, not just what exists. Every file since has a designer's note, 🆕 markers on improvements, and a before/after table at the bottom.

    The output is now doing two jobs at once: it's the build spec for the dev, and it's my UX proposal for the cofounder. The 🆕 tags let him decide what's in scope without me having to write two documents. What I learned: getting Claude to describe code is low leverage. Getting it to audit code with me, while I make the design calls, is where the compounding starts. The markdown is the artefact. The audit is the actual work.

  6. Reverse-engineering as a design method

    I've been reading our own codebase to write the specs, not the other way round. Dashboard through left-nav, seven markdown files, each one describing what the screen is today and what it should be — every proposed improvement flagged so a dev can scope it without guessing what's new.

    Turns out AI is genuinely good at the archaeology: crawl the code, tell me every nav item, every route, every existing state. That frees me to do the part I'm actually for — deciding what's wrong with it. It's a nice inversion. The machine reconstructs the present, I argue for the future.

  7. Starting with Clara Design

    Now that the information architecture is done and the full flow has been shared with every stakeholder — feedback folded in, use cases refined — I've started fine-tuning the design against our brand guide.

    The setup was half the fun: I connected the Figma plugin to Claude Code and handed over my design file, which it read and turned into a clean Markdown reference for Claritel's brand colors.

    Then I fed that same design file back into Claude Code and got to work. I also brought in Wonder — an AI-first design app — and was able to generate design directly from my inputs. A few skills pulled the weight along the way: emilkowalski/skill, /impeccable init, and Leonxlnx/taste-skill.

    Hope to share the result soon.

  8. Designed the Information Architecture

    Working on a user flow is one thing. Refining its information architecture — stress-testing every button, every feature, the core flow itself against our requirements — is another entirely. There was a lot to fine-tune. It felt like designing a car, then making sure people could actually open the door, sit down, and drive.

  9. Onboarding for Clara

    Designed this onboarding screen for Clara — and the process is worth talking about more than the output. I used Claude Code to build the frontend directly, pulling inspiration and code from ReactBits. No Figma first. No handoff. Just straight from idea to working interface. The workflow is shifting, and I'm leaning into it.

  10. Working on Clara

    Sat down with the product expert to map out Clara from scratch — user flows, feature set, the full architecture of an Agentic AI Voice platform. The kind of session where you walk in with assumptions and walk out with a completely different mental model of what the product needs to be.

  11. Empty states are a product decision

    I almost treated empty states as an afterthought. But when I started listing them out for Claritel, I realized every empty state is a moment where the user either gets unstuck or gives up.

    I catalogued 20+ empty states and success states, each with specific trigger conditions, headline copy, and CTAs.

  12. The layer AI won't add unless you make it

    Our left nav was a flat list of ~14 items. Technically fine. Design-dead. Audio Library sat invisibly disconnected from IVR Design — even though it exists to feed IVRs. No badges on actionable items, no grouping, no semantic relationships.

    AI shipped the list. It won't tell you the list has no meaning. Grouping related destinations, surfacing pending callbacks, giving inactive items a reason to relate to each other — that's the thinking you have to bring. The build is cheap now. Knowing what deserves to be built is the whole game.