Abdul Ibrahim

Product Designer

Work

About

Resume

Abdul Ibrahim

Product Designer

Work

About

Resume

Abdul Ibrahim

Product Designer

Work

About

Resume

Overview
Research
Updating Flows
Iterations
Final Designs
Retrospective

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.

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.

OLD DESIGN

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.

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.

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.

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.

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.

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.

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.

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 IDEATION

Content Limited to One Page

Feedback indicated that the design felt overwhelming for older audiences at first.

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 IDEATION

Reduced cognitive load by only revealing immediate and relevant actions needed.

Organizing story content into tabs reduced visual clutter.

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.

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.

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.

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

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.