SyRF Redesign: Interactive Prototype (v7)¶
What this is¶
An interactive HTML prototype covering the broader SyRF UI redesign — not just Question Management. Use the floating screen-switcher at the bottom of the prototype to navigate between surfaces. The prototype is React + Babel served from a single HTML file with sibling v2/ assets, so it runs by simply opening the file in a browser (internet required for the React/Babel CDN).
This is design exploration, not a frozen spec. Where it conflicts with the feature briefs in this PR, the briefs win; the prototype is here to make the proposed look-and-feel explorable.
What's covered¶
| Surface in the prototype | Authoritative spec |
|---|---|
| Marketing / Home, Sign in, Dashboard, Project overview | Layout-only redesign — no dedicated brief |
| Study review (screening + annotation form, with stage activities switcher) | Screening annotations, Annotation form v2 |
| Studies | Layout-only — no dedicated brief |
| Questions (Design / Assign / Preview / Rationale tabs) | Question management |
| Stage settings (with one-page / tabbed / wizard IA variants) | Stage settings |
| Profiles | Screening profiles |
| Reconcile (rationale / extraction / re-screen workspaces) | Reconciliation |
| Stage filtering (referenced from study review) | Stage filtering |
v7-specific things to look at¶
The "Tweaks" panel (visible in edit mode, top-right) exposes the design questions this revision was built to test:
- Rationale UX — how the exclusion-rationale form should appear when a reviewer clicks Exclude on a stage with rationale configured (
inline/modal/sidesheet). - Reconciler layout — how to compare candidate rationale responses (
side-by-side/unified diff/table). - Stage settings IA — whether per-stage settings should be one long page, tabbed, or a wizard.
- Source panel placement on the reviewer page (
side/top/float). - Form fields — custom inputs vs Angular Material form controls re-styled to fit SyRF.
- Stage activities — preview the review page when the stage is screening-only, annotation-only, or both.
- Serif scope — restrict the serif typeface to page titles only, or extend to form/section chrome.
Provenance¶
- Source: assembled outside the repo over multiple iterations (v1 → v7); v7 is the current head.
- First imported: 2026-04-27.
- Earlier QM-only prototype lived briefly under
qm-designer-handover/05-prototype/(untracked local handover folder) — superseded by this version, which broadens scope beyond Question Management. - Bundle:
prototype.html+ siblingv2/directory (CSS + JSX components). Roughly 1 MB total.
Updating¶
Drop a newer prototype.html and any new/changed v2/* files into this folder and commit. Keep the filename prototype.html so the iframe src and any external links continue to work; bump the version label in the heading above and append a one-line note here about what changed.