Sepia — A UX Case Study

Introduction

This student project was part of a 6-week design sprint for Design Interactive, a student-run human-centered design organization at University of California, Davis. We worked on this during the 2023 Fall Quarter, from mid October to late November. The initial prompt was to create a unified platform where people can organize and share their cherished memories with their friends and family. The final outcome was an interactive mobile prototype, called Sepia, that focuses on encouraging people to reminiscence on their past photos, and be able to reconnect with their loved ones through those revisited memories.

Responsibilities and Timeline

For the first week of the 6-week sprint, we started off with user research, led by Sechan. We identified our research goals, and from there, created a survey, conducted user interviews, collaborated on a market comparison chart, and produced a SWOT analysis.

After that we went on with synthesizing and ideation for the second week, which was led by Michelle. For this week, we used the research that we conducted to create a user persona and each produced user insights, which we then used to create an affinity map. From this affinity map, we discovered five categories, and chose three key takeaways to focus on as pain points. We used these three key takeaways to create three solutions, which guided our sketches and user flows.

For the third and fourth weeks, we went on to Mid-Fidelity Prototyping & Usability Testing, which were led by Janine and Sechan. Based off of our sketches and user flows, we created wireframes on Figma, which we would use for our usability testing. We began with establishing our user testing goals, and brainstorming questions based off that. We conducted our usability tests, and based off of feedback, adjusted our wireframes so that we could move on to High-Fidelity Prototyping.

For the last two weeks of the sprint, led by Jamie, we focused on High-Fidelity Prototyping & more Usability Testing. During these two weeks, we established our design standard in order to make our screens look more fluid and consistent, and also tweaked a few screens based off the additional testing we did.

Research

Initial Research Goals

Before delving deep into our research, we first began by brainstorming various questions that would be helpful targeting the prompt. After multiple considerations, we ultimately decided on this one goal: to find out exactly how users preserve their memories. In order to have a more specialized focus under the main overarching goal, we created 4 main categories with a variety of questions related to their respective sections.

Survey Results

Utilizing the 4 categories, we asked 105 survey takers their experience in how they preserve their memories. The target demographic for these were young adults/teens who like to save past experiences in any fashion, both physical and digital. Some useful statistics were that:

• 58.3% preferred social media the most
• 53.3% believed sharing with physical photos were least preferable
• 80% save their memories digitally either often or always

User Interviews

In order to garner more qualitative insights, we conducted 13 interviews with a wide range of avid social media users, photo-savers, and scrapbookers to provide unbiased results. Similar to the survey results, the questions we asked were based off of the 4 main categories which provided productive insights used for the latter portions of our design process.

Market Comparison Chart

From the interviews, we also inquired about which products and features interviewees utilized to take, edit, and share photos. Paired with our personal experiences, we created a market comparison chart to compare features, taking inspiration from strengths and improving on existing weaknesses.

SWOT Analysis

To narrow down our market comparison chart, we split the list of brainstormed products into direct and indirect competitors. From there, we created SWOT analysis charts on two of our main competitors: Instagram and Google photos. This way, we could look specifically through different pockets of opportunities for improvement on our product.

Ideation

User Persona

After conducting research, we created our user persona, Sora, to better understand our audience. Her information is based off of the user insights we made when looking back at the user interviews that we did.

Affinity Mapping

We were able to define problems and opportunities based on the research findings by discovering common themes and brainstorming possible solutions. With our user insights, we did some affinity mapping and categorized our research into five categories. From these five categories, we narrowed down our findings into three themes, which would then become our pain points:

• Pain Point #1: People are less likely to post on social media when they don’t have an aesthetically pleasing post
• Pain Point #2: Accessing memories is difficult due to lack of organization
• Pain Point #3: People don’t go out of their way to reminisce old memories unless they are reminded of the memories.

Problem Statement

After narrowing down our pain points, we created our problem statement to help guide us through our design solutions:

Despite capturing memories, people do not often have a chance to revisit them, which creates missed opportunities on reconnecting with loved ones.

Solutions

Using our pain points and problem statement as guides, we brainstormed three solutions:

• Solution #1: AI-generated templates where users can choose and quickly customize post
• Solution #2: A shared and personal time capsule that allows people to save memories from the present and past
• Solution #3: A daily prompt that encourages the audience/user to look back on memories

With these solutions inspired by our key takeaways, we’ll be able to create features that address our user’s pain points.

Lo-Fi Sketches

For Low-Fidelity Sketching, we individually went on to sketching out some designs! Here are the features that we brainstormed:

• Profiles Page: This page is where users are able to customize their profile for others to see. They can also view their previously posted daily memories and time capsules, which are organized into two different tabs.
• Community/Home Page: On the Home Page, the users will be able to see their friends daily memories and capsules when they are posted. The user is also able to switch between different feeds, which is based on the groups they are in and what the group members choose to post exclusively for each other to see.
• Creating Capsule Page: In order to allow users to be reminded of old memories, we created the Individual and Group Capsules, where people choose photos to be locked for a certain amount of time, and only opens after that time expires. This is the screen where people get to choose which photos they would like to lock away, and allows them to edit it as well.
• Daily Memory Page: Based on three prompts that are sent out every day, users will be able to post a photo based on what prompt they chose. This encourages the users to look back on their past photos that would fit the prompt. Users will be able to edit their photos, pick out a song, and create a caption to go with their daily memory post.

User Flow

After creating our lo-fi sketches, we each independently created user flows for the main screens that we sketched. This allowed us to visualize the user’s journey across our app as they navigate through each screen.

Mid-fi Prototyping

Now that we have solutions, here’s what we came up with!

These are the wireframes for each of the buttons on our navigation bar. For these wireframes, we are only using shades of black and white to bring emphasis on the structure and content for each screen. You might also notice that there are two pages for Groups which will be discussed in the usability testing insights.

