Project Overview
Project Name: MemoryWeaver - Smart Photo Curator & Story Builder
Course: COMP 4461 - Human-Computer Interaction
Theme: Your Digital Life, Your Digital Legacy
Timeline: November 2025
Role: Solo Project - Concept Design, Interaction Design, Frontend Development, Video Production
Project Type: High-Fidelity Interactive Prototype Demo
📹 Project Demo Video
A 2-minute cinematic demonstration video showcasing the complete user journey from problem identification to solution.
Video Structure (2 Minutes)
- 0:00-0:20 - Problem Statement: Sora-generated visuals showing the chaos of digital assets - highlighting why technological support is needed
- 0:20-1:35 - Solution: Complete user experience flow through interactive
prototype (5 pages)
- Demonstrates key features: organizing, retrieving, inheriting digital legacy
- Technical highlights: multimodal interaction, AI-assisted classification, secure inheritance mechanism
- Shows why this solution is better than existing alternatives
- 1:35-2:00 - The Big WHY: Beyond technology, it's about human connection
- Take Home Message: "Let digital life continue with dignity, let memories become bridges of connection"
- Envisioned Long-term Impact:
- Personal: Take control of your digital identity
- Family: Precious memories never lost
- Society: A new paradigm of legacy in the digital age
- Call to Action: Starting today, rethink our digital lives
🎯 The Problem
Modern users take thousands of photos annually, but most remain buried in cloud storage, never revisited. Precious memories fade into digital clutter, creating a paradox: we're connected to more photos than ever, yet disconnected from actual memories.
- Users take over 2000 photos per year on average
- More than 80% of photos are never viewed again
- Duplicate and low-quality photos occupy significant storage space
- Lack of effective ways to transform photos into meaningful stories
- Digital legacy faces challenges in long-term preservation and inheritance
💡 The Solution
MemoryWeaver uses computer vision and natural language AI to transform forgotten photos into meaningful story videos.
- Automatically recognize faces, locations, and emotions
- Filter duplicates and select the most meaningful moments
- Organize photos into curated collections
- Generate story videos with music, transitions, and captions
- Preserve digital memories as accessible legacy for future generations
🎨 Design Approach
Created a cinematic prototype following Apple's design language:
Welcome Page
Product introduction with emotional design to build user trust
Upload Interface
Drag-and-drop upload supporting batch photo import
AI Processing
Real-time progress display, AI analyzing photo content
Results Display
Showcasing organized photo collections and themes
Video Player
Generated story video with music and narration
🎭 Minimalist Aesthetic
Generous white space, clear visual hierarchy, following Apple HIG
✨ Smooth Animations
Carefully crafted transition effects enhancing user experience
📸 Shallow Depth Photography
Professional-grade visual effects enhancing emotional expression
💖 Emotional Storytelling
Conveying emotional connection through visual design
🛠️ Technologies
Frontend
HTML5, CSS3, Vanilla JavaScript
Design System
Apple Human Interface Guidelines
AI Concepts
Computer Vision, NLG, Emotion Recognition
Video Production
Sora AI, CapCut
Prototype Type
High-Fidelity Interactive Demo
Design Tools
Figma, Adobe Creative Suite
🎓 Key Learnings & Achievements
👤 User-Centered Design
Deep research into real user pain points in digital photo management, designing solutions from needs
💫 Emotional Design
Using color, lighting, and pacing to create emotional user journeys, making products more than tools
⚡ Rapid Prototyping
Building functional demos without backend implementation to validate design concepts
📖 Visual Storytelling
Crafting compelling narrative arcs for video demos with smooth transitions from problem to solution
🤖 AI Integration Thinking
Conceptualizing AI technology applications into feasible real-world solutions
🎯 Information Architecture
Breaking down complex functions into clear user flows and optimizing information presentation
🏆 The Big WHY - Beyond Technology
This isn't just about technology—it's about human connection and dignity. Unlike traditional cloud storage that just stores photos, MemoryWeaver creates actionable meaning from digital assets.
Take Home Message: "Let digital life continue with dignity, let memories become bridges of connection"
🌍 Envisioned Long-term Impact
When this concept is widely adopted, it will create ripple effects across multiple levels:
- Personal Level: Individuals regain control of their digital identity, curating their legacy with intention rather than leaving behind digital chaos
- Family Level: Precious memories are preserved and become meaningful connections between generations, not just forgotten files in the cloud
- Societal Level: We establish a new paradigm for digital legacy in the modern age—treating digital assets with the same care as physical heirlooms
💡 Why This Matters
- Information overload in digital life becomes manageable
- Emotional disconnection from preserved memories is bridged
- Intergenerational knowledge transfer becomes seamless
- Digital legacy gains the dignity it deserves
🚀 Call to Action
Starting today, we can rethink our relationship with digital life. Transform how people interact with their digital past, making memories accessible, shareable, and meaningful across generations. Through thoughtful technology, convert forgotten photos into eternal stories, ensuring everyone's digital legacy is properly preserved and inherited.
This is more than a product—it's a movement toward dignified digital living.
💭 Personal Reflection
This project explored how thoughtful technology can enhance rather than replace human experiences. The challenge was balancing technical feasibility with emotional resonance—creating a solution that feels both innovative and deeply human.
During the design process, I realized that the best interaction design isn't about making technology more complex, but making it "invisible," allowing users to focus on what they truly care about—their memories and stories.
Through this project, I learned:
- How to design truly valuable solutions from user pain points
- The crucial role of emotional design in product success
- Techniques for prototyping and visual storytelling
- How to translate AI technology concepts into understandable user experiences
- The powerful effect of cinematic expression in product demonstrations
User feedback validated a key insight: People don't want more features for organizing photos; they want technology that helps them reconnect with memories that matter.
🎯 Design Principles
Simplicity First
Every interface element has its reason to exist, removing all unnecessary visual noise
Emotion Priority
Design must not only solve functional problems but also touch users' emotions
Intuitive Interaction
Users can understand how to use without learning, following natural cognitive patterns
Story Driven
Every design decision serves the larger narrative goal
📝 Project Details
Technical Implementation Highlights
- Frontend Framework: Pure HTML/CSS/JavaScript implementation, no third-party dependencies, demonstrating solid foundation skills
- Responsive Design: Adapted for multiple device sizes, ensuring optimal viewing experience
- Animation System: Custom CSS animations creating smooth transition effects
- Video Production: Used Sora AI to generate problem scenario videos, CapCut for post-production editing
- Design System: Established unified color, typography, and spacing standards
AI Feature Concepts
- Face Recognition: Automatically identify people in photos and build relationship graphs
- Scene Classification: Recognize photo locations and scene types (indoor/outdoor, nature/city, etc.)
- Emotion Analysis: Analyze emotional states of people in photos and overall atmosphere
- Smart Deduplication: Identify and filter similar and duplicate photos
- Story Generation: Automatically generate narrative text based on timeline and themes
- Music Matching: Select appropriate background music based on photo emotions
User Experience Design
- Progressive Disclosure: Don't show all features at once, but reveal gradually with user actions
- Immediate Feedback: Every user action has clear visual feedback
- Error Prevention: Reduce user mistakes through design
- Emotional Expression: Use warm colors and friendly copy to build emotional connections
🌟 Project Achievements
✅ Complete User Flow
Full 5-page interactive flow from upload to video generation
✅ Cinematic Demo Video
75-second high-quality demo video clearly showcasing product value
✅ Emotional Design Language
Established unified visual style and emotional expression system
✅ Innovative AI Application
Proposed feasible AI technology application solutions
🔗 Related Links
Course: COMP 4461 Human-Computer Interaction
Institution: The Hong Kong University of Science and Technology
Timeline: November 2025
Theme: Your Digital Life, Your Digital Legacy