Memento
📝 Context
For a class project on Lifestyle, my team tackled 'post-party blues,' a deeply human experience. I led exploratory research and guided our iterative design process, resulting in the highest grade in our cohort.
🤝 Role
Product Designer & Product Manager
⌛️ Timeline
Jul 2023 - Nov 2023
👯♀️ Team
Vivian Truong + 2 Team Members
🏆 Achievements
Highest Mark in Cohort
🧐 The Problem
Events. Parties. Concerts. Whether or not you’ve been to one in a while. We will always have to wonder about: after.
In our lifetimes, we spend most of it wondering about the ‘what-ifs’
Even the world’s biggest extroverts admit that they get post-party blues:
“I’m not even going to lie, you guys be making me feel FOMO like why didn’t I go to the Grammys like post-party blues for real”
- Kim Kardashian
What if we altered what after looked like?
Today, audiences are creating hundreds of thousands of group chats and event pages via DMs on countless social media platforms just to convey the simple information of event details.
Instagram and Facebook have varying modes of event creation platforms, often used by university societies and sometimes, young adults and teenagers, but no-one has thought about how these outings are affecting people post-event.
🧠 The Solution
Memento: Why just reminisce about events when you can relive them, prolong those memories and anticipate future ones?
⌛️ The Process (Roughly)
The double diamond model
💭 Discovery
Primary Research
After undergoing secondary research, we conduced the triangulation method of surveys, semi-structured interviews and online ethnography surrounding the following research questions:
In total we conducted:
Surveys
📝 90 Responses
Interviews
🗣️ 14 Participants
Online Ethnography
🌐 30+ Forums
What did this tell us?
What are the primary challenges you face in maintaining consistent, meaningful, and in-person connections with your adult friends?
We discovered that digital distractions, communication barriers and social anxiety were the most prevalent challenges, sparking further inquiries into the reasons behind people experiencing these particular feelings.
Why are people leaving parties feeling so empty?
Who experienced post-party feelings?
Introverts vs Extroverts
The occurrence of post-event feelings appears to be evenly distributed between introverts and extroverts, suggesting that the post-event experience is not significantly skewed towards a specific personality type.
📝 Define
We sorted the notes from the online ethnography + survey + interviews and categorised them to find commonalities.
After synthesising and analysing our key findings, we identified 5 key insights:
💡 The Problem Statement
After exciting events, young people often feel a mix of emotions like nostalgia, emptiness, and social fatigue post-event. These feelings can get worse when they try to ignore their emotions or rush back to being productive. And whilst there are plenty of ways to bounce back after events, it's still tough for many to unwind and hold onto those special memories.
Who are we designing for?
We categorised our interviewees among different demographic and event-going factors using a data sheet. These factors range from whether they are female or male to whether they are productive or restful during the post-event phases.
We identified interviewees with similar traits, resulting in two extroverted and one introverted personas along the introvertedness spectrum. They were categorised based on the events they mainly discussed: travel, concerts, or parties.
Meet our Users
Mary
"Reconnecting with friends after the event is probably really important because I like to catch up and see what everyone's experience was.”
Chris
"I try to enjoy the moment because I am aware that it won't last. Life's too short to dwell on what might be passing by."
Tanya
"I just wish I could have talked to more people for longer. Because I talk to people on a surface level, just small talk.”
Storyboarding
Articulating the challenges encountered during the emotional and social integration process of an individual grappling with anxiety at social gatherings.
We've crafted a User Journey map featuring Mary, illustrating the dynamic evolution of experiences from initial reluctance and social withdrawal to gradual adaptation and heightened anxiety throughout all stages of an event.
📦 Develop
Our team generated numerous concepts through three ideation techniques. The ideas represented below are the final ideas from each ideation technique we had made. Through this process, we condensed our creativity into three distinct rough ideas.
How did we decide?
We constructed a decision matrix to evaluate each idea based on various criteria such as likeability, market demand, and interest factor. Memento earned high scores primarily as we liked the base idea, which enabled us to tailor it to the appropriate audience without imposing a predefined structure.
However, despite this, we found ourselves drawn to the ideas behind both Stash and Memory, which outperformed Memento in our decision-making process. Taking this into account, we integrated various aspects of each concept into Memento, as illustrated in the low-fidelity frames.
Prototyping
Our team had undertaken 4 rounds of tests throughout prototyping from Mid fidelity to High Fidelity
Sketches
As the initial step in the prototyping process, we began by crafting sketches that served as the foundation for our app's development. These sketches, meticulously created and iterated upon, provided us with a visual roadmap to outline the structure, layout, and functionality of the application.
Low-Fidelity Prototyping
Upon finalising sketches, low fidelity prototyping was utilised for the purpose of laying out broad concepts early within the design process. Out of multiple iterations, some significant iterations included:
Mid-Fidelity Prototyping
What did the people say?
We had tested our mid-fidelity design as static frames that we click through as participants described their thoughts and actions through:
Think-Aloud interviews
📝 5 Participants
Cognitive Walkthroughs
🗣️ 10 Participants
System Usabiity Scale
🎙️ 15 Responses
We condensed transcribed data using an Affinity Map, where we analyzed expert recommendations derived from recurring feedback in an Insights Table.
Affinity Mapping
Insights Table
High-Fidelity Prototyping
We opted for multiple iterations based on the severity or relevance to the problem statement. These iterations were then integrated into our high-fidelity design, following a carefully considered design system. Below are two examples of our iterations:
Prior to integrating interaction into our design within a suitable timeframe, we opted to assess our high-fidelity design with two participants: an expert and a user. Employing a casual Think-aloud test, this process sparked a complete brand transformation.
Originally, our primary colours were orange and blue, associated with optimism and warmth encourages users in their Post Event phase. However, as quoted by a graphic designer, these colours conveyed an:
"An Outdated Grandma Feel"
To combat the 'aged' look, we’ve changed to high-contrast black and white to still cater for that retro film-look and that pop of blue as our calming colour. We’ve included a casual tone of friendly emojis and lowercase headings that continue to reassure users. With the dark muted colours aimed to inspire that nostalgic 2000s appeal in young people.
Building Our Interactions
It was now time to translate our mockups into interactive prototypes using Figma. Initially, we tested them with experts to pinpoint any significant deviations from best practices, and later with users to refine the application. Our approach included the following methods:
Expert Testing
📝 Two Heuristic Evaluations, enabling experts to engage in discussions and reach consensus on usability issues.
User Testing
🗣️ 15 unmoderated think-aloud tests using Loop11 software, enabling us to capture insights from our target users through a comprehensive dataset.
One (out of many) iterations
📱 Are users easily learning what “label” means?
Based on user feedback, we made several iterations to improve the efficiency of inputting links into the link memo feature:
So what did we do?
Eliminating the toggle: Instead of using a toggle to attach a label to the link, we now provide the text "(Optional)" to indicate that users can choose to add a descriptive title or not.
Swapping the order: We reordered the form fields so that the label comes first, followed by the link. This aligns with convention and makes the label act as an overarching title for the link.
Changing the name: We renamed "label" to "display label" to clarify that the label will be visible to all guests, helping them understand the link's meaning before clicking on it.
Text outside of text field: To ensure compliance with accessibility standards, we moved the field names outside of the text fields. This was done because the text inside the fields did not meet color contrast requirements.
🎨 Brand and Visual Identity
Visual Motifs
Incorporating the visual motifs of film photography and magazines, we aimed to exude a nostalgic charm and curated aesthetic, reminiscent of a bygone era yet presented in a contemporary digital format.
Film Photography
We focused on captivating Gen Z audiences, striving to achieve the highly sought-after vintage film aesthetic, which is immensely popular.
Digital Zines
We wanted to convey the app as one that's fun and accessible, making users excited to start their new journey with Memento.
Design System
A design system allowed us to create consistent and professional app.
🧠 The Final Product
Memento: Why just reminisce about events when you can relive them, prolong those memories and anticipate future ones?
Your digital sanctuary, a place where your most cherished memories find a home in beautifully curated event-specific albums.
⭐️ Key Features
Join
Either invite or join a memo book and begin sharing your precious memories!
After recieving a text blast, hop into Memento and tap into your digital memory capsule.
Post
Post polls, song playlists, photos, videos and everything and anything for your friends to see.
Via the '+' button on your bottom right.
React
Keep yourself in the loop! React to peoples posts and share the love <3
Using our 'RealMoji' feature, use real time photos of yourself as a reaction emoji to peoples memos.
Relive
After your party, relive through a slideshow filled with all the stats and fun moments you can think of, generated with the help of AI.
Swipe through a collage of your curated moments.
🎥 The Promo Video
📌 Lessons Learnt
After investing significant time into researching, testing, and refining our designs, I've emerged with a project that I'm truly proud of. However, I did learn a few things in our pursuit for Memento:
💎 The double diamond
Looking back at our journey through the double diamond framework, we found it to be a great lesson learnt that sometimes, we don’t need to follow the rules so strictly.
As we immersed ourselves in sequential testing and iterative refinement, our methods became more intricate, presenting a greater challenge to navigate toward our final destination.
📂 File Chaos
We found ourselves getting lost in our component library, design system, and Figma files.
It wasn't until we realized the importance of design systems and organizing our files, prompting us to take action & significantly improving our workflow. We learned a valuable lesson: start implementing components and color styles early in our high-fidelity designs rather than waiting.
🔁 What's Next?
If Memento were to continue, I'd love to see:
In preparation for our endeavors, we prioritize securing Intellectual Property (IP) rights.
We plan comprehensive longitudinal user testing in real-world scenarios to refine our product.Anticipating challenges with a feature similar to 'RealMoji,' we'll explore collaboration with BeReal or ideate a suitable replacement.
🎐 You have reached the end of the case study! A sincere thank you for reading my ramblings.