Usability Testing

User Testing Goal

Our goal for our usability testing is to assess the efficiency and feasibility of using our main features (the daily prompt & time capsule), and how they connect to the rest of the product.

Since we were creating a digital capsule, a relatively new and unseen feature in the social media industry, we want to make sure that our users understand and feel comfortable through the process of creating a digital capsule. Since each of us was working on a part of Sepia, there could be a chance that we could overlook a rough part of the user flow, so we also want to test for struggles in this aspect.

User Testing Questions

Some questions that we asked our users to reach our goal include:

• Can you make a group capsule?
• Where can you look for a friend’s post?
• Can you explain how a daily prompt works to another person?
• Does the home feed feel hard to navigate through?

During our user testing, we asked our testers to complete tasks to understand their ease and struggles when using Sepia, and open-ended questions to understand their thought process and listen for qualities of a good design.

Usability Testing Insights

From our mid-fidelity user testing, we found some usability struggles on creating a capsule. One of the struggles was that our users were unsure or did not fully understand the differences between a Group Collaboration Capsule and a Group Exchange capsule even though we also had images paired with the capsules. So we decided to make our capsule feature simpler and only have group collaboration capsules since users are already absorbing a lot of information from learning a new feature. And in the future when our users are more comfortable with capsules, we can implement Group Exchange. Another usability struggle that we had is with creating an individual capsule, which users had to skip the group capsule to reach the individual capsule. And we found that the skip button was was too hidden and did not indicate making an individual capsule. So using the empty space from the Group Exchange, we decided to place the individual capsule button there which is much more clear and bolded.

We also found that users struggle locating existing capsules and even when they enter the right page (the Groups on the navigation bar) they exit out. So I was glad that we made this change even on our second to last week on this project. Our solution to making capsules more accessible is to rename Groups to Capsules and make capsule assets for visual communication.

Although there were struggles with some features, we also had successful features. From our user testing, we found that on the home page, the daily memory grabs the users’ attention and the drop-down for changing the feed is just noticeable enough. For creating a Daily Memory, all users smoothly and successfully made a Daily Memory. And the Profile page was easy to understand and navigate.

Hi-fi Prototyping

Design Standard

With our app, we wanted users to feel a sense of warmth and nostalgia, reminiscent of sepia-toned memories. The chosen color palette of browns, oranges, yellows, and reds creates a comforting and inviting atmosphere, inviting users to connect with the past in a modern context. The sepia theme not only imparts a timeless aesthetic but also evokes a feeling of familiarity and sentimental value. We also chose san serif fonts to put a modern and friendly twist to the timeless old sepia aesthetic. For the logo, we chose to recreate a symbol to represent a photo flash or vintage camera, adding a touch of retro charm.

Creating a Daily Memory

One main feature we have in the app is creating a daily memory. Users have the option to choose between three prompts and answer the question by taking a photo or using an existing image by searching or using the recommended list. This allows users to easily look for images to answer the daily prompt. There are also simple editing features and adding music, location, and tagging people to the post. This holistic approach ensures that each daily memory becomes a vivid and interconnected piece of a user’s narrative, creating a more engaging and meaningful journey through the app. When posting users can select specific groups to post to or opt to post to their general followers list.

Individual Capsule

Group Capsule

Creating a Capsule

Our second main feature is creating time capsules. Users can choose to create individual or group capsules. Steps to create a time capsule include naming the capsule, adding and editing pictures, and setting a release date. For group capsules, two additional steps allow the admin to add friends and set a lock date. Setting a lock date allows time for all members to add photos before the capsule closes.

Accessing Capsules

Users can effortlessly manage their capsules using the capsules icon on the navigation bar. The interface allows them to filter through in-progress, locked, and released capsules, providing a systematic organization of their memories. In the in-progress section, users can seamlessly add photos to enhance their capsules. Additionally, they can easily check on their locked capsules, maintaining a comprehensive overview of their creative journey and memories. From our user testing we decided to include a capsules page instead of a groups page to ensure that users have a centralized hub for managing their capsules.

Capsule Release

Upon releasing a capsule, users will receive a pop-up notification, guiding them to select photos for posting. In addition to this, users can choose to generate and edit a collage cover page for their released capsule. This feature offers a personalized and visually enhanced presentation of their memories, contributing to an engaging sharing experience. It empowers users to craft a narrative that reflects their unique perspective, ensuring each released capsule becomes a compelling and expressive part of their collection.

Organizing Photos

For a seamless journey down memory lane, users can effortlessly organize their past posts by scrolling through their profile pages. Users can also select the calendar view to revisit their daily memories on a larger scale. With the search icon on the navigation bar, users can pinpoint specific photos, memories, and even friends with this versatile tool

Profile Page

Search Page

Challenges

Some challenges that we faced during this sprint is creating a system and unifying design ideas across our wireframes. Our user flow was complex, so it was easy to get lost in our own individual perceptions about the aesthetics and form of the app. However, by creating and iterating our design system, we were able to overcome the issue to the best of our abilities. It was also difficult organizing and differentiating daily memories from time capsules. Our usability testing revealed this concern to us, but we were able to come up with a solution that made sense in the end.

Presentation Day & Next Steps

During presentation day, we had the chance to present our prototype to industry professionals, who provided us with insightful feedback about our project. After our presentations, the judge awarded us with Best UX Research.

Based on the presentation day feedback and our own thoughts, the logical next steps to this prototype are creating variable screens catered for first-time or returning users. By doing so, we can minimize repetition by creating flows that are tailored users who are familiar with the app, and also create screens that are tailored towards a first-time user. We also think we should conduct more usability testing on our redesigned screens, to ensure that our wireframes are fully functional and accessible.