Designed an immersive educational website that brings WWII history to life for students. By integrating an AI-powered "Veteran Chatbot" and interactive storytelling modules, the platform transformed passive history learning into an engaging, conversational experience, preserving the oral histories of Chinese soldiers.

Background & Challenge

Context: The Alliance for Charity and Smile (ACS) wanted to preserve the fading stories of WWII veterans in China.

The Problem: Traditional history textbooks feel distant and boring to young students. The client needed a way to bridge the generational gap.

The Innovation: Instead of just reading articles, students can "interview" a digital avatar of a real veteran, asking questions about their survival and experiences.

Project Scope

• My Role: UX & UI Designer (Interactive Storytelling)
• Target Audience: Students (Gen Z/Alpha) & Educators
• Tools: Figma, AI Prototyping
• Deliverables: Responsive Website, AI Chat Interface, Multimedia Resource Library

‍

Client provided Students & Teachers comment highlighted the need for interactivity:

Students
"History dates are boring to memorize."
Conversational AI: "Ask me what I ate in 1944" (Personalized learning).

Teachers
"Hard to find engaging classroom materials."
Resource Hub: Downloadable worksheets & video archives.

1. AI Veteran Chatbot Interface

Designed a split-screen interface where students interact with a realistic 3D avatar of a veteran. The chat suggests prompts like "Ask about my childhood" to guide the conversation.

Result: Created a "safe space" for students to ask personal questions they might be too shy to ask in person.

‍

2. "Paper-Tear" Visual Storytelling

Developed a unique visual style using "torn paper" effects to separate historical black-and-white photos from modern educational content.

Result: Visually reinforced the theme of "uncovering history" while keeping the UI modern and clean.

‍

3. Interactive Soldier Profiles

Structured profile pages with a "Life Timeline" and "Video Interview" gallery, allowing students to explore a veteran's journey from childhood to post-war life.

Result: Humanized the soldiers, transforming them from "names in a book" to real people with relatable stories.

‍

4. Teacher Resource Library

Built a dedicated section for educators to access lesson plans, documentary clips, and worksheets directly linked to the veteran stories.

Result: Increased platform adoption by making it a practical tool for classroom use.

Prototyping the Chat: Tested the "Split-Screen" layout to ensure the veteran's avatar remained the focal point during the conversation.

Visual Identity: Selected a "Sepia & Clean White" color palette to balance historical gravity with educational clarity.

Content Structuring: Organized the massive oral history archive into bite-sized "Life Chapters" (Childhood, War, Peace) to match student attention spans.

Impact

• Engagement: The AI Chatbot feature became the most visited section of the site, creating a "dialogue" with history.
• Preservation: Successfully digitized oral histories that would otherwise be lost, creating a permanent digital archive for future generations.

Key Takeaways

• Empathy Design: Designing for "History" isn't just about facts; it's about emotional connection. The "Paper-Tear" aesthetic wasn't just a style; it was a metaphor for revealing the past.
• Designing for AI: Learned that AI interfaces need clear "suggested prompts" (e.g., "Ask me about...") to help users overcome the "blank page" fear.