[UX] Full mockups with sample data — 3-5 directions for comparison #363

Open
opened 2026-08-25 20:39:24 +00:00 by claude-bot · 2 comments
Contributor

Found in the August 2026 session lifecycle review (#319). Follows the wireframe exploration.

What

From the preferred wireframe concepts, produce 3-5 full mockups at high fidelity, populated with realistic sample data — a campaign mid-arc, several sessions in various states, a real-length transcript and summary, a populated wiki with relationships, pending lore proposals, a live recording in progress.

Sample data is not decoration here. Most of the review's findings only become visible with real content: a dropdown of sessions all reading "Untitled session", a wiki article squeezed to ~39 px of prose beside a fixed sidebar, a proposals queue that renders differently depending on whether it is empty. A mockup with three tidy placeholder rows hides exactly the problems this exercise exists to solve.

The intent is explicitly comparison and mix-and-match — these are alternatives to choose between and recombine, not sequential drafts. Each should be complete enough to judge on its own.

Acceptance criteria

  • 3-5 complete mockups covering every surface in the inventory
  • Realistic sample data throughout, including long text, many items, and empty states
  • Each mockup shown at desktop, tablet and phone widths
  • Both GM and player views represented
  • Loading, error, and in-progress states shown — not only the happy path
  • Presented for direct comparison, with elements individually adoptable
Found in the August 2026 session lifecycle review (#319). Follows the wireframe exploration. ## What From the preferred wireframe concepts, produce **3-5 full mockups** at high fidelity, **populated with realistic sample data** — a campaign mid-arc, several sessions in various states, a real-length transcript and summary, a populated wiki with relationships, pending lore proposals, a live recording in progress. Sample data is not decoration here. Most of the review's findings only become visible with real content: a dropdown of sessions all reading "Untitled session", a wiki article squeezed to ~39 px of prose beside a fixed sidebar, a proposals queue that renders differently depending on whether it is empty. A mockup with three tidy placeholder rows hides exactly the problems this exercise exists to solve. The intent is explicitly **comparison and mix-and-match** — these are alternatives to choose between and recombine, not sequential drafts. Each should be complete enough to judge on its own. ## Acceptance criteria - [ ] 3-5 complete mockups covering every surface in the inventory - [ ] Realistic sample data throughout, including long text, many items, and empty states - [ ] Each mockup shown at desktop, tablet and phone widths - [ ] Both GM and player views represented - [ ] Loading, error, and in-progress states shown — not only the happy path - [ ] Presented for direct comparison, with elements individually adoptable
Author
Contributor

Round two of the design evaluation is built and live (2026-09-10). Recording it here since this issue had no trail yet.

Why round two. Round one's eight wireframe concepts (C0 to C7) mostly went unanswered: players found them overwhelming and too abstract to react to. Three sheets came back (one player, and the GM's player and GM sheets). The owner asked for two, or three if genuinely needed, full-scale mockups with extensive sample data, hosted under questboard-dev with no login, so players and a few outside people could evaluate something concrete.

Owner decisions, which change this issue's acceptance criteria:

  • Two directions, not 3 to 5, chosen from round one's ratings: A — Book & Table (C6, the highest-rated concept and top pick on two of three sheets; GM prep borrows C3's console, and wiki plus rules lookup is reachable at the table) and B — Session First (C2, second overall and the player sheet's top pick; its Review phase decluttered, keeping verified events beside the summary).
  • Invented sample data, not the real campaign, because people outside the campaign will see it. "The Amberwake Accord": fourteen sessions including two cancellations, a 63-entry wiki grown unevenly, an absent player, an undecided RSVP.

What was built. Both mockups share one design system and one data file, so they can only differ in structure, never in polish. Five screens each in phone and desktop frames: home, the session that matters (this week / Plan), the table during a session (GM desktop, player phone), after the session with the event log from #568, and GM prep. Hosted on the feedback site as audience round2 (#590) with a deliberately short form; the landing page is https://questboard-dev.rhoving.com/feedback/mockups (the invitation link carries the key that lets answers save).

Bug on first real use, fixed. The design links were root-relative, so behind the /feedback/ prefix they led to the Quest Board login page, and a trailing slash did the same through Starlette's slash redirect. Fixed and deployed, with a test that no page carries a root-relative link: see the PR opened alongside this comment.

Against the acceptance criteria:

  • Done: realistic sample data with long text and many items; GM and player views; an in-progress state (a live session at the table); presented for direct comparison.
  • Not done: 3 to 5 mockups (two, by the owner's decision); tablet width (phone and desktop only); loading and error states; every surface in the inventory (five core screens each).

Next: collect the round-two responses, bring them back, and settle the final design (#364). Leaving this open until then.

**Round two of the design evaluation is built and live (2026-09-10).** Recording it here since this issue had no trail yet. **Why round two.** Round one's eight wireframe concepts (C0 to C7) mostly went unanswered: players found them overwhelming and too abstract to react to. Three sheets came back (one player, and the GM's player and GM sheets). The owner asked for two, or three if genuinely needed, full-scale mockups with extensive sample data, hosted under questboard-dev with no login, so players and a few outside people could evaluate something concrete. **Owner decisions, which change this issue's acceptance criteria:** - **Two directions, not 3 to 5**, chosen from round one's ratings: **A — Book & Table** (C6, the highest-rated concept and top pick on two of three sheets; GM prep borrows C3's console, and wiki plus rules lookup is reachable at the table) and **B — Session First** (C2, second overall and the player sheet's top pick; its Review phase decluttered, keeping verified events beside the summary). - **Invented sample data, not the real campaign**, because people outside the campaign will see it. "The Amberwake Accord": fourteen sessions including two cancellations, a 63-entry wiki grown unevenly, an absent player, an undecided RSVP. **What was built.** Both mockups share one design system and one data file, so they can only differ in structure, never in polish. Five screens each in phone and desktop frames: home, the session that matters (this week / Plan), the table during a session (GM desktop, player phone), after the session with the event log from #568, and GM prep. Hosted on the feedback site as audience `round2` (#590) with a deliberately short form; the landing page is `https://questboard-dev.rhoving.com/feedback/mockups` (the invitation link carries the key that lets answers save). **Bug on first real use, fixed.** The design links were root-relative, so behind the `/feedback/` prefix they led to the Quest Board login page, and a trailing slash did the same through Starlette's slash redirect. Fixed and deployed, with a test that no page carries a root-relative link: see the PR opened alongside this comment. **Against the acceptance criteria:** - Done: realistic sample data with long text and many items; GM and player views; an in-progress state (a live session at the table); presented for direct comparison. - Not done: 3 to 5 mockups (two, by the owner's decision); tablet width (phone and desktop only); loading and error states; every surface in the inventory (five core screens each). **Next:** collect the round-two responses, bring them back, and settle the final design (#364). Leaving this open until then.
Author
Contributor

Round two now includes the wiki (2026-09-11). Before sending round two out, the owner wanted the wiki designed and in front of players too. The design was worked out with them and recorded in #593, and both mockups now carry it (PR #594, live on dev).

  • Six new screens in each design (6–11): front page and search, an NPC article with its stat block, editing, the map, the party, and a quest. They're built from shared components, so A and B differ only in how the wiki fits into each design:
    • A: a group of chapters in the book's Contents.
    • B: a World destination beside the session strip.
  • The form gained one wiki rating per design and "What would you want from the wiki that isn't there?".
  • Invented data, still. The Amberwake campaign grew a wiki: maps in two atlases joined by a portal, a party with members who came and went, quests, handouts given to one player, and an unidentified ring.
  • Checked: crawls of every player-view frame found none of the 89 GM-only strings. The crawls also turned up two real visibility gaps in the shared helpers, which were fixed before release; #593 has the details, because they matter for the real build.

Same link as before. Nothing has changed for anyone who already has it, and nobody had answered round two yet. Still open until the round-two responses are read.

**Round two now includes the wiki (2026-09-11).** Before sending round two out, the owner wanted the wiki designed and in front of players too. The design was worked out with them and recorded in #593, and both mockups now carry it (PR #594, live on dev). - **Six new screens in each design** (6–11): front page and search, an NPC article with its stat block, editing, the map, the party, and a quest. They're built from shared components, so A and B differ only in how the wiki fits into each design: - **A:** a group of chapters in the book's Contents. - **B:** a World destination beside the session strip. - **The form** gained one wiki rating per design and "What would you want from the wiki that isn't there?". - **Invented data, still.** The Amberwake campaign grew a wiki: maps in two atlases joined by a portal, a party with members who came and went, quests, handouts given to one player, and an unidentified ring. - **Checked:** crawls of every player-view frame found none of the 89 GM-only strings. The crawls also turned up two real visibility gaps in the shared helpers, which were fixed before release; #593 has the details, because they matter for the real build. Same link as before. Nothing has changed for anyone who already has it, and nobody had answered round two yet. Still open until the round-two responses are read.
Sign in to join this conversation.
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
rbrooks/Quest-Board#363
No description provided.