Human-in-the-loop design
I own the collaboration between stakeholders and agents
I sent a stakeholder a working application instead of a prototype. They reviewed it in their own browser and returned forty-eight notes grouped by screen.
Claude Code made responding to those notes fast. It did not make the notes unambiguous.
One described the problem accurately. One referred to wording that was not on the screen where the reviewer believed it was. Another combined two requests when only one was worth building. My role was to reconcile the feedback with the artifact, decide what the next version should mean, and check that the generated implementation preserved that decision.
AI reduced the cost of producing another version. It increased the importance of making sure we were producing the same version everyone thought we had agreed to.
- Build under reviewmetin-oasis-v6.fly.devOpen the reviewed build
- Next versionmetin-oasis-v7.fly.devOpen the resulting build
The shared artifact
Running code gave us something concrete to disagree about
A mockup asks reviewers to imagine the missing behavior. A running application puts that behavior into the conversation.
The stakeholder could scroll the tables, inspect the hierarchy, read the actual labels, and react to controls in context. Their notes used language from the interface and were grouped by the screens they had reviewed.
That removed some ambiguity. It did not remove all of it.
People can look at the same interface and form different explanations of what feels wrong. A reviewer may identify a symptom instead of its cause, refer to the wrong label, or bundle several ideas into one request. Running code makes those gaps visible enough to discuss; it does not resolve them automatically.
A shared artifact is not the same thing as shared understanding.
The human loop
The workflow still depended on communication
The review moved through five translations.
The review is a sequence, not a cycle. The stakeholder experiences the running product. They translate that experience into written feedback describing what appears wrong. Design judgment — a human gate — reconciles the note, the artifact, the design system and the priority. AI implementation produces the next coded response. Human review — the second human gate — checks what the implementation now communicates. The next running version returns to the shared conversation.
Every transition could change the meaning.
The stakeholder’s wording might not match the visible problem. My interpretation might miss their underlying concern. The agent could implement a sentence literally while violating the intent behind it. The next build could be technically correct and still communicate the wrong thing.
The loop worked because no participant’s output was treated as self-validating — not the stakeholder’s note, not my interpretation, and not the agent’s code.
The agent accelerated one step in the loop. It did not replace the loop.
The feedback
Forty-eight notes were evidence, not instructions
The notes came back grouped by six product surfaces. Most were concrete: rename a label, distinguish positive from negative performance, keep columns visible during horizontal scrolling.
Specific language made the notes easier to locate in the product and repository. It did not mean every proposed response should be implemented literally.
Each note still required three questions.
- What did the reviewer notice?Identify the underlying friction or inconsistency.
- Does the note describe it accurately?Compare the written request with the running interface.
- What belongs in this version?Accept, reshape, separate, or hold the proposed change.
Where the notes landed
- Home17 notes · App.jsx
- Jobs13 notes · JobsPage.jsx
- AiR Sessions5 notes · SessionsPage · PastSessionsPage
- Overall Body1 note · App.jsx
- Ask OASES6 notes · held in this round
- Top Nav6 notes · held in this round
The ledger records thirty-six notes as addressed and twelve as not this round. These classifications describe the documented response across the six surfaces. They do not mean every note mapped literally or completely to one code change.
Read the complete 48-note review
HomeApp.jsx17
- Remove anchors bar right-hand side items (clarify functionality first)
- Remove sub-heading "Importer Control Tower"
- Replace "Network Health Satisfaction" with greeting: "Good morning, Metin"
- Cards: Bring summary numbers to top, lagging indicators to bottom
- Info icons: Add descriptions (from Varun's proto). If long, add "Learn more" CTA with popup
- Progress visuals: Fix color coding — exceeding target vs falling behind should use different colors (good/bad/needs attention)
- DSI/VMSI visual: Simplify — current treatment is overkill
- "4% vs yesterday": Keep inline for visual balance after removing graph. Color-code good/bad/needs attention
- Date picker: Consolidate day/month into single picker. User should pick date/date range
- Add section separators for readability (cards or divider lines)
- Remove Brand Health section, keep Retailer Health
- Replace retailer columns with 4 metric graphs (Support TAT, Warranty TAT, Policy Adherence, Tech Capability). Explore gauges, sliders, other formats. Show target vs current.
- Each graph card: Add "View details" action
- Anchor on At Risk / Healthy / Watch pill style for status across all pages (including Jobs)
- Rename "Executive Intervention Queue" to "Intervention Queue"
- Make intervention rows collapsible. Add filters (by status) and expand/collapse all icons
- Collapsed state: Show Title, Status, Type, Time, CTA
JobsJobsPage.jsx13
- App launcher says "Jobs" — should say "AIR Jobs" for consistency
- Add separator line between tab menu and tab content
- Add summary metrics above table: Total Jobs, Open, Paused, Done, Policy Adherence
- Review + icon style (box vs flat) — other icons sit on floor
- Change "+ Job" to "+ New Job" or "New Job"
- Add "+ New Tab" to tab menu (replaces "List View" unless different purpose)
- Add curved border/radius around table
- Add checkboxes to each row
- Fix column header readability
- Add sticky columns (first 3) for horizontal scroll
- Fix data alignment in columns
- Remove AI Summary hover button. Row hover = color change indicating clickable. Click opens right pane
- Right pane content: PM to define
AiR SessionsSessionsPage · PastSessionsPage5
- Remove "Personal Room 10244" from top nav. Use "AiR Sessions" or "Sessions" with app icon
- Remove Settings and Copy Personal Room from top nav (app-specific, move to body)
- Apply all Jobs feedback here too (separator lines, summary metrics, table styling, etc.)
- PM to define right pane for upcoming and completed sessions
- Improve pagination — "Page 1 of 3" at bottom not easily discoverable. Explore other patterns
Overall BodyApp.jsx1
- Put white body inside a curved wrapper so header color becomes thin border around body (discuss further)
Ask OASESAiResponse · Drawer — untouched6
- Show greeting instead of blank screen on open
- Animate AI "thinking" before showing results (gathering info from different apps)
- Remove separators between bullets. Keep clean. No CTAs per bullet
- After 3rd bullet: Show actions as suggestions. Personable tone, not robotic
- Change "Ask AI" to "Ask OASES". Add + icon for agents/models (LLM interface inspiration)
- (Future: Interface will change further — Varun working on ideas next week)
Top NavNavModal · NavRight — untouched6
- Move "Importer Control Tower" from body to top nav heading: "OASES | Mission Control"
- Add bookmark icon next to search and app launcher (quick actions: Start new session, Start new job)
- User profile: Remove "User settings" section (shows in Profile & Preferences)
- User profile: Remove "Integrations" under Admin settings
- User profile: Change "Billing & Plan" to "Billing"
- App launcher: Instead of square box, take full div width — apps appear inline next to each other
The decisions
Three notes that prove a point: human collaboration is still paramount
The most useful evidence is not the number of notes processed. It is the distance between what was written and what the next version needed.
These three notes produced three different decisions.
The note accurately described the problem
The stakeholder saw four performance cards using nearly the same amber treatment. A result twenty percent over target looked too similar to one seven percent short of it.
The note, the visible problem, and the intended outcome aligned.
I translated that concern into a system-level treatment rather than changing four cards independently. The next version introduced four semantic states, carried by a colored edge, matching value text, and written language.
The agent accelerated the implementation. The shared understanding already existed.
Shared understanding
Progress visuals: Fix color coding — exceeding target vs falling behind should use different colors.
Before

After

- When the meaning is sharedAI can make a well-understood decision inexpensive to implement.
The requested wording was not where the reviewer thought it was
The reviewed screen did not say “Executive Intervention Queue” in the location the note described. That wording existed elsewhere in the file, but not in the visible anchor the reviewer was reacting to.
What the screen did contain was “Intervention Que” — a misspelling — and a heading whose hierarchy was too weak.
A literal implementation could have searched for “Executive,” changed the wrong occurrence, and reported the note complete. That would have satisfied the sentence without repairing the reviewed interface.
Instead, I compared the note with the running build. The next version corrected “Que” to “Queue” and strengthened the heading using the design system.
The note did not land as written. The concern still changed the work.
Misunderstanding exposed
Rename “Executive Intervention Queue” to “Intervention Queue.”
Before

After

- When the words do not match the artifactHuman review has to repair the shared context before implementation can be trusted.
Agreement on the problem did not require agreement on every solution
The note combined filtering and collapsible rows as if they were one change. They were not.
The need for more usable controls was visible. A single Filter link did not communicate enough capability, so the next version introduced a control group for filtering, export, and sorting.
Collapsible rows would have introduced additional behavior, state, and controls. That part of the request was held.
AI could have implemented both pieces quickly. Speed was not the reason to include them. Separating the note into two decisions made it possible to improve the control surface without accepting unnecessary complexity.
One note, two decisions
Make intervention rows collapsible. Add filters by status and expand/collapse all icons.
Before

After

- When one note contains multiple solutionsHuman judgment separates agreement with the problem from agreement with every proposed response.
The role of AI
AI accelerated execution, not alignment
I brought the feedback into Claude Code and pointed it at the same repository that produced the reviewed build.
That shortened the distance between a decision and something stakeholders could use. Changes governed by the design system could be applied consistently, and the next version could return as running software instead of another representation of future work.
But the agent had no independent way to know:
- Whether the reviewer had named the correct element
- Whether two requests inside one note should stay together
- Whether a literal change addressed the observed problem
- Whether a technically valid solution added more complexity than value
- Whether the generated result communicated what the people involved intended
Those remained human questions.
AI can execute a misunderstanding with exceptional speed.
The purpose of the review loop was not to slow the agent down. It was to stop implementation speed from outrunning shared understanding.
The response
The answer came back as another running version
The response changed four files across four of the six reviewed surfaces. It returned at a separate URL so the stakeholder could compare the result with the original build rather than relying on a summary of what had changed.
That preserved the conversation:
- The first build showed what the reviewer experienced.
- The notes recorded how they described it.
- The diff showed how the response was implemented.
- The second build made the interpretation visible.
- The next review could begin from the same shared artifact.
- 48Stakeholder notes
- 36Classified as addressed
- 12Held for another round
- 4Files changed
The classifications describe the documented response, not a claim that thirty-six sentences were implemented literally. The three examples above show how interpretation changed what “addressed” meant.
What this changes
Human collaboration becomes the quality system
AI changes the economics of iteration. Another implementation can arrive before the people involved have finished agreeing on what the last one revealed.
That makes communication a product-quality mechanism.
Stakeholders still need to explain what they experienced. Designers still need to distinguish symptoms from causes and requests from intent. Product and engineering partners still need to negotiate value, cost, and scope. Someone still has to compare the generated result with the decision everyone believed they had made.
Running code improves this collaboration because it gives the conversation a concrete object. AI improves it when it makes a clarified decision faster to test. Neither replaces the people responsible for reaching and maintaining that clarity.
The faster the implementation loop becomes, the more carefully the human loop has to carry meaning.