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.
Many Thai family stories, rituals, and cultural knowledge are undocumented and gradually lost between generations, especially within diaspora communities. Existing genealogy platforms such as Ancestry and My Chinese Roots prioritise data-driven family trees and lack the narrative and cultural relevance needed for Thai users to meaningfully engage with their heritage.
Many Thai family stories, rituals, and cultural knowledge are undocumented and gradually lost between generations, especially within diaspora communities. Existing genealogy platforms such as Ancestry and My Chinese Roots prioritise data-driven family trees and lack the narrative and cultural relevance needed for Thai users to meaningfully engage with their heritage.
This sparked the question - How might we encourage Thai diasporas to rediscover cultural values and family heritage through interactive storytelling?
This sparked the question - How might we encourage Thai diasporas to rediscover cultural values and family heritage 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}
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
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
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