Take a look at our 5 minute pitch here, then read ahead to learn about our process in further detail! Prototype walkthrough begins at 1:32.
Radia Lahlou
Product Designer
The Problem
Meaningful digital connection is hard to come by. Conventional social media often leads us to feel isolated and disconnected, due to comparison, para-social relationships, and lack of interaction with our physical environments. Particularly in a global pandemic, users have retreated to digital spaces, but still feel unfulfilled.
The solution
Memento is a social AR game that tethers the metaverse to physical space. Users are able to collect and leave mementos - audio, video, photo, or text messages, as well as virtual gifts - for others to find. Memento creates a better, more intentional world by bringing neighbors together, fostering connection, and encouraging interaction with our surrounding environments.
Context
This project was conducted as part of Avocademy's 2022 Designathon, during which my teammate and I had 1 week to create a product in response to the prompt: "How might we intentionally create a better world through the metaverse?"
Out of over 200 submissions, our team received 2nd place.
My Role:
Product Designer (Team of 2)
My responsibilities included working with my teammate to conduct user research, create sketches, low fidelity wireframes and a high fidelity prototype, in addition to presenting our 5 minute pitch to the judges and answering their questions.
I worked on this project in the evenings after my full time product design job, as a means of continuing to grow and learn as a designer.
Timeline: 1 week. | Tools: Figma, Figjam, Loom
01. Empathize
Key insights from our interviewees, as well as the unintended consequences that may accompany digital relationships
Research
Understanding our users
On the first day of the designathon, we conducted interviews with 5 people ages 20-30, and asked them what a better world would mean to them.
Additionally, we brainstormed unintended consequences of the metaverse and social media, to better understand our problem space.
One of the key problems we identified was the feeling of inauthenticity and loneliness derived from parasocial relationships.
What is a parasocial relationship?
Parasocial relationships are one-sided bonds people develop with public figures such as actors, musicians, influencers or politicians. The term was first coined in 1956 by Donald Horton and R Richard Wohl, who uncovered that “the crucial difference in experience obviously lies in the effective lack of reciprocity … The interaction, characteristically, is one-sided, non-dialectical and controlled by the performer.”
We decided that we wanted to tackle these problems by creating a metaverse platform that centers real human connection and interaction.
Ideation
Personas
On day two, using our interviews are a reference, we identified our target market as Millienials + Gen Z seeking community and connection. Additionally, our users are open to sharing their lives with others, and interested in the potentials of the metaverse.
Inspiration
As we discussed virtual spaces in which people are able to connect without hierarchy, we were reminded of the pre-metaverse internet worlds of our user's childhoods, such as Club Penguin, Gaia online, and Neopets. We drew inspiration from these worlds as we began to sketch.
At first, we wanted to focus on a world in which users were able to partake in acts of mutual aid, but soon realized that even sharing in small moments could bring light and connection into our user's lives.
We wanted to take an ambiguous problem and create a clear, simple, and delightful solution.
User Flows
To clarify the information architecture of our product, we chose to flush out 3 critical user paths (red routes) within the application . The 3 paths we selected were:
Onboard
Create a memento
Find a memento
By creating a tangible visualization of these three paths, we were better able to understand what screens would be needed as well as what actions and decisions users would need to take to complete the flows.
02. Design
A low fidelity wireframe showcasing what an voice memento would look like.
Wireframes
Low Fidelity
It was important for us to start in low fidelity so that we could quickly conceptualize our vision. and iterate on potential designs. My teammate took on the "find memento" flow, and I took on the "create memento" flow. We worked together to complete the onboarding flow once we determined the level of instruction we wanted to provide our users.
Style Guide
My partner then worked to create a style guide, setting both foundational color and text styles within Figma, while I worked on creating reusable components such as buttons, cards, and the mementos themselves.
Oxford dictionary defines memento as: "a thing that you keep or give to somebody to remind you or them of a person or place." We wanted our product, and the act of creating and collecting mementos, to remind our users of the real-life moments in each other's lives, to foster a sense of interconnectedness with each other and the world.
UI Design
High Fidelity Designs
In the process of creating our final UI, we wanted to push the full extent of our creative limits. We incorporated dozens of interactions newly available through recent Figma releases (yay spring animations!!) and challenged ourselves to make the user experience packed with delight.
Given our young target market, we went for a light and ethereal visual style, incorporating vibrant colors while still creating a clean and easy-to-understand interface based on the iOS Styleguide. It was vitally important for us to create an aesthetically pleasing interface that would inspire users to explore.
By allowing users to interact on a one-to-one basis with other users without pretense or posturing, they can create and share precious memories with one another. Although we did not create a userflow that included the profile tab, we envisioned users being able to customize their avatars, manage friends lists, and message one another on this page.
03. Iterate
Redesigned our Memento Preview screen in order to address community safety concerns.
User Testing
Due to time constraints, we only had the opportunity to test this product with two users. The main concerns included safety while using the app, a reporting function for harmful content, and a more detailed notification system for discovering mementos. These concerns relate to Neilson usability Heuristics 1 and 3, Visibility of System Status, and User Control and Freedom.
In our redesign, we updated the written copy for clarity and created links for users to report harmful content when they preview or open mentos. Due to the wide distance radius for mementos, it is safer and easier to explore outside using Memento than other mobile apps such as GeoCache and Pokemon Go. In a future release, we hope to flesh out a detailed notification system and create a userflow for "Adding and Messaging Friends Within the App.
04. Reflect
5
Interviews
65
Screens
2
Usability Tests
7
Days
What have I learned from this project?
I had a lot of fun working with my teammate to create "memento," and learned a lot along the way. Winning 2nd place was also pretty neat! Here are some key takeaways from this project:
Working under a tight deadline is not a reason for stress, but rather an opportunity to see what is possible.
Centering delight and connection in digital spaces is something I care deeply about, and showcasing simple yet large visions through prototyping is a very effective mode of communication. I would like to continue to improve my prototyping skills to design delightful solutions in different contexts.
Context is important. Because we only had 5 minutes to pitch our design, we focused on what we perceived to be the meat of our project - the prototype. As a result, we didn't get the opportunity to delve into our research, and expand on our user's pain points. If we were to do this again, we would make sure to spend more time discussing our user's motivations, challenges, and desires, to communicate the need for our product more effectively.