PROJECT_WORKFLOW_DRAFT_v2.fig WIREFRAME MODE

Workflow & UI Storyboard Draft

Development Timeline, Feature Architecture & Interactive UI Reframing Switch

Author: Kai MMDC - Sec A1103
FRAME 01 • OCT 17 - OCT 19

Planning & Conceptual Setup

Architecture outline & Theoretical Grounding

Theoretical Foundations:
  • Festinger (1954): Social Comparison Theory
  • Cooley: Looking-Glass Self Framework
💡 Key Goal: Help users step back from timeline anxiety & social benchmarking through guided self-reflection.
FRAME 02 • OCT 19

Drafting & Content Logic

Prompts, Mindset Anchors & Diagnostic Scoring

1. Mindset Anchors: Daily grounding affirmations
2. Diagnostic Quiz: Weighted scoring logic for reflection baseline
3. Prompt Library: Reframing negative self-talk guides
FRAME 03 • OCT 20 - OCT 30

Coding & Technical Build

HTML5 • Tailwind CSS • Vanilla JS • Gemini API

3D Card Flip & Perception Slider Done
Ambient Soundscape Toggle Done
Browser LocalStorage Persistence Done
Gemini Flash API Reframing Hook Done
FEATURE DRAFT: Reframing Input Switch
Write Own Thoughts
Gemini AI Auto-Reframe
FRAME 04 • OCT 31 - NOV 7

Peer Testing & Deployment

Section A1103 Review & Cloudflare Pages

✓ Feedback collected from Sec A1103 peers
✓ Mobile responsive layout bugs resolved
✓ Deployed & live on Cloudflare Pages
🚀 Fully deployed and ready for final presentation showcase!