A pickup-planning persona, complete simulated notes, and the design implications each statement supports

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>Trip-planning reserver · persona and evidence</title><style>
*{box-sizing:border-box}body{margin:0;background:#eef1f4;color:#2f3d50;font:16px/1.6 system-ui,sans-serif}main{max-width:1060px;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;line-height:1.35}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:white;border:1px solid #bec8d6;border-radius:8px;margin:22px 0}.scope{background:#3e526c;color:white;padding:20px;border-radius:8px}.question{background:#e3eaf4;border-left:5px solid #748aaf;padding:16px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.records{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.record{padding:16px;background:#f1f5fa;border-top:5px solid #748aaf}.record h3{margin-top:0}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,input,textarea{font:inherit}button{padding:10px 15px;min-height:44px;background:white;color:inherit;border:1px solid #607b9b;border-radius:5px;cursor:pointer}button[aria-pressed="true"]{color:white;background:#3e526c}button:hover{box-shadow:inset 0 0 0 1px #3e526c}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b55d26;outline-offset:3px}table{width:100%;table-layout:fixed;border-collapse:collapse}th,td{padding:12px;border:1px solid #bec8d6;text-align:left;vertical-align:top}th{background:#e3eaf4}th:first-child{width:25%}th:nth-child(2){width:43%}.basis{padding:18px;background:#f5f7fb;border-left:5px solid #748aaf}.compare{padding:18px;border-top:5px solid #9e7951;background:#f8f2e9}.compare.supported{border-color:#658058;background:#edf4e9}.status{padding:16px;background:#fff0d8;border-left:5px solid #b57e43}label{display:block;font-weight:650;margin:14px 0 6px}input,textarea{display:block;width:100%;min-width:0;min-height:44px;padding:10px;color:inherit;background:white;border:1px solid #7d8fa8;border-radius:4px}textarea{min-height:110px;resize:vertical}.blank-field{padding:14px;background:#f3f6fa;border:1px solid #bec8d6;border-radius:6px}footer{border-top:1px solid #bec8d6;padding-top:18px;margin-top:26px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel{padding:16px}.grid,.records{grid-template-columns:1fr}table,tbody,tr,td{display:block}thead{display:none}tr{margin:16px 0;border:1px solid #bec8d6}td{border:0;border-top:1px solid #d1d9e4}td::before{display:block;content:attr(data-label);font-weight:750;margin-bottom:5px}.toolbar button{flex:1 1 140px}}
</style></head><body><main><p class="eyebrow">ORIGINAL FICTIONAL WALKTHROUGHS · PERSONA PRACTICE</p><h1>Trip-planning reserver</h1><p>Connect a collection-planning pattern to the information a reservation view needs to show. Keep the supporting notes and the limits of each statement in view.</p><div class="scope">No participants were recruited or sessions conducted. These complete simulated notes and this practice persona represent no actual library users or research findings.</div><p class="question"><strong>Design question:</strong> What information should the reservation view make easy to read before a collection trip?</p>
<section class="panel" aria-labelledby="profile-title"><h2 id="profile-title">A behavior pattern you can trace</h2><table aria-label="Worked persona with supporting record IDs"><thead><tr><th scope="col">Profile field</th><th scope="col">Worked statement</th><th scope="col">Basis</th></tr></thead><tbody><tr><td data-label="Profile field">Product context</td><td data-label="Worked statement">Planning when and where to collect a reserved book.</td><td data-label="Basis">T1–T2</td></tr><tr><td data-label="Profile field">Goal</td><td data-label="Worked statement">Fit the collection trip around other commitments and the pickup deadline.</td><td data-label="Basis">After-work planning in T1; errands and day selection in T2.</td></tr><tr><td data-label="Profile field">Recurring behavior</td><td data-label="Worked statement">Check the branch and deadline before deciding when to travel.</td><td data-label="Basis">T1–T2</td></tr><tr><td data-label="Profile field">Device context</td><td data-label="Worked statement">The pattern appears on a phone and a laptop in this exercise.</td><td data-label="Basis">T1 and T2 respectively.</td></tr><tr><td data-label="Profile field">Specific friction</td><td data-label="Worked statement">The Ready card in T1 omits the deadline, requiring a visit to account details.</td><td data-label="Basis">T1 only; T2 does not establish the same difficulty.</td></tr><tr><td data-label="Profile field">Design question</td><td data-label="Worked statement">Can the reservation view present readiness, branch, and pickup deadline together clearly enough to support trip planning?</td><td data-label="Basis">An interpretation to investigate, based on T1–T2.</td></tr><tr><td data-label="Profile field">Boundary</td><td data-label="Worked statement">Event browsing is a different task and is outside this practice profile.</td><td data-label="Basis">T3</td></tr></tbody></table><p>The profile includes no age, income, occupation, hobby, portrait or invented quotation. The records do not supply them or establish their relevance to this decision.</p></section>
<section class="panel" aria-labelledby="basis-title"><h2 id="basis-title">Inspect the statement and its scope</h2><div class="toolbar" role="group" aria-label="Persona statement"><button id="goal" type="button" aria-pressed="true">Collection-planning goal</button><button id="friction" type="button" aria-pressed="false">Deadline friction</button></div><div class="basis"><h3 id="statement-title"></h3><p id="statement"></p><p id="statement-scope"></p><div id="selected-notes"></div></div><p id="selection-status" role="status" aria-live="polite">Collection-planning goal selected. Your writing is unchanged.</p><div class="toolbar"><button id="compare" type="button" aria-expanded="false" aria-controls="device-comparison">Compare device claim</button></div><div id="device-comparison" hidden><div class="grid"><article class="compare supported"><h3>Supported task pattern</h3><p>Checks pickup details before planning a collection trip.</p><p>T1 and T2 show this behavior.</p></article><article class="compare"><h3>Unsupported device claim</h3><p>Always uses a phone to plan the trip.</p><p>T2 uses a laptop; the statement excludes part of the pattern.</p></article></div><p class="question"><strong>Narrower revision:</strong> Plans across phone and laptop contexts in this exercise.</p><p id="comparison-t2"></p></div></section>
<section class="panel" aria-labelledby="records-title"><h2 id="records-title">Complete simulated walkthroughs</h2><div class="records"><article class="record"><h3>T1 · Collection after work</h3><p id="t1">On a phone, a person plans a reserved-book pickup after work. The reservation card shows Ready and the branch. They open account details to find the pickup deadline, then compare it with the time available for the trip.</p></article><article class="record"><h3>T2 · Collection among errands</h3><p id="t2">On a laptop, a person plans a reserved-book pickup among other errands. They check the branch and pickup deadline before deciding which day to travel. Both are available in the reservation details.</p></article><article class="record"><h3>T3 · A different goal</h3><p id="t3">On a phone, a person browses library events without a reserved book to collect. They compare event dates and topics to decide which event to attend.</p></article></div><p class="question">T3 also uses a phone but has an event-selection task. Two collection records illustrate grouping; they do not establish population frequency, research sufficiency or a tested improvement.</p></section>
<section class="panel" aria-labelledby="blank-title"><h2 id="blank-title">Blank persona scaffold · your permitted evidence</h2><p>Attach stable note IDs to each proposed statement. Distinguish observation from interpretation. Keep personal or restricted research in the authorized system; use sanitized excerpts here.</p><label for="own-label">Behavior-based profile label</label><input id="own-label"><div class="grid" id="blank-fields"></div><label for="interpretation">Your interpretation and next design question</label><textarea id="interpretation" placeholder="What does the evidence suggest, what limits it, and what needs investigation?"></textarea><div class="toolbar"><button id="reset" type="button">Clear my profile and writing</button></div><p id="status" class="status" role="status" aria-live="polite">The profile scaffold and interpretation start blank. No persona or design outcome is graded.</p><div id="confirmation" hidden><p>Clear your profile label, seven fields and interpretation? The practice profile and source records will stay unchanged.</p><div class="toolbar"><button id="confirm-reset" type="button">Clear typed profile</button><button id="keep" type="button">Keep typed profile</button></div></div></section><footer>Typing is temporary in this open page; reloading clears it. No research is collected, submitted or stored. This page does not recruit participants, score persona accuracy or claim a tested design success.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const records={T1:$('t1').textContent,T2:$('t2').textContent,T3:$('t3').textContent};function choose(mode){const goal=mode==='goal';$('goal').setAttribute('aria-pressed',String(goal));$('friction').setAttribute('aria-pressed',String(!goal));$('statement-title').textContent=goal?'Collection-planning goal':'Deadline friction';$('statement').textContent=goal?'Fit the collection trip around other commitments and the pickup deadline.':'The Ready card in T1 omits the deadline, requiring a visit to account details.';$('statement-scope').textContent=goal?'Basis: after-work planning in T1; errands and day selection in T2. The task pattern spans a phone and a laptop.':'Basis: T1 only. T2 does not establish the same difficulty. Do not turn a single difficulty into a claim about everyone in the group.';$('selected-notes').replaceChildren();for(const id of goal?['T1','T2']:['T1']){const article=document.createElement('article');const h=document.createElement('h3');h.textContent=id+' · complete simulated note';const p=document.createElement('p');p.textContent=records[id];article.append(h,p);$('selected-notes').append(article);}$('selection-status').textContent=(goal?'Collection-planning goal':'Deadline friction')+' selected. Your writing is unchanged.';}$('goal').addEventListener('click',()=>choose('goal'));$('friction').addEventListener('click',()=>choose('friction'));$('comparison-t2').textContent='T2 · '+records.T2;$('compare').addEventListener('click',()=>{const open=$('device-comparison').hidden;$('device-comparison').hidden=!open;$('compare').setAttribute('aria-expanded',String(open));$('compare').textContent=open?'Hide device comparison':'Compare device claim';});for(const [key,title]of [['context','Product context'],['goal','Goal'],['behavior','Recurring behavior'],['device','Device context'],['friction','Specific friction'],['question','Design question'],['boundary','Boundary and contrary evidence']]){const wrap=document.createElement('div');wrap.className='blank-field';const label=document.createElement('label');label.htmlFor='own-'+key;label.textContent=title+' · proposed statement and note IDs';const input=document.createElement('textarea');input.id=label.htmlFor;wrap.append(label,input);$('blank-fields').append(wrap);}$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept your persona scaffold and interpretation.';$('reset').focus();});$('confirm-reset').addEventListener('click',()=>{for(const field of document.querySelectorAll('input,textarea'))field.value='';$('confirmation').hidden=true;$('status').textContent='Your typed profile and interpretation were cleared. Practice records, selected statement and device comparison are unchanged.';$('own-label').focus();});choose('goal');})();</script></body></html>