MyStory: Designing a Video Recording Feature for Life Documentation
Overview
My Role
UX/UI Designer - Interaction Design, User Flows, Visual Design
Team
Andrés Campos, SWE & Founder
Nick Azar, Founder
Sritama Bagchi, UXD
Justin Ngo, UXD
Timeline
6 weeks, Launching Q4 2024
What's MyStory?
MyStory is a life documentation platform that helps families capture and share their stories. After launching their first MVP, the founders sought to introduce new features and revamp the platform based on user feedback.
Problem
An outdated, inaccessible design for elderly users capturing their life stories, with insufficient features to meet their life documentation needs.
Outcome
Redesigned the platform and introduced a new story capture process that balances complex features with a simple and accessible design for elderly users.
Users can now share their life stories through a seamless video recording experience
Users can attach photos to share captured moments from their stories
Users can add story details through a written account of their perspective
Research
User Archetypes
Middle-aged to elderly users looking to consolidate and share their life story.
To approach the redesign, I first analyzed the platform’s users and their needs—primarily middle-aged and elderly individuals seeking to preserve their life stories for future generations.
User Archetypes
Middle-aged to elderly users looking to consolidate and share their life story.
To approach the redesign, I first analyzed the platform’s users and their needs—primarily middle-aged and elderly individuals seeking to preserve their life stories for future generations.
User Archetypes
Middle-aged to elderly users looking to consolidate and share their life story.
To approach the redesign, I first analyzed the platform’s users and their needs—primarily middle-aged and elderly individuals seeking to preserve their life stories for future generations.
Existing Story Capture Flow
The MVP lacked foundational usability considerations, as it primarily focused on testing a core concept.
The MVP the founders built was a proof of concept for transitioning family life story documentation to digital but lacked usability, design fundamentals, and key features.
Existing Story Capture Flow
The MVP lacked foundational usability considerations, as it primarily focused on testing a core concept.
The MVP the founders built was a proof of concept for transitioning family life story documentation to digital but lacked usability, design fundamentals, and key features.
Existing Story Capture Flow
The MVP lacked foundational usability considerations, as it primarily focused on testing a core concept.
The MVP the founders built was a proof of concept for transitioning family life story documentation to digital but lacked usability, design fundamentals, and key features.
OLD DESIGN
In-accessible design
Older users may struggle due to inadequate visual accessibility considerations.
In-accessible design
Older users may struggle due to inadequate visual accessibility considerations.
In-accessible design
Older users may struggle due to inadequate visual accessibility considerations.
OLD DESIGN
Outdated Design
The design had numerous inconsistencies, poor layout, and weak visual hierarchy.
Outdated Design
The design had numerous inconsistencies, poor layout, and weak visual hierarchy.
Outdated Design
The design had numerous inconsistencies, poor layout, and weak visual hierarchy.
OLD DESIGN
Missing Key Features
Users couldn't fully rely on the platform due to the inability to add photos or written accounts to their stories.
Missing Key Features
Users couldn't fully rely on the platform due to the inability to add photos or written accounts to their stories.
Missing Key Features
Users couldn't fully rely on the platform due to the inability to add photos or written accounts to their stories.
The Opportunity
To build an inclusive, accessible life documentation platform for elderly users to share stories with family.
The Opportunity
To build an inclusive, accessible life documentation platform for elderly users to share stories with family.
The Opportunity
To build an inclusive, accessible life documentation platform for elderly users to share stories with family.
User Problem
To have an intuitive platform that consolidates all life documentation needs in one place, enabling easy story creation and sharing.
User Problem
To have an intuitive platform that consolidates all life documentation needs in one place, enabling easy story creation and sharing.
User Problem
To have an intuitive platform that consolidates all life documentation needs in one place, enabling easy story creation and sharing.
Business Opportunity
To create a social platform that attracts family members contribute to, increasing active users and driving monetization.
Business Opportunity
To create a social platform that attracts family members contribute to, increasing active users and driving monetization.
Business Opportunity
To create a social platform that attracts family members contribute to, increasing active users and driving monetization.
Updating Flows
Flow Overview
Incorporating AI to personalize each users story documentation process.
A key goal was to enable the platform to ask users personalized questions based on their previous inputs. Although this would be handled in a separate flow, it was essential for the story capture process to reflect a level of personalization for the user.
Flow Overview
Incorporating AI to personalize each users story documentation process.
A key goal was to enable the platform to ask users personalized questions based on their previous inputs. Although this would be handled in a separate flow, it was essential for the story capture process to reflect a level of personalization for the user.
Flow Overview
Incorporating AI to personalize each users story documentation process.
A key goal was to enable the platform to ask users personalized questions based on their previous inputs. Although this would be handled in a separate flow, it was essential for the story capture process to reflect a level of personalization for the user.
Feature Prioritization
Core features include recording/uploading a video, photos uploads, and text input.
Feature Prioritization
Core features include recording/uploading a video, photos uploads, and text input.
Feature Prioritization
Core features include recording/uploading a video, photos uploads, and text input.
Video Recording
Users must be able to record their responses to story prompts within the platform.
Video Recording
Users must be able to record their responses to story prompts within the platform.
Video Recording
Users must be able to record their responses to story prompts within the platform.
Media Upload
Users must be able to upload videos and photos from their device for each story prompt.
Media Upload
Users must be able to upload videos and photos from their device for each story prompt.
Media Upload
Users must be able to upload videos and photos from their device for each story prompt.
Text Editor
Users must be able to write in a text document for their written account of the story.
Text Editor
Users must be able to write in a text document for their written account of the story.
Text Editor
Users must be able to write in a text document for their written account of the story.
Contraints & Challenges
The biggest challenge was ensuring users perceived the entire documentation process to be happening on a single screen
Contraints & Challenges
The biggest challenge was ensuring users perceived the entire documentation process to be happening on a single screen
Contraints & Challenges
The biggest challenge was ensuring users perceived the entire documentation process to be happening on a single screen
Tailwind CSS Library
The developer preferred the designs to closely align with the specific libraries.
Tailwind CSS Library
The developer preferred the designs to closely align with the specific libraries.
Tailwind CSS Library
The developer preferred the designs to closely align with the specific libraries.
Avoid Form-like Progression
The founders wanted to avoid users feeling like they were navigating a form pages.
Avoid Form-like Progression
The founders wanted to avoid users feeling like they were navigating a form pages.
Avoid Form-like Progression
The founders wanted to avoid users feeling like they were navigating a form pages.
Design for Elderly Users
The design had to simplify features for users less skilled at navigating platforms.
Design for Elderly Users
The design had to simplify features for users less skilled at navigating platforms.
Design for Elderly Users
The design had to simplify features for users less skilled at navigating platforms.
Iterations
Single-Paged Layout
A single page with modular elements based on the user's chosen story contents.
To meet the constraint of using one or a few pages, I proposed a modular format that allows users to add photo and written sections if they choose to include them in the story.
Single-Paged Layout
A single page with modular elements based on the user's chosen story contents.
To meet the constraint of using one or a few pages, I proposed a modular format that allows users to add photo and written sections if they choose to include them in the story.
Single-Paged Layout
A single page with modular elements based on the user's chosen story contents.
To meet the constraint of using one or a few pages, I proposed a modular format that allows users to add photo and written sections if they choose to include them in the story.
SINGLE-PAGED LAYOUT IDEATION
Content Limited to One Page
Content Limited to One Page
Content Limited to One Page
Feedback indicated that the design felt overwhelming for older audiences at first.
Feedback indicated that the design felt overwhelming for older audiences at first.
Feedback indicated that the design felt overwhelming for older audiences at first.
Including all story sections may require extra scrolling, disrupting the experience.
Including all story sections may require extra scrolling, disrupting the experience.
Including all story sections may require extra scrolling, disrupting the experience.
Fixed Viewport Iteration
Locking content to the viewport and presenting optional story elements in a tab-based format.
Based on feedback, I implemented tabs for selecting photos and written sections, eliminating scrolling and reducing cognitive load for the current task.
Fixed Viewport Iteration
Locking content to the viewport and presenting optional story elements in a tab-based format.
Based on feedback, I implemented tabs for selecting photos and written sections, eliminating scrolling and reducing cognitive load for the current task.
Fixed Viewport Iteration
Locking content to the viewport and presenting optional story elements in a tab-based format.
Based on feedback, I implemented tabs for selecting photos and written sections, eliminating scrolling and reducing cognitive load for the current task.
FIXED VIEWPORT IDEATION
Reduced cognitive load by only revealing immediate and relevant actions needed.
Reduced cognitive load by only revealing immediate and relevant actions needed.
Reduced cognitive load by only revealing immediate and relevant actions needed.
Organizing story content into tabs reduced visual clutter.
Organizing story content into tabs reduced visual clutter.
Organizing story content into tabs reduced visual clutter.
Still missing implementation of all the features and edge cases.
Still missing implementation of all the features and edge cases.
Still missing implementation of all the features and edge cases.
Selected Design
Story Elements
Story elements organized into tabs, enabling users to select their desired content.
Story Elements
Story elements organized into tabs, enabling users to select their desired content.
Story Elements
Story elements organized into tabs, enabling users to select their desired content.
Video Recording
Simple in-platform video recording without navigating complex elements, settings, or options.
Video Recording
Simple in-platform video recording without navigating complex elements, settings, or options.
Video Recording
Simple in-platform video recording without navigating complex elements, settings, or options.
Photo Upload
Intuitive drag-and-drop interaction for users to quickly upload photos to a story.
Photo Upload
Intuitive drag-and-drop interaction for users to quickly upload photos to a story.
Photo Upload
Intuitive drag-and-drop interaction for users to quickly upload photos to a story.
Written Story
Simple text editor for users to add a written account of their story.
Written Story
Simple text editor for users to add a written account of their story.
Written Story
Simple text editor for users to add a written account of their story.
Chime-In Requests
Encouraging social interaction by enabling connections to tag others, inviting them to share their perspective on a story.
Chime-In Requests
Encouraging social interaction by enabling connections to tag others, inviting them to share their perspective on a story.
Chime-In Requests
Encouraging social interaction by enabling connections to tag others, inviting them to share their perspective on a story.
Retrospective
Takeaway
Contraints create opportunity to design better solutions.
Working within the project's constraints pushed me to refine and elevate the design solution beyond what I might have achieved otherwise.
Takeaway
Contraints create opportunity to design better solutions.
Working within the project's constraints pushed me to refine and elevate the design solution beyond what I might have achieved otherwise.
Takeaway
Contraints create opportunity to design better solutions.
Working within the project's constraints pushed me to refine and elevate the design solution beyond what I might have achieved otherwise.
Takeaway
Working closely with other designers and a developer.
I’ve gained valuable insights into improving my communication and collaboration with both designers and non-designers, allowing me to better account for diverse perspectives in the solution.
Takeaway
Working closely with other designers and a developer.
I’ve gained valuable insights into improving my communication and collaboration with both designers and non-designers, allowing me to better account for diverse perspectives in the solution.
Takeaway
Working closely with other designers and a developer.
I’ve gained valuable insights into improving my communication and collaboration with both designers and non-designers, allowing me to better account for diverse perspectives in the solution.