A fresh-eyes UX review of the workspace preview region — the chrome above and below the website, and the lost before/after flip — seen through a real support agent who needs to do clear things fast. Source-grounded against CaseWorkspaceView.tsx & BrowserChrome.tsx.
Draft for Robert’s annotation · not approved · no building yet
01
The persona — “Marisol,” 3 weeks in
Every recommendation below is judged by whether it helps her, not whether it’s clever.
Marisol works DE support. Came from a vet clinic’s front desk — sharp, friendly, not technical. Lives in Salesforce and email. A ticket lands: “Dr. Lang wants the homepage line changed from ‘Accepting new clients’ to ‘Now accepting new patients.’” Her mental model is a sticky note: find the words, change the words, make sure I didn’t break anything, tell Dr. Lang it’s done. She doesn’t know what an iframe, a “phase,” or a “blink-comparator” is. She won’t read 11px gray text. She trusts what’s big and obvious, and she’s quietly afraid of publishing something wrong to a real animal hospital’s website.
The throughline: Marisol’s attention should live on the website, and every control that acts on it should be within that gaze. Today the design splits her between a chat column that holds the levers and a preview that holds the evidence.
02
The three headline calls
My opinionated recommendations in one breath — the rest of the doc is the why.
Above the browser
Cut the fake browser frame
The traffic-light dots + lock + URL pill (BrowserChrome) read as “mockup” — undercutting that this is Dr. Lang’s real site — and steal ~38px above the one thing she came to see. Replace with a thin caption: “Dr. Lang’s homepage · live preview.”
Above & below
Collapse 3 bands into 1 + 1
“Live preview” and “N changes applied” print both above and below; “not published” is said 3×. Say the safety line once, calmly. Keep one status/undo strip below.
The flip
Move it onto the preview
The Original ⇄ Proposed control sits in the left chat column; the change it flips happens on the right. Relocate it onto the bar directly above the iframe, make it large, pair Approve/Skip with it, and give Space a persistent label.
03
Walk-through — where Marisol’s eyes go
Watch her do the Dr. Lang ticket, top to bottom. The red step is the breakage.
She lands.Left = case + chat + checklist. Right = the website with a fake browser frame on top. First subconscious read of that frame: “this is a demo / mockup” — the opposite of the trust we want.
She types the requestinto chat. Good — chat-first is intuitive. The agent works; the “Working — preparing the changes…” then “Your move — reviewing 1 of 1” header appears. This is the best thing in the UI. Keep it, make it louder.
The moment that matters — “is the change right?”She looks at the website on the right, expecting to see before/after there. But the flip control is a small toggle on the left, in a gold card below the chat, with an 11px hint “· tap Space to flip.” Eyes right, lever left, shortcut invisible. This is a spatial design error, not a discoverability tweak.
She approves.Then notices the same status is written above and below the browser, “not published” three times. She doesn’t know which to trust, so she trusts none.
04
Question 1 — the stuff above & below. Valuable?
Mostly no: three bars doing the work of one, plus a costume. Inventory + verdict for each.
CUTFake browser frame
Dots + lock + URL pill (BrowserChrome.tsx). Value to Marisol: negative — reads as mockup, steals space. Replace with one thin caption naming the page.
DEDUPE“changes applied” count
Shown twice (above + below). Useful once. Keep the lower one as an undo tray; delete the duplicate above.
SAY 1דnot published / dry-run”
Said 3×. Very valuable — her safety blanket — but triplication reads as nervous, not reassuring. Consolidate to one calm, prominent line.
KEEPRevert buttons
Valuable — this is her undo. Keep, and relabel the strip “Undo recent changes.”
DEMOTE“Pin layout”
Minor power-user control sitting in prime real estate. Shrink to a small icon.
RULEThe principle
The website is the star; chrome should be a quiet caption, not two competing status bars and a costume.
05
Question 2 — the flip is supposed to be easy
You’re right that it’s lost. Why it’s lost is structural, not cosmetic.
Wrong side of the screen
The change is visual; it happens in the website on the right. The flip control lives in the chat column on the left. Compare-the-picture controls belong on the picture.
Appears when its column is smallest
In review phase the layout shrinks the left aside to ~34% to give the preview room — correct — but the approve/compare controls are stranded in the column that just got squeezed. The phase layout and the control placement fight each other.
The shortcut is a secret
Space genuinely works as a blink-comparator — a lovely mechanic — but its only signpost is 11px faint text inside a card she’s not looking at.
Inconsistent microcopy
“tap Space to flip” vs “tap Space to blink before/after”; “Showing the page so far” vs “Showing the current page.” Same gesture, two vocabularies.
Sharpest finding: the right move — preview dominates in review phase — only pays off if the review controls ride along onto the preview. Right now the layout sends the space right and leaves the levers left.
Two more snags a fresh agent hits
“Confirm & next” vs “Approve & apply” — two verbs for the same act, depending on queue-vs-single plumbing she can’t see. Pick one verb. · The applying overlay says “Reloading the site…” — but the dead-still flip’s whole point is no reload. Soften to “Updating the preview…”
06
Recommendations, in priority order
Thin slices, highest leverage first.
P1
Move compare + approve onto the preview
Highest leverage. Fixes Q2 and resolves the phase-layout contradiction. Left column keeps only the narrative (whose-move header + checklist); acting moves right, onto the evidence.
P2
Collapse the chrome
One thin caption above (name the page), one honest status/undo strip below; cut the fake browser frame. Fixes Q1.
P3
Make Space discoverable
A persistent labeled chip on the preview (“Original ⇄ Proposed — press Space”); consider hold-to-reveal as the headline gesture.
P4
Unify verbs & microcopy
One verb for accept; one vocabulary for the flip; fix the “reloading” wording.
07
Open questions — the red-pen targets
1 ★
Flip mechanic — toggle moved to the preview, vs. hold-to-reveal?
A press-and-hold “hold to see original” makes the after the default truth and the before a quick peek — arguably more discoverable as a labeled button than a toggle. Your call on the gesture.
4 ★
The 700px read-column cap (from the layout deploy).
On wide monitors, read phase still lets the preview dominate. Keep 700px for line-comfort, or have read phase actively shrink the preview so reading truly wins? Connected to P1 — if controls move onto the preview, a narrower preview in read phase costs nothing.
2
Cut the fake browser frame entirely, or keep a minimal version?
I lean cut-to-caption.
3
How loud should the safety messaging be?
One calm line, or a persistent always-visible “Preview only — nothing is published” banner she can never miss?
5
Scope of this pass.
A focused “preview region” fix, or the moment to rethink the whole left/right division of labor?