Submission Assets

This page provides structured templates for every Technovation Girls submission deliverable. Use these storyboards and checklists to ensure nothing is missed and every asset is polished before the deadline.

Pitch Video Storyboard

The pitch video is the primary way judges understand the problem, solution, and impact. It should be concise, engaging, and personal.

Segment	Duration	Content	Visual
Hook	0:00 - 0:15	Open with a compelling question or statistic about TF-VAWG. Make it personal and urgent.	TODO: Statistic on screen, speaker on camera
Problem	0:15 - 0:45	Describe TF-VAWG: what it is, who it affects, why existing solutions fall short. Use the community need statement.	TODO: Infographic or persona illustration
Solution	0:45 - 1:30	Introduce SisterShield: interactive visual novel education, trauma-informed design, AI-powered content. Show 2-3 key screens.	TODO: App screenshots or brief screen recording
How It Works	1:30 - 2:00	Walk through a user journey: discover a course, make choices in a story, encounter a Learning Moment, find crisis resources.	TODO: Screen recording of user flow
Impact	2:00 - 2:30	SDG alignment, scalability through i18n and AI, pilot program results (if available).	TODO: SDG icons, map showing Korea + global
Call to Action	2:30 - 2:45	Vision for the future. Why this matters. What comes next.	TODO: Speaker on camera, closing statement

Pitch Video Tips

• Lead with emotion, support with data.
• Show the app, do not just talk about it.
• Practice the timing — every second counts.
• Speak clearly and with conviction. Judges can sense genuine passion.

---

Demo Video Storyboard

The demo video shows the app in action. It should demonstrate full functionality across all major user flows.

Scene	Duration	What to Show	Key Points
1. Landing Page & Quick Exit	0:00 - 0:20	Landing page loads. Point out the Quick Exit button. Click it. Show redirect to weather.com. Return and show session is cleared.	Safety-first design, always accessible
2. Login & Role-Based Dashboard	0:20 - 0:40	Log in as a student. Show the student dashboard. Log out, log in as a teacher. Show the teacher dashboard with different capabilities.	Role-based access, clean navigation
3. Course Discovery & State-Based CTAs	0:40 - 1:05	Browse available courses. Show how CTAs change based on state (not started, in progress, completed). Click to start a course.	State-driven UI, clear user guidance
4. Playing a Twine Course	1:05 - 1:40	Play through an interactive story. Make a safe choice (positive reinforcement). Make a risky choice (Learning Moment with reframe). Show the choice architecture in action.	Interactive narrative, pedagogical strategy, no dead-ends
5. Progress Tracking	1:40 - 1:55	Return to dashboard. Show progress indicators updating. Show completion state.	Progress persistence, motivation design
6. Teacher: AI Course Generation	1:55 - 2:20	Switch to teacher account. Demonstrate AI course generation: enter a topic, see LLM generate scenario content, see DALL-E 3 generate a cover image. Show the review step.	AI integration, teacher empowerment, review workflow
7. i18n Switching	2:20 - 2:35	Switch language from English to Korean. Show the entire UI updating — navigation, content, labels. Switch back.	Full bilingual support, seamless switching
8. Quick Exit Keyboard Shortcut	2:35 - 2:45	While on any screen, press Escape. Show the confirmation dialog. Confirm. Show immediate redirect.	Keyboard accessibility, sub-1-second safety

Demo Video Quality

• Use a clean browser with no personal bookmarks or tabs visible.
• Use a consistent screen resolution (1280x720 or 1920x1080).
• Add subtle annotations or callouts to highlight key UI elements.
• Ensure the cursor is visible and movements are deliberate, not rushed.

---

Technical Video Talking Points

The technical video explains the engineering decisions behind SisterShield. It should demonstrate technical depth and intentionality.

Section 1: Architecture Overview (approximately 30 seconds)

• Stack: Next.js 14 with App Router, TypeScript for type safety, Prisma ORM with PostgreSQL.
• Why this stack: Server-side rendering for performance, App Router for modern routing patterns, Prisma for type-safe database access.
• Project structure: app/[locale]/ for i18n routing, lib/ for shared logic, components/ for reusable UI.
• Role-based access: STUDENT, TEACHER, ADMIN roles enforced at API and UI levels.

Section 2: AI Integration and Safety (approximately 30 seconds)

• LLM course generation: Teachers provide a topic; Claude or GPT-4o generates a structured Twine scenario with safe/ambiguous/risky choices.
• DALL-E 3 image generation: Course covers are generated with content safety guidelines enforced.
• Auto-translation: AI translates course content between English and Korean, with human review step.
• Safety guardrails: AI outputs are reviewed before publishing; no direct-to-student AI content without teacher approval.

