Memory Lane

Memory Lane

Geocaching is no new concept.  Imagine if it could go beyond sharing random trinkets but some thing deeper such as memories or important experiences. This school group project is an app that nurtures a community of adventures who are interested in learning the stories of others in a more profound way than can be found on the typical fast-paced social media platform. I helped with building the app pages, prototyping, and image making working alongside classmates Mary Gutierrez and Brandon Huynh.
Skip To Prototype

Visual Language

We wanted the app to feel clean, friendly and add a touch of nostalgia to honor the brand name and the concept of the product. We decided to use a serif typeface for the logo paired with a simple location icon with a key inside that would act as a favicon. For the illustration, we stuck to keep the details as simple as possible and to give forms more dimension gradients with grain texture was added on top.
Typography
Logo
Illustration Style

Site Architecture

There are three key branches of navigation for the first time user: onboarding, map, and me. We wanted journeys to be the most accessible thing to encourage users to tap on a journey that interests them the most. To add further motivation, we wanted to add a gaming aspect to the app by giving players ranks as they increase their explorations found in the me section.
Project time stamp
April-May 2021
In collaboration with
Brandon Hyunh
Mary Gutierrez
Role
Co-Designer
Concept Developer
UXR Support

A world lost in instant gratification

At its core, social media has been a tool for people to share their stories and experiences. Today, that content is gifted in 30-second clips and enables doom scrolling, resulting in less time spent outdoors, with other people, and even with ourselves. During the pandemic, however, people began to realize the value of going outside and connecting with others. Seeing this as an opportunity to promote physical interaction, we decided to design a product that would build on familiar storytelling patterns in social media and older explorative games like geocaching to promote interaction with the physical world in more meaningful ways. 

Preliminary research

To better understand the sentiments of spending time outside, we interviewed 16 people regarding outdoor activity. From the responses, we synthesized that people go outside to refresh themselves, make memories, spend time with other people, explore new places, and destress. In short, people go outside to feel connected. And these sentiments were amplified by the pandemic.

Product brainstorming

We struggled to connect the dots—how could we encourage people to look away from their screens, explore, and share their experiences? One day, while venting to a friend, her mother chimed in, “Have you heard of geocaching?” I hadn’t. She explained how it worked: a scavenger hunt where people follow clues to a hidden object, signing a list or swapping an item upon discovery. The concept sparked something—geocaching made exploration exciting and rewarding. But objects alone wouldn’t fulfill our goal of fostering connection and lasting memories. So, instead of geocaching with objects, we reimagined it with memories.

How the app would work

1) Person A experiences something
2) Persona leaves a memory of it via a pin on the map.
3) Person B finds this memory.
4) Person B relates to and/or feels touched by the memory.
5) Person B feels inclined to continue the cycle and leave
    their own memory for someone else to find.

How we visualized the experience

We visualized the experience by using locks and keys. The keys are memories that users hide for others to find, and only when they travel to the location does the lock reveal, and people can unlock a memory. Playing with a word bank consisting of words such as voyage, nostalgia, time, record keeping, etc., we chose to call this app Memory Lane.

Storyboard of potential user journey

To help us plan the design for the app, we storyboarded and developed a site architecture before jumping into designing the low-fidelity screens (storyboard illustrations done by Brandon Hyunh).

Site architecture

There are three key branches of navigation for a first time user: onboarding, map, and me. We wanted journeys to be the most accessible thing for users so we have the map be the first thing that they get to see. To further motivate users to interact with the app we added a ranking system based on how many journey's you've completed.

Low fidelity prototype and user testing

We created low-fidelity screens and tested them with nine users. While they found the concept intriguing, our testing revealed key areas for improvement. Users felt that start journey before starting was a little confusing, clearer closure after finding a key, and a more satisfying lock-unlocking experience. We were also suggested to explored ways to incentivize exploration and keep users engaged by occasionally notifying them of new journeys nearby.

Keys are representing memories on the map.
We wanted to give people options to change the map view per prefrence.
This is where users felt that this button should be called something different because this isn't the actual starting point of the journey.
To users, this felt like a more appropriate place for the start journey button.
Following existing patterns of maps, we stuck with realtime progress on a highlighted route for users to follow.
Lock presents only when you have reached destination.
A sense of achievement motivates users to revisit so we designed unlocking to have celebratory feeling.
We received feedback that just a picture is underwhelming. It would be better to have space for people to write their stories.
Completing journey didn't feel celebratory enough.
Profile was easy to understand.

Brand language

As we implemented interview insights we also developed a visual language for the next app version. We wanted the app to feel clean, friendly, and add a touch of nostalgia. We decided to use a serif typeface for the logo paired with a simple location icon with a key inside. For the illustrations, we stuck to keeping the details as simple as possible and in order to give forms more dimension, gradients with grain texture was added on top.

Typography
Logo

Illustration Style

Video walk through

A preview for how someone would interact with Memory Lane.

Final screens

Here are some key screens with brief descriptions of changes and additions.

