Recordings
Nineteen short screen recordings, one for each workflow and role. They were made on 2026-10-09 on the real demo stack, with Playwright. A red dot shows the pointer. The videos have no sound. Under each video, the text tells what happens and the stumbles that the recording found.
How they were made, and how to make them again: design/recordings/README.md.
Operator
A person of the team. Works in the admin, on a laptop.
01 · First sign in today
Sign in; Today with "What Annoudio does" and the countsThe operator signs in to the admin and lands on Today. The help "What Annoudio does" opens, then the three counts (Waiting for review, Processing, Returned to members) and the line "Last 7 days".
02 · Add widget to site
Add a widget to a site: Recording, Site, Snippet; copy the snippetThe operator selects Add a widget, then walks the 3 steps: Recording (Ferry crossing, 1962), Site (River Voices), Snippet. Copy the snippet says "Copied."; the live widget shows below the snippet; Done goes back to Today.
03 · Try it preview
Recording page → Try it → preview page with the live widget → Open the Annotate pageOn the recording page, the region "Widgets of this recording" shows the Annotate address and Try it: tell a story. Try it opens the Annotate page as a member sees it, with Back to the site; that link goes to the operator's preview page. There the live widget plays and opens a story. Open the Annotate page opens the member's page again.
Stumbles seen while recording:
- On a 1280 px screen the Annotate page is a narrow column at the left edge; two thirds of the window stay empty.
- "Back to the site" lands on the preview page scrolled down to the widget: the heading and the help line ("This is the widget as visitors see it…") are above the fold, so the operator does not see where they are.
04 · Vocabulary
Vocabulary: add a question from the catalogue, the list "Places" and two items, the field lockIn the project River Voices, tab Vocabulary: Add a question opens the catalogue; the questions already asked show "✓ asked", and When it happened (Place was asked in the first run) becomes a question of the form. Tab Lists: a second list named "places" is refused ("Places exists.") with the way to the list. On the page of Places, New item + Add twice (Old jetty, Ferry ghat): the operator stays on the list. Back on Vocabulary, Edit: Topics shows the field lock: "N stories answer this question. Kind and list are fixed."
05 · Theme colour picker
Theme tab: the accent colour with the colour picker, the contrast readout, the live widgetIn the project River Voices, tab Theme: the live widget sits beside the fields. The accent colour changes with the colour swatch to a light orange: the readout says the contrast is too low for text, and the widget's buttons and "Tell a story" link follow. A darker red typed as hex passes; Save. (After the recording the script puts the accent back to #0b6e4f.)
06 · Review publish
Review stories → a waiting story → chips → Publish dialog with preview → the next story opensReview stories lists the waiting stories, oldest first. Every row has its state badge. The operator opens the oldest waiting story (an earlier voice note by Asha): the chips (member, project, recording), the answers and "Told on localhost:8091". Publish opens the dialog "Publish this story?" with the story as visitors will see it; Publish the story shows "Published. Visitors see it within one minute." and the next waiting story opens.
07 · Return to member
Return to the member, with a reasonOn a waiting story (Asha's story from video 10, with its answers) the operator selects Return to the member. Return the story with no reason says "Write the reason. The member sees it." The operator writes the reason and returns the story: "Returned to the member.", and the next waiting story opens, as after Publish.
08 · Invite codes
Project → Sign-in tab → Make invite codes → the list of codesThe operator opens the project River Voices from Projects, then Settings and the tab Sign-in. "How members sign in" is "Both". Under Invite codes, 3 codes, 30 members per code, label "Workshop 12 Oct", then Make invite codes. The new codes show in full once; the table lists every code by its first letters, with label, uses, last day and state.
09 · Relationships
Relationships: recording "Used in projects" → project Overview → Members → a member pageOn the recording page, "Used in projects" has the chip River Voices · N published · N waiting (it opens those stories) and the project link. The project link opens the project Overview: counts that open their lists, the widgets of the project with the same per-state chip, and the chip N members told stories here, which opens Members. A member opens with the member's stories by state and invite codes.
Stumbles seen while recording:
- The widget chip says "8 published · 5 waiting", while the Overview stat says "9 Published": the stat counts the published reply too (its heading is "Stories and replies"), so the two numbers still differ at a glance.
- The member "Operator test", made before the fix, is not marked as a test member and still counts in "7 members told stories here"; only members made after the fix get the mark (audit-fixes-notes.md, decision 3).
16 · Walks member flow from preview
Preview page → Annotate → send → back to the preview → review → publish → the widget shows itOn the preview page of the widget, the operator selects Tell a story in the widget. The Annotate page asks for a member sign-in (an invite code), then the operator types 0:07–0:09 and a story and selects Send for review. The Annotate page sends the operator back to the preview page: "Your story is sent." In Review stories the story says it was told on the preview page of the admin; Publish → Publish the story. Back on the preview page, the widget shows the story (the wait for the stories cache is cut).
Stumbles seen while recording:
- The operator, signed in to the admin, must sign in again as a member on the Annotate page: the admin sign-in does not count there.
- To try the member flow the operator makes a member account with the operator email (here "Operator test"); it then counts in Members and in "N members told stories here" like a real member, with no mark that it was a test.
Member
A person of the community. Tells stories on the Annotate page, on a phone.
10 · Tell a story
From the WordPress page: Tell a story, invite code, name, drag a range, answer, Send for reviewOn the WordPress demo page (phone), the member selects Tell a story in the widget. The Annotate page asks to sign in: Have an invite code?, an email and a code from the operator (typed in lower case with a space: case, spaces and the hyphen do not matter). First sign-in: the name "Asha". On the form, a drag on the waveform marks the range and the fields follow; the story text; the answers Place = North landing and Topics = Horn; Send for review. The Start and End fields sit right under the waveform, with Use current time (0:00). The browser goes back to the WordPress page, and the widget says "Your story is sent. It shows here after review."
11 · Voice note
Record a voice note; Processing, then Waiting for review on Your storiesThe member (signed in from video 10) opens the Annotate page at 0:06, writes a line, selects Record a voice note, then Stop the voice note and Attach this voice note (Chromium's fake microphone gives a beep). Right after Attach the form says "Processing. You can send the story now." Send for review: this Annotate page has no return address, so the done screen "Your story is sent" shows the state, already Waiting for review (the worker took about 2 s). Your stories lists it under Waiting for review. (When the worker is slower, the script waits on Your stories with the Processing card, fast-forwarded 4×.)
Stumbles seen while recording:
- The voice note is processed from the moment of Attach ("Processing. You can send the story now.") and is ready in about 2 s, so after Send for review the story is at once Waiting for review: the member never sees the state Processing on the done screen or on Your stories.
- Cards on Your stories carry no date or time: three stories on the same range (0:06–0:10) with the same text look identical, and the member cannot tell which one is new.
12 · Returned and resubmit
Your stories shows Returned with the reason → Change the story → Send againOn Your stories, the group Returned to you shows the story with the operator's reason from video 07. Change the story opens the page "Change your story" with the banner "Returned to you" and the reason. The member adds a line to the story and selects Send again; on Your stories the story is under Waiting for review with the badge Sent again.
13 · Reply
Widget → Reply on a published story → write → sendOn the WordPress page, the member opens Leela's published story in the widget and selects Reply. The Annotate page "Reply to a story" shows the story above the field. The member writes the reply and sends it; the browser goes back to the WordPress page, the widget opens the story and says "Your reply is sent. It shows here after review."
Visitor
Anyone on the site. Plays the recording and reads the stories in the widget.
14 · Widget
The WordPress page: play, open a story, its answers, the thread, Tell a storyA visitor on the WordPress demo page: Play plays the recording and the time ranges light up. Selecting Asha's story plays its range and shows its answers ("Place: North landing" and the tag Horn). Leela's story opens its thread with the reply of video 13 (published by the operator off camera). Tell a story sits under the controls; the rights line is at the end of the list.
15 · Omeka S
The Omeka S page: the same widget, play, open a storyThe same widget on the Omeka S demo page, with the theme of River Voices: Play, then Asha's story with its answer, then Leela's story with its reply, and Tell a story.
Site maintainer
Puts the widget on a site: a plugin, or the snippet by hand.
17 · WordPress block
WordPress: the plugin settings say "Connected"; an author adds the block, types the recording number, publishesIn WordPress, the administrator opens Settings → Annoudio: the stack address, the project, and the line "Connected to River Voices (project river-voices) at http://127.0.0.1:3500." Then an author (who may not paste HTML) writes a new post, searches the inserter for "widget", adds the Annoudio widget block, and types the recording number 1: the block says "Recording found: Ferry crossing, 1962". Publish; the published post shows the widget with its stories, and it plays.
18 · Omeka S module
Omeka S: the module says "Connected"; the page editor: add the block, pick the media, type the number, save, viewIn Omeka S, the module configuration of Annoudio says "Connected to River Voices (project river-voices) at http://127.0.0.1:3500." The maintainer adds a page to the site, adds the Annoudio widget block, types the recording number 1 ("Recording found: Ferry crossing, 1962" shows before any save) and attaches the Omeka media "Ferry crossing, 1962" as the audio, then Save: "Page successfully updated". The public page shows the widget, and it plays.
19 · Hand built page
A hand-built page: copy the snippet, add the website, open the page, change the theme, reloadA maintainer with a hand-built site. In the admin, the recording page: Copy the snippet. The two lines go into the page's HTML file (off camera). On the project's tab Project, the site's address goes on the Websites list, then Save. The page, served from that address (a small local server), shows the widget with its stories. Then the accent colour changes in the Theme tab (Save), and the site page is opened again and reloaded, with no change to its HTML: the widget shows the new red accent at once (the theme file is no longer cached for 5 minutes). (After the recording the script puts the accent back to #0b6e4f.)
Stumbles seen while recording:
- After "Add Website" the new row is folded ("New website"): the maintainer must open it before typing the address.