# Paper Trail - UI/UX Wireframes ## Screen 1: Title Screen ``` ┌────────────────────────────────────────────────────────────────┐ │ │ │ │ │ ┌─────────────────────┐ │ │ │ 📁 PAPER TRAIL │ │ │ │ │ │ │ │ Bureaucracy Puzzle │ │ │ │ Game │ │ │ └─────────────────────┘ │ │ │ │ [ CONTINUE ] │ │ [ NEW GAME ] │ │ [ SETTINGS ] │ │ │ │ │ │ "The system isn't broken. │ │ It's working exactly as designed." │ │ │ │ v1.0 │ └────────────────────────────────────────────────────────────────┘ ``` **Elements**: - Paper texture background - Manila folder visual motif - Typewriter font for title - Faded inspirational quote - Version number in corner --- ## Screen 2: Tutorial/Briefing ``` ┌────────────────────────────────────────────────────────────────┐ │ 📋 CASE 1: THE NAME CHANGE [PAUSE] │ ├────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ CASE BRIEFING │ │ │ │ │ │ │ │ FROM: Martha Chen, Social Security Office │ │ │ │ DATE: March 15, 2026 │ │ │ │ RE: Administrative Name Correction Request │ │ │ │ │ │ │ │ Mrs. Eleanor Finch needs to correct her deceased │ │ │ │ husband's name on 47 official forms. He was listed │ │ │ │ as "Robert James Finch" but his legal name was │ │ │ │ "Robert J. Finch." │ │ │ │ │ │ │ │ The Social Security office says the death certificate │ │ │ │ is wrong. The death certificate office says the │ │ │ │ hospital records are wrong. The hospital says they │ │ │ │ can't change records from 1987. │ │ │ │ │ │ │ │ DEADLINE: 30 minutes game time │ │ │ │ COMPLEXITY: Tutorial │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ KEY NPCs: │ │ ┌──────────┐ ┌──────────┐ │ │ │ Martha │ │ Harold │ │ │ │ Chen │ │ Washing- │ │ │ │ SS Clerk │ │ ton │ │ │ │ Trust:50 │ │ Trust:30 │ │ │ │ Auth: 3 │ │ Auth: 5 │ │ │ └──────────┘ └──────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ 💡 HINT: Build relationships before asking for help │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ [ BEGIN CASE ] │ │ │ └────────────────────────────────────────────────────────────────┘ ``` --- ## Screen 3: Main Puzzle View ``` ┌────────────────────────────────────────────────────────────────┐ │ 📋 CASE 1: THE NAME CHANGE ⏱ 25:30 [≡] │ ├────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────┐ ┌────────────────────────────────┐ │ │ │ 📁 CASE FILE │ │ FORM: NAME CORRECTION │ │ │ │ │ │ ┌──────────────────────────┐│ │ │ │ Documents: │ │ │ SSN: *-* ** -2345 ││ │ │ │ ┌─────────────┐ │ │ │ ││ │ │ │ │ Death Cert │ │ │ │ Full Name: [Robert J. ]││ │ │ │ │ ✓ Collected │ │ │ │ [Robert James ] ││ │ │ │ └─────────────┘ │ │ │ ││ │ │ │ ┌─────────────┐ │ │ │ Previous: Robert James ││ │ │ │ │ Hospital │ │ │ │ Requested: [__________] ││ │ │ │ │ Records │ │ │ │ ││ │ │ │ │ ✓ Collected │ │ │ │ Reason: ││ │ │ │ └─────────────┘ │ │ │ ○ Spelling error ││ │ │ │ ┌─────────────┐ │ │ │ ● Legal name change ││ │ │ │ │ Photo ID │ │ │ │ ○ Other ____________ ││ │ │ │ │ ⚠ Missing │ │ │ │ ││ │ │ │ └─────────────┘ │ │ │ Attachments: ││ │ │ │ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ ││ │ │ │ Contacts: │ │ │ │ 📎 │ │ │ │ │ ││ │ │ │ 📞 Martha: 555-0123│ │ │ │ │ 1/3 │ │ 2/3 │ │ 3/3 │ ││ │ │ │ 📞 Harold: 555-0456│ │ │ │ └─────┘ └─────┘ └─────┘ ││ │ │ │ │ │ │ ││ │ │ │ [📝 NOTES] │ │ │ [💾 SAVE DRAFT] [📤 SUBMIT]││ │ │ └─────────────────────┘ │ └──────────────────────────┘│ │ │ │ │ │ │ ┌─────────────────────┐ │ │ │ │ │ 💬 DIALOGUE │ │ ┌──────────────────────────┐│ │ │ │ │ │ │ ⚠ WARNING ││ │ │ │ [🖥️ Martha] │ │ │ Reason doesn't match ││ │ │ │ │ │ │ attached documents. ││ │ │ │ "I understand │ │ │ ││ │ │ │ this is frustrating│ │ │ Click to: ││ │ │ │ Mrs. Finch, but │ │ │ [Auto-fix] [Ignore] ││ │ │ │ the procedure..." │ │ └──────────────────────────┘│ │ │ │ │ │ │ │ │ │ ┌─────────────┐ │ └────────────────────────────────┘ │ │ │ │ 1. I understand │ │ │ │ │ │ 2. There must │ │ ┌────────────────────────────────┐ │ │ │ │ be another │ │ │ 🗓️ TIMELINE │ │ │ │ │ 3. I need to │ │ │ │ │ │ │ │ speak to... │ │ │ Week 1: Filed request │ │ │ │ └─────────────┘ │ │ │ Week 2: Awaiting response │ │ │ └─────────────────────┘ │ │ Week 3: ? │ │ │ │ └────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────┘ ``` **Legend**: - `📁` - Case file panel (left) - `📋` - Form panel (right) - `💬` - NPC dialogue (bottom left) - `⏱` - Timer - `📞` - Contacts - `📝` - Notes - `🗓️` - Timeline/progress --- ## Screen 4: NPC Interaction ``` ┌────────────────────────────────────────────────────────────────┐ │ 💬 NPC DIALOGUE │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ ┌───────────────┐ │ │ │ │ │ 🖥️ MARTHA │ │ │ │ │ │ CHEN │ │ │ │ │ │ SS Clerk │ │ │ │ │ └───────────────┘ │ │ │ │ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ │ │ Trust: ████████░░ 80/100 │ │ │ │ │ │ Authority: █████░░░░░ 3/5 │ │ │ │ │ │ Corruption: █░░░░░░░░ 1/5 │ │ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ "Look, I WANT to help you, but my hands are tied. │ │ │ │ Every form I process gets audited. If I don't │ │ │ │ follow procedure exactly..." │ │ │ │ │ │ │ │ [She sighs and looks at a pile of forms on her desk] │ │ │ │ │ │ │ │ ───────────────────────────────────────────────────── │ │ │ │ │ │ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ │ │ 💬 DIALOGUE OPTIONS │ │ │ │ │ │ │ │ │ │ │ │ [1] "I understand. What IS the procedure?" │ │ │ │ │ │ [+5 Trust, +Info: Chain of approvals] │ │ │ │ │ │ │ │ │ │ │ │ [2] "There must be an exception somewhere..." │ │ │ │ │ │ [Request: Prove you're a good citizen] │ │ │ │ │ │ │ │ │ │ │ │ [3] "What if I could make this worth your while?" │ │ │ │ │ │ [Risk! +Corruption, -Trust if refused] │ │ │ │ │ │ │ │ │ │ │ │ [4] "Can you at least point me to someone │ │ │ │ │ │ who CAN help?" │ │ │ │ │ │ [+Trust, +Info: Harold's extension] │ │ │ │ │ │ │ │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ [📞 CALL] [📋 REQUEST FORMS] [🔙 END CONVERSATION] │ │ │ │ ⏱ This conversation: 5 minutes │ └────────────────────────────────────────────────────────────────┘ ``` --- ## Screen 5: Results Screen ``` ┌────────────────────────────────────────────────────────────────┐ │ 📋 CASE RESULTS │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ ✅ CASE COMPLETED: SUCCESS │ │ │ │ │ │ │ │ ┌─────────────┐ │ │ │ │ │ 🎉 │ │ │ │ │ │ APPROVED │ │ │ │ │ │ ✓ │ │ │ │ │ └─────────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ PATH: Creative Solution │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ You found the 1995 "Common Name Variants" policy memo │ │ │ │ and leveraged Martha's gratitude for helping her son. │ │ │ │ The correction was processed in 2 days instead of 6 │ │ │ │ weeks. Mrs. Finch is grateful. │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ CONSEQUENCES: │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ ✓ Martha Chen: Trust +15 (Now: 95/100) │ │ │ │ "You're the first person in years who actually │ │ │ │ listened to my problems." │ │ │ │ │ │ │ │ ⚠ Harold Washington: Trust +5 (Now: 35/100) │ │ │ │ "Creative. A bit too creative. I'll be watching." │ │ │ │ │ │ │ │ 📈 Department Standing: +10 │ │ │ │ "Cases resolved efficiently." │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ 🔓 UNLOCKED: │ │ • New approach available: "Policy Leverage" │ │ • Martha can now authorize expedited processing │ │ • Harold's office hours now accessible │ │ │ │ [ NEXT CASE ] │ │ [ MAIN MENU ] │ │ [ REVIEW CHOICES ] │ │ │ └────────────────────────────────────────────────────────────────┘ ``` --- ## Screen 6: Settings/Inventory ``` ┌────────────────────────────────────────────────────────────────┐ │ ⚙️ SETTINGS │ ├────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ AUDIO │ │ │ │ │ │ │ │ Music Volume [████████████████░░░░] 80% │ │ │ │ Effects Volume [██████████████░░░░░░] 60% │ │ │ │ ☑ Ambient office sounds │ │ │ │ ☑ Sound notifications │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ GAMEPLAY │ │ │ │ │ │ │ │ ☐ Show timer countdown │ │ │ │ ☑ Auto-save progress │ │ │ │ ☑ Show dialogue hints │ │ │ │ Difficulty: [Easy ▼] │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ DISPLAY │ │ │ │ │ │ │ │ Theme: [Dark ▼] │ │ │ │ Font Size: [Normal ▼] │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ DATA │ │ │ │ │ │ │ │ [💾 Save Game] │ │ │ │ [📂 Load Game] │ │ │ │ [🗑️ Reset Progress] │ │ │ │ [📤 Export Stats] │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ [ SAVE ] [ CLOSE ] │ │ │ └────────────────────────────────────────────────────────────────┘ ``` --- ## Responsive Layout Rules ### Desktop (>1024px) - Full layout as shown - Side panels visible - All UI elements visible ### Tablet (768px-1024px) - Collapsible side panels - Tab navigation for form/document switching - Modal dialogs for NPC conversations ### Mobile (<768px) - Single column layout - Swipe navigation between panels - Bottom sheet for dialogue - Simplified form inputs --- ## Color Coding System | Element | Color | Hex | Usage | |---------|-------|-----|-------| | Approved | Green | #00B894 | Success states | | Denied | Red | #D63031 | Failure states | | Warning | Yellow | #FDCB6E | Cautions | | Info | Blue | #0984E3 | Informational | | Paper | Manila | #FFEAA7 | Documents | | Background | Light Gray | #DFE6E9 | Main bg | | Dark BG | Charcoal | #2D3436 | Dark theme | | Text Primary | Dark | #2D3436 | Main text | | Text Secondary | Gray | #636E72 | Muted text | --- **Document Version**: 1.0 **Created**: 2026-03-22