KeepSake — A UX Case Study

Our Final Prototype

Introduction

As families grow larger and more dispersed, personal stories, health histories, and generational knowledge often get lost or forgotten. Traditional methods of sharing and storing this information are fragmented, insecure, or inaccessible to the people who need them most. Families want to share the past and the future from generation to generation.

So we designed KeepSake, an app where families can securely share confidential information and learn more about their family’s personal, historical, and medical backgrounds. This was created in a 6-week student-led design sprint using Figma.

Problem Statement

Responsibilities and Timeline

Sprint Breakdown

W1: User Research — Led by Alexandra Borillo

• Surveys
• User Interviews
• Competitive Analysis

W2: Synthesis and Ideation — Led by Swati Iyer

• Affinity Mapping
• Information Architecture
• Lo-Fi Wireframing

W3 & 4: Mid-Fi and Usability Testing — Led by Dipashma Baniya

• Prototyping
• User Testing

W5 & 6: Prototyping and Hi-Fi — Led by Evelyn Kuei

• Design Systems
• Refining Mid Fis

Research

Research Goals

Our primary goals were:

• Identify user pain points with managing high-stakes files
• Understanding preferences for utilizing digital platforms for organizing files
• Develop a user-friendly interface that feels safe and secure

We started with literature reviews to find out what other products were already out there and identify common pain points. This helped us with forming our research questions. From that, we created our survey.

We surveyed 60 people aged 18–60+ years old and conducted 15 interviews.

Here’s what stood out to us:

Survey

From our survey, we realized users were apprehensive with storing their important documents online; they felt it was more unsafe. However, they were open to storing their files if the app included multiple different security features. It was important for them to have these files easily accessible.

Interviews

From our interviews, we realized we needed to pivot our focus a bit. We still wanted a space for high-stakes documents, but users seemed to want a space for storing things like memorabilia. It was important to store information that could be passed down from generation to generation.

Competitive Analysis

We conducted multiple SWOT analysis with different document organizing and family tree applications. Common features for the document organization included security and cloud storage. Common features for family trees include family background information and additional DNA features, where you can learn about other family members around the world.

Synthesis

Our synthesis consists of affinity mapping where we understood and narrowed down user needs and pain points. From there, we built user personas that reflected the people we were designing for.

Affinity Mapping

We used affinity mapping to organize our research findings into categories such as security, accessibility, organization, habits, and pain points. This process helped us identify key user patterns and what users want, which helped us with decision-making during the ideation phase. This process helped our design solutions to address real user concerns.

User Personas

We created personas based on insights from our user research to represent key behaviors, needs, and frustrations. This helped us identify patterns across different users such as caregivers, dependents, and tech-hesitant family members, and design features that addressed their specific goals and challenges.

Ideation

After understanding our users’ needs and creating two user personas, we derived different user journeys to understand how one would navigate their KeepSake.

There were two main features we wanted to explore in user journeys, uploading and sharing documents on KeepSake and the Family Tree. When uploading documents, we noted how other platforms have a multi-layered process in each step of the process. When sharing documents, the same applies.

Information Architecture

We created an information architecture as a guide to build our lo-fidelity sketches and later our mid-fidelity prototyping. We noted five unique pages: onboarding, documents, family tree, profile, and dashboard.

For each page we also noted unique and necessary functions of each page and how pages would interlink with one another. Our most notable features are:

• Documents: clarity in uploading, permissions, and navigating the application.

Lo-Fi Sketches

Taking reference from the information architecture, we created versions of quick lo-fi sketches for different pages in our app : onboarding (signing up), documents, family tree, and profile settings. Through team discussions and feedback, we identified the most essential features from each screen to move forward with, and we made sure that our mid-fidelity prototypes reflected both user needs and our design goals based on the user research.

Mid-fi Prototyping

Our Mid-Fi stage consisted of bringing the information architecture and wireframes to life. We focused on 4 different pages : onboarding, document, family tree, and profile settings. Based on our research and insights from the users, we narrowed our focus to improving clarity, accessibility, safe storage, and emotional resonance across the screens.

We began with rough paper sketches to quickly map out layout ideas, gathered it together and created an information architecture, then transitioned into mid-fidelity prototypes using Figma, where we refined the structure, spacing, and interaction flow.

Onboarding

We prioritized building a secure onboarding experience to reflect the sensitive nature of the documents being stored. By adding security layers like two-factor authentication, our key focus was to build user trust and prevent identity theft.

Document

The document page was designed to make uploading, organizing, and sharing files seamless and secure. We aimed to implement intuitive upload flows, clear folder structures, and sharing controls.

Family Tree

We designed the family tree to help users preserve generational connections. By allowing them to add members, view their profiles, and explore shared histories, we wanted to support both emotional storytelling and practical record-keeping in one place.

Profile Settings

We designed the profile settings to give users control over their account, and allow them to adjust accessibility, manage privacy, and customize security settings with ease.

Usability Testing

After our mid-fi prototyping, we conducted two rounds of usability testing — the first with five design students at UC Davis, and the second with two family members to gain more diverse, real-world feedback.

Our goal for onboarding process was to make sure the information we are gathering from users makes sense for our app and it sets the users up to utilize our app well.

The goal for our document page was to make sure that when sharing a high-stakes document, it feels secure enough and that the customizability settings we currently have in place make sense for sharing with other family members.

For our family tree, we wanted to make sure that navigation through the family profile is clear and accessible.