Section 3: Calm Color System and Semantic Tokens (approximately 30 seconds)

• Semantic token architecture: Colors are named by purpose (--color-primary-action, --color-surface-calm), not by hue.
• Why semantic tokens: Theme changes (e.g., high-contrast mode) require only token remapping, not component refactoring.
• Purple reduction: Evolved from brand-heavy (purple everywhere) to priority-heavy (purple for single CTA only).
• Trauma-informed rationale: Low saturation neutrals reduce cognitive load for users under stress.

Section 4: i18n and Accessibility (approximately 30 seconds)

• next-intl: All user-facing strings in src/messages/*.json, server and client translation functions.
• Database i18n: titleI18n and descriptionI18n fields use JSON for multi-locale storage.
• Locale helpers: dbLocaleToI18n() and i18nLocaleToDb() handle the underscore/hyphen conversion.
• WCAG AA: Contrast ratios, accessible tap targets (WCAG best practice: 44px), keyboard navigation, ARIA labels, prefers-reduced-motion support.

---

Project Description (100-Word Maximum)

Strict Word Limit

The Technovation project description has a 100-word maximum. Every word must earn its place. Draft, then cut ruthlessly.

The submitted project description follows a 4-sentence structure:

1. Problem (1 sentence): What specific problem does your app address?
2. Evidence (1 sentence): How do you know this problem exists?
3. Solution (1 sentence): What does your app do about it?
4. Why it works (1 sentence): Why is your approach effective?

Template

[Problem sentence]. [Evidence sentence]. SisterShield [solution sentence]. [Why it works sentence].

Example Draft (edit to fit 100 words)

Technology-facilitated violence against women and girls (TF-VAWG) — including cyberstalking, non-consensual image sharing, and online harassment — is a growing global crisis that disproportionately affects young women. Research from UN Women and Korean government data confirm that existing prevention education is insufficient and often inaccessible to the most vulnerable populations. SisterShield is an interactive educational platform that teaches recognition and safe response to TF-VAWG through AI-generated visual novel scenarios, with trauma-informed design and instant safety features. By combining evidence-based pedagogy with accessible technology, SisterShield empowers learners to protect themselves and others in digital spaces.

Supporting Detail (for reference, not submitted)

Use these sections to prepare pitch and demo content, but do not include them in the 100-word description:

• Key Features: Interactive visual novels, AI course generation, Quick Exit, i18n, trauma-informed design
• Target Audience: Women and girls at risk of or learning about TF-VAWG, and their educators
• Technology Used: Next.js 14, TypeScript, Prisma, PostgreSQL, NextAuth, next-intl, Claude/GPT-4o, DALL-E 3
• Impact: SDG 5 and 16 alignment, scalability through i18n and AI, pilot program plans
• Future Plans: Additional languages, more course content, partnerships with NGOs and schools

---

Source Code Repository Checklist

Before submission, verify the repository meets these standards:

• README.md is complete with setup instructions, project description, and screenshots.
• No secrets committed — .env is in .gitignore, no API keys in source.
• Clean commit history — descriptive commit messages, no “fix fix fix” chains.
• Dependencies are locked — package-lock.json or equivalent is committed.
• Build succeeds — npm run build completes without errors.
• Tests pass — all E2E and unit tests pass.
• License is included (if applicable).
• No unused code — dead code and commented-out blocks are removed.
• Type safety — no any types without justification.
• Seed data — database seed script works for fresh setup.

Repository Visibility

Ensure the repository is accessible to judges. If using a private repository, provide access instructions in the submission form.

Language & Ownership

Submission Requirements

These are Technovation submission rules, not rubric scoring categories.

Language Requirement

All written submissions (project description, code comments, README) must be submitted in English. The app itself may support multiple languages (SisterShield supports Korean and English), but written deliverables are evaluated in English.

Ownership

All submissions remain the intellectual property of the team. Technovation does not claim ownership of submitted projects. Teams retain full rights to continue developing, publishing, and distributing their work after the competition.

---

Rubric Mapping

Rubric Category	How This Page Contributes
Pitch	Storyboard templates ensure videos are structured and compelling
Technical	Technical video talking points demonstrate depth and intentionality
User Experience	Demo video storyboard ensures all UX features are showcased
All Categories	Source code checklist ensures the codebase supports every claim made in documentation