Created a more immersive and impactful experience through emotional storytelling
Created a more immersive and impactful experience through emotional storytelling
Created a more immersive and impactful experience through emotional storytelling
Virtual Time Capsule | "Received Capsule" Experience Redesign
Virtual Time Capsule | "Received Capsule" Experience Redesign
Timeline
3 Months
3 Months
3 Months
Role
Solo UX/UI Designer
Solo UX/UI Designer
Solo UX/UI Designer
Team
1 Designer
2 Developer
1 Designer
2 Developer
1 Designer
2 Developer
SOW
Mobile Application
Mobile Application
Mobile Application
Context
Context
Virtual Time Capsule is a startup focused on helping people preserve memories, messages, and media to be shared at specific moments in the future.
“Received capsules” are the primary moment where viewers engage with that content. Which is a collection of prompts paired with user submitted text, images, audio, and video.
I initially joined the project by shadowing another designer, but after their departure, I took full ownership of the experience. At that point, the CEO identified an opportunity to improve how these capsules were experienced, specifically to strengthen their emotional impact.
Virtual Time Capsule is a startup focused on helping people preserve memories, messages, and media to be shared at specific moments in the future.
“Received capsules” are the primary moment where viewers engage with that content. Which is a collection of prompts paired with user submitted text, images, audio, and video.
I initially joined the project by shadowing another designer, but after their departure, I took full ownership of the experience. At that point, the CEO identified an opportunity to improve how these capsules were experienced, specifically to strengthen their emotional impact.
Overview
Overview
I redesigned the “received capsule” experience for Virtual Time Capsule, transforming it from a static, text-based interface into a guided, story driven journey.
The new experience prioritized emotional storytelling, content hierarchy, and immersive interaction, which enabled users to engage more deeply with meaningful messages and memories
I redesigned the “received capsule” experience for Virtual Time Capsule, transforming it from a static, text-based interface into a guided, story driven journey.
The new experience prioritized emotional storytelling, content hierarchy, and immersive interaction, which enabled users to engage more deeply with meaningful messages and memories
The problem
The problem
The problem
While the product is centered around emotional storytelling, the existing “received capsule” experience was structured like a text-thread interface.
While the product is centered around emotional storytelling, the existing “received capsule” experience was structured like a text-thread interface.
Although functional, this approach created several issues:
The emotional weight of the content felt diminished
Users struggled to fully engage with mixed media
The experience lacked a clear narrative structure
A product built on meaningful moments was being delivered in a way that felt uninspiring.
Although functional, this approach created several issues:
The emotional weight of the content felt diminished
Users struggled to fully engage with mixed media
The experience lacked a clear narrative structure
A product built on meaningful moments was being delivered in a way that felt uninspiring.
Challenge
Challenge
Challenge
How might I transform this static, text-based capsule into a guided, emotionally engaging storytelling experience?
How might I transform this static, text-based capsule into a guided, emotionally engaging storytelling experience?
This would required:
This would required:
Supporting mutliple content types
Narrative flow
Preservation of emotional intent
Understanding What Makes Stories Engaging
Understanding What Makes Stories Engaging
To design a more immersive experience, I explored platforms that successfully deliver content in a narrative format, including:
Story-based navigation patterns
Progress indicators that communicate pacing
Intuitive interactions that keep users engaged
To design a more immersive experience, I explored platforms that successfully deliver content in a narrative format, including:
Story-based navigation patterns
Progress indicators that communicate pacing
Intuitive interactions that keep users engaged
Across these experiences, a pattern emerged:
Strong storytelling isn’t just about content, it’s about how that content is revealed.
Across these experiences, a pattern emerged:
Strong storytelling isn’t just about content, it’s about how that content is revealed.
These platforms guided users through content with:
These platforms guided users through content with:
Clear progression
Clear progression
Defined beginning to end flow
Intuitive navigation
Intuitive navigation
This became the foundation for rethinking the capsule experience.
This became the foundation for rethinking the capsule experience.
Early direction, reframing the approach
Early direction, reframing the approach
Early direction, reframing the approach
Early in the process, the CEO proposed a nostalgic visual concept, having the content transition from a "fuzzy TV effect".
While compelling, I recognized to implement that would require more time and technical resources than the team could support.
Early in the process, the CEO proposed a nostalgic visual concept, having the content transition from a "fuzzy TV effect".
While compelling, I recognized to implement that would require more time and technical resources than the team could support.
Rather than dismissing the idea entirely, I reframed the goal behind it:
Rather than dismissing the idea entirely, I reframed the goal behind it:
The intent wasn’t the effect, it was the feeling.
The intent wasn’t the effect, it was the feeling.
I explored lighter visual treatments to evoke nostalgia, but through iteration, it became clear that adding effects risked distracting from the content itself.
Designing a story driven experience
Designing a story driven experience
Designing a story driven experience
Creating a Narrative Flow
Creating a Narrative Flow
Instead of a static feed, I restructured the experience into a progressive, story-based flow:
Instead of a static feed, I restructured the experience into a progressive, story-based flow:
User receives a capsule > progresses through prompts > consumes mixed media > gets a clear narrative > Create an account to create a capsule themselves
User receives a capsule > progresses through prompts > consumes mixed media > gets a clear narrative > Create an account to create a capsule themselves
To support this:
To support this:
Progress indicators communicate how much of the story remains
Progress indicators communicate how much of the story remains
Gesture-based navigation (tap, swipe) enables intuitive movement
Gesture-based navigation (tap, swipe) enables intuitive movement
Narrative flow reinforces a beginning-to-end experience
Narrative flow reinforces a beginning-to-end experience
This shifted the interaction from passive reading to active participation in a story.
This shifted the interaction from passive reading to active participation in a story.
Prioritizing Content
Prioritizing Content
Each capsule could include multiple content types within a single prompt, creating potential complexity.
To manage this, I mapped different content combinations and defined a hierarchy based on context:
Primary content (image/video) takes visual focus
Supporting content (text/audio) complements without competing
This ensured that each piece of content had a clear role within the story.
Each capsule could include multiple content types within a single prompt, creating potential complexity.
To manage this, I mapped different content combinations and defined a hierarchy based on context:
Primary content (image/video) takes visual focus
Supporting content (text/audio) complements without competing
This ensured that each piece of content had a clear role within the story.
Each capsule could include multiple content types within a single prompt, creating potential complexity.
To manage this, I mapped different content combinations and defined a hierarchy based on context:
Primary content (image/video) takes visual focus
Supporting content (text/audio) complements without competing
This ensured that each piece of content had a clear role within the story.
Resolving Content Conflicts
Resolving Content Conflicts
One key challenge emerged when pairing long text with media.
Both elements competed for attention, weakening the impact of each.
To solve this:
I separated text into its own space
Maintained its conversational structure
Grouped it contextually with related media
One key challenge emerged when pairing long text with media.
Both elements competed for attention, weakening the impact of each.
To solve this:
I separated text into its own space
Maintained its conversational structure
Grouped it contextually with related media
This allowed users to engage with each element clearly, without distraction.
This allowed users to engage with each element clearly, without distraction.
Maintaining Context Throughout the Experience
Maintaining Context Throughout the Experience
To preserve narrative clarity, I designed for both active viewing and paused states.
To preserve narrative clarity, I designed for both active viewing and paused states.
While playing:
A subtle prompt overlay keeps viewers oriented within the story
While playing:
A subtle prompt overlay keeps viewers oriented within the story
While paused:
Additional context (title, prompt, date) is revealed without overwhelming the screen
While paused:
Additional context (title, prompt, date) is revealed without overwhelming the screen
This ensured users always understood:
This ensured users always understood:
What they were viewing
What they were viewing
Why it mattered
Why it mattered
Where they were in the story
Where they were in the story
Designing for Multiple Contributors
Designing for Multiple Contributors
Capsules could include submissions from multiple contributors.
To maintain clarity without disrupting flow, contributor names and timestamps were included as secondary data;
Capsules could include submissions from multiple contributors.
To maintain clarity without disrupting flow, contributor names and timestamps were included as secondary data;
This prioritity supported context without distracting from the story
This prioritity supported context without distracting from the story
Handling Edge Cases
Handling Edge Cases
Not all capsules included visual media.
To support text-only or audio-only experiences:
Not all capsules included visual media.
To support text-only or audio-only experiences:
Preserved focus on content without adding unnecessary noise
Preserved focus on content without adding unnecessary noise
Introduced subtle gradient backgrounds to maintain visual presence
Introduced subtle gradient backgrounds to maintain visual presence
Future iterations could expand on this with more dynamic audio visualization.
Future iterations could expand on this with more dynamic audio visualization.
Outcome
Outcome
Outcome
The redesigned experience transformed received capsules from a passive message feed into a guided, emotionally engaging narrative.
Key improvements included:
Stronger emotional impact through story-driven progression
Clearer content hierarchy, improving comprehension across media types
More immersive interaction, encouraging deeper engagement
While the project concluded before full implementation, the redesign helped reframe how the product delivers its core value, connecting people through meaningful moments across time.
The redesigned experience transformed received capsules from a passive message feed into a guided, emotionally engaging narrative.
Key improvements included:
Stronger emotional impact through story-driven progression
Clearer content hierarchy, improving comprehension across media types
More immersive interaction, encouraging deeper engagement
While the project concluded before full implementation, the redesign helped reframe how the product delivers its core value, connecting people through meaningful moments across time.
Reflection
Reflection
Designing with Intent
Designing with Intent
I learned to focus not just on functionality, but on how design choices influence emotional experience.
I learned to focus not just on functionality, but on how design choices influence emotional experience.
Balancing Vision with Constraints
Balancing Vision with Constraints
Reframing ideas (like the nostalgic effect) helped align design decisions with both technical feasibility and user impact.
Reframing ideas (like the nostalgic effect) helped align design decisions with both technical feasibility and user impact.
Growing as a Designer
Growing as a Designer
Taking ownership of the project pushed me to:
Make decisions with limited guidance
Think more critically about end-to-end experiences
Identify areas for growth in my process
Taking ownership of the project pushed me to:
Make decisions with limited guidance
Think more critically about end-to-end experiences
Identify areas for growth in my process
The Value of Collaboration and Mentorship
The Value of Collaboration and Mentorship
Limited access to prior design context highlighted the importance of:
Understanding the “why” behind decisions
Seeking feedback early
Collaborating across disciplines
Limited access to prior design context highlighted the importance of:
Understanding the “why” behind decisions
Seeking feedback early
Collaborating across disciplines
OTHER PROJECTs.
OTHER PROJECTs.
Designed Scalable Twitch Prediction Overlays for Multi-Outcome Polls
Project Overview: Project: Twitch Prediction Overlay Plugin Timeline: 3 Weeks Role: UX / UI Designer Team: 2 Designers, 1 Developer
Open Source
Web Design
Twitch Prediction Overlay Plugin
UX | UI Design
Designed Scalable Twitch Prediction Overlays for Multi-Outcome Polls
Project Overview: Project: Twitch Prediction Overlay Plugin Timeline: 3 Weeks Role: UX / UI Designer Team: 2 Designers, 1 Developer
Open Source
Web Design
Twitch Prediction Overlay Plugin
UX | UI Design
Designed Scalable Twitch Prediction Overlays for Multi-Outcome Polls
Project Overview: Project: Twitch Prediction Overlay Plugin Timeline: 3 Weeks Role: UX / UI Designer Team: 2 Designers, 1 Developer
Open Source
Web Design
Twitch Prediction Overlay Plugin
UX | UI Design