experiment: replace landing with workshop introduction

- Added Welcome card (Before we begin) to idle state
- Reduced textarea from 10 to 6 rows
- Added reassurance text below Analyse button
- Removed redundant empty-state placeholder
- Closed Experiment 03 (Partially confirmed) in evolution log
- Added Experiment 04: Facilitated Workshop Introduction
- Added Entry Experience section to UX guidelines
This commit is contained in:
2026-08-05 12:14:30 +01:00
parent 742bd09ddc
commit 048f31f43b
3 changed files with 114 additions and 29 deletions
+14
View File
@@ -322,3 +322,17 @@ Headings should be clean. Remove unnecessary subheadings that duplicate context.
Cards should have consistent border radius, padding, and heading treatment across the workspace.
An Investigation Map Preview should look provisional — lighter borders, muted text, subtle background — so the user knows it is a preview rather than completed content.
## Entry Experience
The landing page is not the investigation workspace.
The landing page welcomes the user.
The landing page explains what will happen.
Complexity appears progressively.
Users begin with observations rather than conclusions.
The Confidence Engine behaves like a facilitator introducing a workshop — calm, patient, and focused on understanding before acting.
+42 -28
View File
@@ -377,27 +377,49 @@ export default function ScenarioForm() {
return (
<div className="space-y-6">
{status === "idle" && (
<form onSubmit={handleSubmit} className="space-y-4">
<textarea
ref={textareaRef}
value={scenario}
onChange={(e) => setScenario(e.target.value)}
placeholder="Describe the scenario you want analysed..."
rows={10}
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400"
/>
<div className="flex items-center justify-between">
<span className="text-xs text-gray-400">
{scenario.length}/{MAX_LENGTH}
</span>
<button
type="submit"
disabled={!scenario.trim()}
className="rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-40"
>
Analyse
</button>
<form onSubmit={handleSubmit} className="space-y-6">
{/* Welcome introduction */}
<div className="rounded-lg border border-gray-100 bg-gray-50/60 px-6 pt-5 pb-6">
<h2 className="mb-3 text-sm font-semibold tracking-wide text-gray-500 uppercase">Before we begin</h2>
<p className="text-sm leading-relaxed text-gray-700 mb-4">
The Confidence Engine helps build confidence by understanding situations before deciding what to do.
</p>
<p className="text-sm leading-relaxed text-gray-700 mb-3">
You do not need to know exactly what the problem is.
</p>
<p className="text-sm leading-relaxed text-gray-700">
Simply describe what you have observed. We will work through it together, one question at a time.
</p>
</div>
{/* Scenario input */}
<div className="space-y-2">
<textarea
ref={textareaRef}
value={scenario}
onChange={(e) => setScenario(e.target.value)}
placeholder="Describe the scenario you want analysed..."
rows={6}
className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400"
/>
<div className="flex items-center justify-between">
<span className="text-xs text-gray-400">{scenario.length}/{MAX_LENGTH}</span>
<button
type="submit"
disabled={!scenario.trim()}
className="rounded-lg bg-blue-700 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
>
Analyse
</button>
</div>
</div>
{/* Reassurance */}
<p className="text-xs italic text-gray-400">
You do not need all the answers yet.
</p>
</form>
)}
@@ -509,14 +531,6 @@ export default function ScenarioForm() {
</div>
)}
{/* Empty state */}
{status === "idle" && (
<div className="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-6 py-8 text-center">
<p className="text-sm text-gray-400">
Enter a scenario above and click Analyse to begin.
</p>
</div>
)}
</div>
);
}
+58 -1
View File
@@ -198,7 +198,64 @@ Map
Separating these should make the interface feel more like a facilitated investigation than a collection of cards.
Evaluation:
Pending visual review.
Partially confirmed.
Learning:
The workspace feels more coherent when organised into cognitive zones rather than a simple document stack.
However, another distinction emerged that is more important than the zones themselves.
The interface naturally separates into two different modes:
• the active conversation between investigator and facilitator
and
• the shared workspace describing the current understanding.
Unexpected learning:
History feels incorrect when treated as reference information.
History is actually the continuation of the investigator's conversation.
Every response immediately becomes history.
The notebook should therefore grow naturally from the Response area.
The Investigation Status card currently competes with the Current Investigation card.
The current question is the primary focus.
Status is supporting context.
Decision:
Keep the cognitive-zone concept.
Refine the zones around conversational flow instead of card grouping.
Next question:
Can the workspace clearly separate conversation from shared understanding?
### Experiment 04 — Facilitated Workshop Introduction
Hypothesis
Beginning with a facilitator-style introduction will create more confidence than presenting an empty workspace.
Questions
- Does the interface feel more welcoming?
- Does reducing the visual weight of the textarea improve the first experience?
- Does separating "starting" from "investigating" feel natural?
- Does the transition into the investigation workspace feel meaningful?
Status:
Experimental.
No conclusions.
---