Added onboarding to make purpose and interactions of the app clear.
Added a preview button so people have a step of confirmation before facing details.
Giving more details like who posted and how many people have already been on. Yet, scaling back on the word count so the preview isn't too overwhelming.
Adding text so that it's clear that memory has been unlocked.
Made finish of journey more clear and celebratory.
We also added the ability to post comments to add another layer of social engagement.
Fleshed out the process of leaving memories/keys since that was missing in the lo-fi prototype.
The end of the creating  journey/leaving a key process.
To give more incentive to discover memories we incorporated a ranking system based on the amount of keys found.
You can also see the history of your explorations in case you wanted to revisit any journeys.

Flow Chart

There are three key branches of navigation for the first time user: onboarding, map, and me. We wanted journeys to be the most accessible thing to encourage users to tap on a journey that interests them the most. To add further motivation, we wanted to add a gaming aspect to the app by giving players ranks as they increase their explorations found in the me section.
Onboarding
This is the first interaction with the app for first time users. The screens in this sequence invites users to embark on a journey of traveling through other people's memories via the analogies of locks and keys.
Welcome page that introduces the analogy of sharing moments vial locks.
Second onboarding page further clarifies the purpose and importance of keys.
Encouraging users to share memories to add to the social aspect of the app.
Continue to introduce the mild gaming aspect the app has to offer.
Last onboarding screen serving as a call to action to start exploring.
Map and Key Selection
The map displays memories near the user that are ready to be journeyed. Users can pick any journey they want to and in order to complete the journey they must physically go to the location to unlock the memory. By physically traveling to the location users go on a physical adventure encouraging movement, discovery, and fun.
Users have the ability to search other areas, view their keys, view keys near them, and leave keys of their own.
A notification pops up whenever a new key is dropped.
Selected journey are highlighted in blue and are accompanied by a preview tab.
The journey preview serves as a trailer for the journey ahead.
Find and Unlock Key
After selecting a memory journey users can track their progress in real time. Once they have reached the vicinity of the key bubble, a lock will appear prompting to be unlocked.
Once a journey starts a route is highlighted.
Once a person has physically traveled to the journey does the lock appear with an option to be locked or unlocked.
If user chooses yes, a simple unlocking animation plays.
Unlocked memories have a visual aid of a photo or video along with a story left by the memory sharer.
Commenting and Viewing Activity
Memory trekkers are able to leave a comment encouraging them to reflect on and share their experience of the journey.
Commenting is encouraged for a sense of community to be built. Feeling seen motivates people to share.
We wanted to provide an option for anonymity to give comfort for more anxious users.
Comments can be posted once the text box is filled out.
Once a journey is complete an unlocked banner pops up to celebrate the completion.
This journey has gained one memory trekker and that will be visible to anyone who taps on the journey next.
Profile
The Me tab houses sections for keeping track of keys/memories you share, your rank, and how many keys you've found. We wanted to keep things like rank and how many keys found on the profile page because we wanted experiencing the journeys be the focus rather than chasing numbers and rank.
Welcome page that introduces the analogy of sharing moments vial locks.
Current Rank is written on rank button and next ranks are listed to set the next goal of exploration.
Past ranks are listed below to give a sense of progress and achievement.
Number of keys found is clearly stated on the button and more detail info is listed below in case they want to revisit.
Leaving a Key
Leaving a Key not only add more memory journeys to the map but also serves as a record of memories and experiences outside of the traditional scrapbook or social media grid for the key leaver.
Interaction of leaving a key starts with the button on the bottom.
A section will pop up prompting users to name the journey and write a preview for the memory.
All components must be filled in order to move on. Memories are allowed be posted anonymously.
Next a visual aid needs to be added. Memories can be stimulated in many ways so having a visual as well adds another layer to the story.
Filters for photos are available to give users another layer of expression.
After selecting a photo, a full memory needs to be written before dropping the key.
Completion of added memory is indicated with a rewarding sparkling blue dropped key.
Watch Us Walk Through The Prototype!

Takeaways

We had the opportunity to present our work to a UX team from Nvidia and our project was well-received. They raised a valid concern that although our concept was interesting and fun, people can misuse the intent of the application and pollute the map with meaningless or even malicious pins, so having some security measures would be an essential consideration. As a team, we agreed and as next steps we would include safety measures into our product. Furthermore, to make the journey more competitive and game-like, maybe adding some checkpoints along the way before reaching the final destination would be beneficial.

Project Take Aways

Working on this project was an learning opportunity of what it means to build a product as a team. It definitely made me understand the importance of communicating ideas clearly because even though the three of us were in the same program and classes, we approached things differently and had to constantly communicate to make sure we were on the same page. Each of us had our strengths and learned from one another during this project. I do think there are somethings we can take a step further such as adding more points to the journey rather than it feeling like a point a trek from point a to b or having more checks and balances in the background to make sure that people are putting out worthwhile stories instead of trolling people. Regardless of it's imperfections I am proud of this body of work and throughly enjoyed making this app with my team.