BUA THAI INTERACTIVE FAMILY STORIES
BUA THAI INTERACTIVE FAMILY STORIES
BUA THAI INTERACTIVE FAMILY STORIES
UI/UX
UI/UX
CAPSTONE PROJECT
CAPSTONE PROJECT
YEAR: 2025
YEAR: 2025
ROLE: UX/UI Designer · Research · Visual Design
ROLE: UX/UI Designer · Research · Visual Design
PLATFORM: Responsive Website
PLATFORM: Responsive Website
TOOLS: Figma, Miro, Adobe Photoshop, After Effects
TOOLS: Figma, Miro, Adobe Photoshop, After Effects
RECOGNITION: Excellence in Digital Product Design from Purple Shirt Design Agency
RECOGNITION: Excellence in Digital Product Design from Purple Shirt Design Agency
the PROBLEM
the PROBLEM
{1}
{1}
Thai diasporas feel disconnected from their heritage.
Thai diasporas feel disconnected from their heritage.
Thai diaspora families rely heavily on oral storytelling to pass down history, but as migration increases, those stories are getting lost between generations. Second-generation Thai migrants remain curious about their heritage but lack an engaging entry point to explore it. Existing platforms like Ancestry prioritise data and family trees, missing the cultural narrative and emotional resonance that actually makes heritage feel personal and worth reconnecting with.
Thai diaspora families rely heavily on oral storytelling to pass down history, but as migration increases, those stories are getting lost between generations. Second-generation Thai migrants remain curious about their heritage but lack an engaging entry point to explore it. Existing platforms like Ancestry prioritise data and family trees, missing the cultural narrative and emotional resonance that actually makes heritage feel personal and worth reconnecting with.
This sparked the question - How might we encourage second-generation Thai migrants to rediscover their family histories and cultural roots through interactive storytelling?
This sparked the question - How might we encourage second-generation Thai migrants to rediscover their family histories and cultural roots through interactive storytelling?
the SOLUTION
the SOLUTION
{2}
{2}
A digital interactive storytelling website
A digital interactive storytelling website
Exploring Thai family narratives across generations
Exploring Thai family narratives across generations
Parallax Scrolling & Engaging Navigations
Parallax Scrolling & Engaging Navigations
Parallax scroll explores layers of a lotus blossom → layers of family generations
Symbolic metaphor for growth, spiritual awakening, cultural rebirth
Parallax scroll explores layers of a lotus blossom → layers of family generations
Symbolic metaphor for growth, spiritual awakening, cultural rebirth
3 Different Stories
3 Different Stories
Each stories told through a different family member and generation.
Each narrative represents distinct cultural values, traditions, and lived experiences
Stories are structured using Freytag’s Pyramid (rising action, climax, resolution) to guide emotional pacing
Each stories told through a different family member and generation.
Each narrative represents distinct cultural values, traditions, and lived experiences
Stories are structured using Freytag’s Pyramid (rising action, climax, resolution) to guide emotional pacing
Sound Design
Sound Design
Ambient sound design based on the scenery of each stories being told.
Muay Thai stadium, Temple Bells, Market and Street sounds
Enhancing immersion into each stories’ settings
Ambient sound design based on the scenery of each stories being told.
Muay Thai stadium, Temple Bells, Market and Street sounds
Enhancing immersion into each stories’ settings
DESIGN PROCESS
{3}
Process Overview
Using the Double Diamond’s design process as guideline.
KICK OFF!
Brief
Future Wheels
Problem space and concept
Initial storyboard concepts
Moodboard/Visual Style
Feedback from Industry
Redrawing illustrations
Define main navigation and stories
User Testing
Start Lo-fi and navigations
User Surveys
Global, Category and Specific trends
Contextual Research
Define HMW question
Quantitative & Qualitative Research
Lo-fi Prototyping & Storyboarding
Begin Illustration
Define Illustration & Interactions
Feedback & Iterations
USER RESEARCH
{4}
User Preference Survey
To understand how Thai users emotionally and visually connect with their cultural heritage, I conducted a Google Form survey with Thai students and Thai-identifying participants. The survey focused on cultural symbols, storytelling preferences, and emotional engagement.
16 participants on the survey
Key Insights use in Design
Lotus flower chosen as primary navigation symbol
Illustration were inspired by Traditional Thai Mural & Publication
Stories are told through themes and times
Warm, conversational storytelling tone applied
Strong focus on food, festival/rituals and visual representation of stories
20%
60%
Lotus Flower
Elephant
Which symbols best express Thai cultural heritage to you?
Through themes (Location/Festival)
Chronological
80%
10%
How would you prefer to explore Thai family history stories?
Warm & Conversational
Formal & respectful
Playful
50%
25%
25%
If you were reading a Thai family story, what tone would you find most engaging?
Traditional Thai Mural
Thai Publication
Modern Arts
50%
20%
10%
Which visual style resonate with you the most?
What makes a personal family story engaging to you? (select all that apply)
Seeing visual/illustrated representations of history
75%
12/16
Learning about Thai cultural traditions through one family’s lens
62%
10/16
Emotional experiences (migration, loss, belonging)
18%
3/16
What aspects makes you feel most connected or resonant with your culture?
(select all that apply)
12/16
Food (e.g., street food, family recipes)
75%
12/16
Festivals & rituals (e.g., Songkran, Loy Krathong, temple fairs)
75%
9/16
Religion & spirituality (e.g., Buddhism, temple visits, monk ordination)
56%
9/16
Family & community traditions (e.g., respect for elders, ceremonies)
56%
7/16
Old Media (Old Thai films, books, music)
43%
INFORMATION ARCHITECTURE
{5}
BUA uses parallax scrolling to guide users through a non-linear, generational narrative. The Lotus Blossom family tree serves as the main navigation, allowing stories to unfold intuitively while preserving a clear sense of progression through its layered structure.
SPLASH SCREEN
INTRODUCTION
DESCRIPTION
PLAY THE STORY
Parralax Scroll & Read
Reflect on the Story
Go Next
Go Back
Go Home
Go Next
Go Next
Go Back
Go Back
Go Home
Go Home
Reflect on the Story
Reflect on the Story
Micro Interaction (Muaythai Fight)
Parralax Scroll & Read
Micro Interaction (Buying Krathong)
Parralax Scroll & Read
Micro Interaction (Cooking Food)
DESCRIPTION
PLAY THE STORY
DESCRIPTION
PLAY THE STORY
DESCRIPTION
LOTUS BLOSSOM (HOME)
ABOUT PAGE
1st Layer (Family Heirloom)
2nd Layer (Great Grandfather)
3rd Layer (Grandmother)
4th Layer (Mother)
DESIGN SYSTEM
DESIGN SYSTEM
{6}
{3}
{3}
BUA’s Stylistic
BUA’s Stylistic
FINAL DESIGN
FINAL DESIGN
{7}
{4}
{4}
GET IN TOUCH
GET IN TOUCH
GET IN TOUCH