assessment-model/docs/wireframes/ara-projects/index.html
Daniel Roth a0f865ad85 Add Ara Projects UX wireframes under docs/wireframes
Static Stitch export previously only available locally; referenced by the
Ara Projects issues (#405-#429). README explains which parts are spec vs
placeholder.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-20 15:15:21 +00:00

67 lines
5.8 KiB
HTML

<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ara Projects — User Journeys (wireframe export)</title>
<style>
:root { color-scheme: light dark; }
body { font: 15px/1.5 system-ui, sans-serif; max-width: 820px; margin: 0 auto; padding: 40px 24px 80px; color: #111; background: #eef4fc; }
@media (prefers-color-scheme: dark) { body { color: #e8eef6; background: #0f1420; } a { color: #7db9ec; } .t { color:#8a97a8; } }
h1 { color: #2a347a; font-size: 28px; margin-bottom: 4px; }
@media (prefers-color-scheme: dark) { h1, h2 { color: #a9b4ee; } }
.lede { color: #4c5768; margin-top: 0; }
section { background: #fff; border: 1px solid #d2ddec; border-radius: 12px; padding: 8px 24px 20px; margin: 20px 0; }
@media (prefers-color-scheme: dark) { section { background:#161d2b; border-color:#28324a; } }
h2 { color: #2a347a; font-size: 17px; }
ol { padding-left: 22px; margin: 0; }
li { margin: 7px 0; display:flex; justify-content:space-between; gap:16px; align-items:baseline; }
a { color: #2372b5; text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
.t { color: #6f7a8a; font-size: 12.5px; white-space: nowrap; }
.note { color:#6f7a8a; font-size: 12.5px; margin-top: 28px; }
</style></head>
<body>
<h1>Ara Projects — User Journeys</h1>
<p class="lede">Self-contained wireframe export. Each screen links to its cleaned HTML; the right column is the control that advances to the next screen. Works fully offline.</p>
<section>
<h2>Journey 1 — Stonewater admin: set up a project and import the programme</h2>
<ol>
<li><a href="1-admin-import/01-getting-started-empty-state.html">Getting Started (Empty State)</a><span class="t">Create project →</span></li>
<li><a href="1-admin-import/02-project-details.html">Project Details (Step 1)</a><span class="t">Create and continue →</span></li>
<li><a href="1-admin-import/03-select-workstreams.html">Select Workstreams (Step 2)</a><span class="t">Save and continue →</span></li>
<li><a href="1-admin-import/04-configure-stages.html">Configure Stages (Step 3)</a><span class="t">Save and continue →</span></li>
<li><a href="1-admin-import/05-configure-documents.html">Configure Documents (Step 4)</a><span class="t">Save and continue →</span></li>
<li><a href="1-admin-import/06-contractors-permissions.html">Contractors &amp; Permissions (Step 5 - Updated)</a><span class="t">Save and continue →</span></li>
<li><a href="1-admin-import/07-import-upload.html">Import Upload (Step 6)</a><span class="t">Continue →</span></li>
<li><a href="1-admin-import/08-map-columns-rebuilt.html">Map Columns (Rebuilt)</a><span class="t">Validate import →</span></li>
<li><a href="1-admin-import/09-map-columns-workstream-unlocked.html">Map Columns (Workstream Unlocked)</a><span class="t">Validate import →</span></li>
<li><a href="1-admin-import/10-validate-import.html">Validate Import (Import Flow)</a><span class="t">Continue to Summary →</span></li>
<li><a href="1-admin-import/11-review-import-summary.html">Review Import Summary (Import Flow)</a><span class="t">Confirm import →</span></li>
<li><a href="1-admin-import/12-programme-dashboard.html">Programme Dashboard (Three-Band Layout)</a><span class="t">(journey end)</span></li>
</ol>
</section>
<section>
<h2>Journey 2 — Contractor: move a work order through the stages to complete</h2>
<ol>
<li><a href="2-contractor-journey/01-property-view.html">1. Property View (Start)</a><span class="t">Book appointment →</span></li>
<li><a href="2-contractor-journey/02-book-appointment.html">2. Book Appointment (Refined)</a><span class="t">Confirm booking →</span></li>
<li><a href="2-contractor-journey/03-report-no-access.html">3. Report No Access (Contractor View)</a><span class="t">Log no access → Rebook →</span></li>
<li><a href="2-contractor-journey/04-rebook.html">4. Rebook (Refined)</a><span class="t">Confirm booking →</span></li>
<li><a href="2-contractor-journey/05-attend-start.html">5. Attend &amp; Start (Contractor Sidebar)</a><span class="t">Mark on site →</span></li>
<li><a href="2-contractor-journey/06-completion-blocked.html">6. Completion Blocked (Property View)</a><span class="t">Upload →</span></li>
<li><a href="2-contractor-journey/07-upload-evidence.html">7. Upload Evidence (Contractor View)</a><span class="t">Mark completed (4 of 4) →</span></li>
<li><a href="2-contractor-journey/08-completion-cleared.html">8. Completion Cleared (Refined)</a><span class="t">Mark completed →</span></li>
<li><a href="2-contractor-journey/09-marked-completed.html">9. Marked Completed (Refined)</a><span class="t">(journey end)</span></li>
</ol>
</section>
<section>
<h2>Journey 3 — Stonewater admin: toggle into the contractor view</h2>
<ol>
<li><a href="3-contractor-toggle/01-work-orders-admin.html">Work orders (Admin)</a><span class="t">View as contractor →</span></li>
<li><a href="3-contractor-toggle/02-contractor-a-view.html">Contractor A View (Refined Consistency)</a><span class="t">switch → Contractor B</span></li>
<li><a href="3-contractor-toggle/03-contractor-b-view.html">Contractor B View (Refined Consistency)</a><span class="t">switch → Contractor C</span></li>
<li><a href="3-contractor-toggle/04-contractor-c-view.html">Contractor C View (Reconciled Structure)</a><span class="t">Exit contractor view →</span></li>
</ol>
</section>
<p class="note">Source: Stitch project 8537473387290162501. Screens identified by Stitch name (HTML &lt;title&gt; tags are non-unique). Figures are sample data; contractor job descriptions are placeholder text. Tailwind, fonts and images vendored under <code>assets/</code>.</p>
</body></html>