A five-phase first-class journey with complete simulated notes and a proposed pre-visit information change

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>First ceramics class · journey and evidence</title><style>*{box-sizing:border-box}body{margin:0;background:#f3efe9;color:#3e3b36;font:16px/1.6 system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:28px}h1{font:700 clamp(31px,5vw,48px)/1.12 Georgia,serif;margin:12px 0 18px}h2{font-size:24px;line-height:1.3}h3{font-size:19px}p{margin:8px 0 16px}p,h1,h2,h3,label,button,td,th{overflow-wrap:anywhere}div,section,article{min-width:0}.eyebrow{font-size:16px;letter-spacing:.08em;font-weight:750}.panel{padding:22px;background:#fffefa;border:1px solid #cbbfb3;border-radius:8px;margin:22px 0}.scope{padding:20px;background:#6c5247;color:white;border-radius:8px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.record{padding:16px;margin:14px 0;background:#f4eee4;border-left:4px solid #a68663}.proposal{background:#edf2e6;border-color:#7e945c}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,textarea{font:inherit}button{min-height:44px;padding:10px 14px;color:inherit;background:white;border:1px solid #9b7e67;border-radius:5px;cursor:pointer}button[aria-pressed="true"]{background:#6c5247;color:white}button:hover{box-shadow:inset 0 0 0 1px #6c5247}button:focus-visible,textarea:focus-visible{outline:3px solid #b35d25;outline-offset:3px}table{width:100%;table-layout:fixed;border-collapse:collapse}th,td{padding:12px;border:1px solid #cbbfb3;text-align:left;vertical-align:top}th{background:#ede4d8}th:first-child{width:18%}td p{margin:6px 0 12px}.note{padding:16px;background:#fff0d9;border-left:5px solid #b27a3e}label{display:block;font-weight:650;margin:14px 0 6px}textarea{display:block;width:100%;min-width:0;min-height:125px;padding:10px;border:1px solid #9b897a;border-radius:4px;background:white;color:inherit;resize:vertical}footer{border-top:1px solid #cbbfb3;margin-top:26px;padding-top:18px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel{padding:16px}.grid{grid-template-columns:1fr}table,tbody,tr,td{display:block}thead{display:none}tr{margin:16px 0;border:1px solid #cbbfb3}td{border:0;border-top:1px solid #ded5cb}td::before{content:attr(data-label);display:block;font-weight:750;margin-bottom:6px}.toolbar button{flex:1 1 120px}}</style></head><body><main><p class="eyebrow">ORIGINAL FICTIONAL WALKTHROUGH · NO CUSTOMER RESEARCH</p><h1>The booking is only one step in the visit.</h1><p>Follow a first-time ceramics-class attendee from comparing classes to joining one. Keep the information needed between touchpoints visible.</p><div class="scope"><strong>Actor:</strong> first-time ceramics-class attendee.<br><strong>Goal:</strong> choose a suitable class and arrive ready to join.<br><strong>Bounds:</strong> comparing classes through joining, not the entire customer relationship. No actual booking, quotation, customer research or measured emotion is represented.</div>
<section class="panel" aria-labelledby="map-title"><h2 id="map-title">The complete five-phase map</h2><table aria-label="Five-phase customer journey with note-linked opportunities"><thead><tr><th scope="col">Phase</th><th scope="col">Customer action and touchpoint</th><th scope="col">Question or information need</th><th scope="col">Basis and opportunity</th></tr></thead><tbody id="map"></tbody></table></section>
<section class="panel" aria-labelledby="selected-title"><h2 id="selected-title">Inspect a transition</h2><div class="toolbar" id="phase-buttons" role="group" aria-label="Journey phase"></div><h3 id="phase-title"></h3><p id="phase-action"></p><p id="phase-question" class="note"></p><p id="phase-note" class="record"></p><p id="phase-emotion">Emotion: Not recorded.</p><p id="phase-status" role="status" aria-live="polite">Arrive selected. Your writing is unchanged.</p><div class="toolbar" role="group" aria-label="Evidence or proposal view"><button id="show-evidence" type="button" aria-pressed="true">Current evidence</button><button id="show-proposal" type="button" aria-pressed="false">Proposed pre-visit change</button></div><div id="current-view"><h3>Keep the original evidence intact</h3><p>J2 and J3 provide no entrance instructions. J4 records a question about two doors. J5 supplies reception directions before joining. None of those notes measures how a proposed earlier summary would work.</p></div><div id="proposal-view" hidden><h3>Proposed pre-visit change · not a tested result</h3><p class="record proposal">Give the reservation confirmation a concise preparation summary or link containing materials guidance and verified entrance instructions. Align it with the reminder and arrival sign so all touchpoints describe the same visit.</p><p><strong>Basis: J2–J4.</strong> Actual entrance wording or a photograph still needs confirmation from the studio. No address, door number, photo, sent summary or successful arrival is supplied.</p><div class="grid"><div><h3>J2 remains unchanged</h3><p id="proposal-j2"></p></div><div><h3>J4 remains unchanged</h3><p id="proposal-j4"></p></div></div><p class="note">Evaluate the proposal through the actual design and research process. No effectiveness, satisfaction, conversion or time-saving result is established.</p></div><button id="emotion-claim" type="button" aria-expanded="false" aria-controls="emotion-comparison">Compare emotion claim</button><div id="emotion-comparison" hidden><div class="grid"><article class="record"><h3>Unsupported claim</h3><p>“All attendees are anxious.”</p><p>The notes supply no emotion report or population-wide finding.</p></article><article class="record proposal"><h3>Supported description</h3><p>Visitor asks which door to use in J4.</p><p>This records an action without inventing a feeling.</p></article></div></div></section>
<section class="panel" aria-labelledby="notes-title"><h2 id="notes-title">Complete simulated notes · J1–J5</h2><div id="notes"></div></section>
<section class="panel" aria-labelledby="blank-title"><h2 id="blank-title">Blank journey and interpretation scaffold</h2><div class="grid" id="blank-fields"></div><div class="toolbar"><button id="reset" type="button">Clear my journey notes</button></div><p id="status" role="status" aria-live="polite">Six writing fields start blank. Phase and proposal changes preserve them.</p><div id="confirmation" hidden><p>Clear all six own-journey fields? The original notes, selected phase and proposed change stay unchanged.</p><div class="toolbar"><button id="confirm-reset" type="button">Clear typed notes</button><button id="keep" type="button">Keep typed notes</button></div></div></section><footer>Typing is temporary in this open page; reloading clears it. No customer data is collected, booking or message sent, research graded, file exported or work stored.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const phases=[{id:'J1',phase:'Compare',note:'The visitor reads the web class schedule. It states beginner level; the listing does not explain materials to bring.',action:'Reads the web schedule.',question:'Is the class suitable, and what materials are needed?',basis:'Beginner level is stated; materials are unclear in J1.'},{id:'J2',phase:'Reserve',note:'The visitor reserves a place and receives a confirmation. The confirmation contains no arrival instructions.',action:'Books and reads the confirmation.',question:'What should I do before coming?',basis:'No arrival instructions in J2; consider what the confirmation should link to.'},{id:'J3',phase:'Prepare',note:'A reminder email links to materials information. It contains no entrance photograph or entrance description.',action:'Opens the reminder and materials link.',question:'What should I bring, and how will I find the entrance?',basis:'Materials information is linked in J3; entrance information is not supplied there.'},{id:'J4',phase:'Arrive',note:'The outside sign names the studio, but there are two doors without a clear entry label. The visitor asks which door to use.',action:'Reads the studio sign and asks about the doors.',question:'Which door should I use?',basis:'The entry question is visible in J4; review the pre-visit instruction and arrival sign together.'},{id:'J5',phase:'Join',note:'At reception, staff explain the correct entrance and where to collect the class kit. The visitor receives those directions before joining.',action:'Receives reception directions and kit information.',question:'Where do I collect the kit and go next?',basis:'J5 records the explanation; the map does not establish whether earlier information would have removed the question.'}];function choose(id){const p=phases.find(p=>p.id===id);for(const button of document.querySelectorAll('#phase-buttons button'))button.setAttribute('aria-pressed',String(button.id==='phase-'+id));$('phase-title').textContent=p.id+' · '+p.phase;$('phase-action').textContent='Customer action/touchpoint: '+p.action;$('phase-question').textContent='Question: '+p.question;$('phase-note').textContent=p.id+' · Original simulated note: '+p.note;$('phase-status').textContent=p.phase+' selected. Your writing is unchanged.';}for(const p of phases){const tr=document.createElement('tr');for(const [label,text]of [['Phase',p.phase+' · '+p.id],['Customer action and touchpoint',p.action],['Question or information need',p.question],['Basis and opportunity',p.basis+' Emotion: Not recorded.']]){const td=document.createElement('td');td.dataset.label=label;td.textContent=text;tr.append(td);}$('map').append(tr);const b=document.createElement('button');b.type='button';b.id='phase-'+p.id;b.textContent=p.phase;b.setAttribute('aria-pressed','false');b.addEventListener('click',()=>choose(p.id));$('phase-buttons').append(b);const a=document.createElement('article');a.className='record';const h=document.createElement('h3');h.textContent=p.id+' · '+p.phase;const note=document.createElement('p');note.textContent=p.note;a.append(h,note);$('notes').append(a);}$('proposal-j2').textContent=phases[1].note;$('proposal-j4').textContent=phases[3].note;function view(proposed){$('show-proposal').setAttribute('aria-pressed',String(proposed));$('show-evidence').setAttribute('aria-pressed',String(!proposed));$('proposal-view').hidden=!proposed;$('current-view').hidden=proposed;}$('show-proposal').addEventListener('click',()=>view(true));$('show-evidence').addEventListener('click',()=>view(false));$('emotion-claim').addEventListener('click',()=>{const open=$('emotion-comparison').hidden;$('emotion-comparison').hidden=!open;$('emotion-claim').setAttribute('aria-expanded',String(open));$('emotion-claim').textContent=open?'Hide emotion comparison':'Compare emotion claim';});for(const [id,title]of [['actor','Actor, bounded goal and start/end points'],['evidence','Permitted observations · IDs and context'],['map','Phases, actions, touchpoints and information needs'],['emotions','Supported thoughts/emotions · reference or Not recorded'],['proposal','Proposed changes · evidence basis and questions'],['interpretation','Temporary interpretation and research questions']]){const box=document.createElement('div');const label=document.createElement('label');label.htmlFor='own-'+id;label.textContent=title;const field=document.createElement('textarea');field.id=label.htmlFor;box.append(label,field);$('blank-fields').append(box);}$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept all six journey fields.';$('reset').focus();});$('confirm-reset').addEventListener('click',()=>{for(const field of document.querySelectorAll('textarea'))field.value='';$('confirmation').hidden=true;$('status').textContent='Your journey fields were cleared. Original notes, selected phase and proposal view are unchanged.';$('own-actor').focus();});choose('J4');})();</script></body></html>