We wanted to ensure users could easily understand the purpose of profile settings and confidently manage their accessibility, account preferences, and privacy options from this section.

Hi Fidelity

After conducting our usability studies, we incorporated the feedback we received from users into our final design. Each of the five interactions — Family Tree, Documents, Profile, Dashboard, and Onboarding — received their final touches.

Our Final Design System

For this design, we chose to follow a sleek and minimalistic theme, with one pop of color being our green, a neutral black for text, grey for subtext and drop shadows, and an off white for our app background.

For our typography, we choose two different fonts. Poppins for our headers to emphasize and draw attention to section titles and page titles. DM Sans for body text as is the most digestible.

Onboarding

The first impression users have of KeepSake is in the onboarding process. Here we wanted users to know exactly what step of the registering process they are on with a progress bar at the very top. We also added a few unique features within the process to ensure no fraudulent activity occurred, or double accounts being created.

Verify Your Identity

For onboarding, we incorporated a safety mechanism to ensure no fraudulent activity occurred during the registration process.

Four-Digit Access Pin

In addition to incorporated a SSN verification. We also require users to create a 4-digit pin to ensure that all confidential information stored in the app is accessible to the right person.

Documents

Here the users can upload and share their documents, confidential or non-confidential. Users can create personalized folders, customize them, and find information they would typically keep physically, digitalized.

For the documents section, we focused on incorporating micro-interactions that verify the user’s needs in each step of sharing and uploading documents.

Sharing Documents

When sharing your documents, we wanted users to feel safe and secure with who they were sharing.

In each micro-interaction, users were asked to verify who they want to share with, what type of access the individual document, and finally the verification that the document was sent over.

Viewing Documents

When viewing documents, especially confidential documents, users must input their four-digit access pin. This will ensure the right information will go to the right hands.

Family Tree

Trying to see who is in your family and what they’ve been up to? The family tree page provides users with the opportunity to view birthdays, photos, memorabilia, and life story of their close family members — alive or deceased.

Viewing your Personal Profile

Within the profile, there are multiple pages: Information, Life, Gallery, Memorabilia, and Medical Records. With all of those users can make edits, upload images, and files directly.

Life is a page for a general timeline that users can include life achievements and more

Gallery is a space to upload any photos of your choice

Memorabilia is similar to documents, but it is specifically for things like recipes, awards, etc. These can be set as public or private, depending on what users want to share with their family.

Viewing Family Profiles

Very similar to a Personal File, but depending on what the user’s settings are, users may have permissions to edit another person’s profile.

Family members can ****contribute directly to a profile, adding memories, uploading photos, or adding to their timeline to expand and enrich that person’s story over time.

Medical Records can be viewed depending on the user’s privacy settings. We thought by including this, it would be helpful to understand a user’s medical background, but also account for the users who wouldn’t want their medical history out for everyone to see.

Finding a Keepsake through the Family Tree

Once the user finds the file they are looking for, they can share or download it. Additionally, we included a Comment feature so users can see how other family members are using the file. We thought this addition would increase interactivity and connection between users.

Adding a Family Member to the Tree

By clicking on the + Button, users can easily add to their tree. Just input their relationship to the family member, their name, and date of birth, and their profile will be added!

A personal active account is not necessary. This is so that both living and deceased members can be added without additional verification on their ends.

In the case that a living family member does make a Keepsake account, they can link their account to their profile later.

Profile Settings

For users to feel safe and secure, we implemented many different features into the profile page. Here users can customize different features of their app, most notable security.

Legacy Access

Anything can happen at any moment, that’s why users have the ability to establish legacy access.

Legacy access allow users to establish a family member who can access their account in the case of an emergency.

Linked Accounts

To address parental and minor accessibility, we created linked accounts. Here, the head of the household, can establish who is in the family and what access they have within the application.

Secure Your Information

Security is a major feature within our app. Here we establish different measures for users to turn on and off to ensure their information and family information is secure and safe.

Users are able to turn on or off:

• Establishing/Changing Passwords
• Double Authentication
• Passcode/Four-digit Pin
• Social Security Number Verification
• App Lock

Presentation Day

Presentation day was a little nerve-wracking, considering we have been working on this project all quarter long. Regardless, we were excited to show our work because of how niche our problem space was.

The judges gave us props for targeting a wide range of features and complimented the clean interface. Some areas of improvement were making more unique viewing and interactive features instead of standardizing them. Specifically, when viewing things like recipes, certificates, etc.

Challenges

Throughout the design process, we went through a lot of back and forth between our HMWs and User flows. Because this was such a unique problem we were addressing, we knew connecting an organizational space and family tree would be difficult, but we were confident about the problem space we were targeting.

In the beginning, our initial research showed that users wanted a space for storing memories, not so much confidential information. Which led us to focus more on the familial aspect of our app.

Another challenge we faced was with our characterization. We wanted to create a highly secure application, as users still needed to upload some forms of confidential information, but we still wanted to integrate the personal and meaningful feel of telling a story through generations.

The last challenge was security over ease of access. As we needed to implement privacy controls, we found it difficult to balance the layers of security with the ease of accessing information.

Takeaways & Next Steps

Throughout the past 6 weeks, we began and finished many of our first cohort projects. We learned how important research and usability tests are in creating a design that meets our consumers’ needs. We learned how design is a non-linear process, going back and forth between research to low-fi, mid-fi, or high-fi.

What’s Next?

With more time, we would like to integrate more micro interactions, make a mobile-to-desktop version, and include more interactive ways to view different kinds of documents.