Finder Keeper: Connecting During a Pandemic

Learning how to better leverage technology to connect people remotely during a pandemic

Role: UX Team of 1, Researcher, Interviewer, Designer, Tester
Duration: 20 weeks
Key skills: Ideation, Interviews, User Stories, Sketching, Information Architecture, Workflows, Wireframing, Visual Design, Usability Testing

The Challenge

As we all know by now, March 11, 2020 changed the world as we know it when the World Health Organization declared COVID-19 a worldwide health pandemic. Almost over night our lives changed with stay-at-home orders put in place, mask mandates ordered and Social Distancing the newest tool of choice. Even before COVID though, we were already leading a much more nomadic life. A Robert Half study from 2019 found that 62% of respondents would relocate for a job.

Fast-forward to June of 2020 and a Pew Research study found that 22% of U.S. adults say they either changed their residence due to the pandemic or know someone who did.

I was drawn to solve this problem as I myself am part of it! I recently relocated from Los Angeles, CA to Seattle, WA in the midst of the pandemic, not knowing anyone at the final destination besides my husband. Making friends in your 30s is already hard without adding a pandemic into the mix and having to stay six feet away from anyone outside your household!

The Solution

Here is where all the magic starts! The user logs in and can spend some time liking or disliking images so that the A.I. matchmaker can get to know you better and make the best matches for you. You can also add or remove your profile tags through the search bar.

 After spending some time filling in your profile with tags, the A.I. will make some matches for you. In our example here, you, Mitch and Vanessa are all runners so you will do an A.R. run together since we have to stay social distanced right now.

 Lastly, users said they wanted a quick and easy way to keep in touch with friends and family so I made sure to add GIF keyboard functionality. Before sending you get to see a larger version of the GIF to ensure you don’t mistakingly send the wrong one!

Check Out the Prototype!

But wait... How did we get here?

The Prep

I started with competitive research of apps I thought would be similar to my product once released. I studied apps such as Bumble, Whatsapp, Facebook Messenger, Skype, Grindr, Apple Messages. These apps were helpful for a feel for what messaging is like in different apps and how they dealt with video chats, meeting new people and sending pictures, videos and GIFs. I also started to get more of a feel for the users for which I would be building the Finder Keeper app. I found many users on these apps mentioning having a hard time meeting people in a new city due to their friends getting married and/or moving away.

The Users

The users of the Finder Keeper app are adults in their late 20s and on. They are anyone who may have relocated recently, whether it be a new neighborhood, city, state or even around the world. The user base is not only limited to those who have relocated, however. They can also be people who's closest circle of friends or family have moved away. Users are everyone looking to build a great new group of friends but also everyone looking to stay in touch with family and current friends whom they might not be able to see as much as pre-2020.

The Plan

I crafted a screener questionnaire out of a Google Form. Participants were asked 7 questions. Of the seven responses I received I chose 5 people that I then interviewed over Zoom conference calls.

From my interviews I was able to create an affinity map to begin to decipher common threads between all the potential users I interviewed.

I then created an empathy map to gain a deeper insight of my potential users. I wanted to find out what they think, say, feel and do while using an app like mine. Then I could determine their pains and make sure I design for those so that their pains can turn into gains.

I then created my user persona, Dan Doe. I tried to always keep Dan in mind when designing the app. He had a prominent position on the wall in my office.

Key Insights

  • Users expressed worries about COVID-19, that it sidelined their desires to meet in person
  • Users craved new ways to connect remotely
  • Quality time didn't always include verbal communication and body movement and gestures were very important for getting to know someone
  • People made a lot of great friendships in unlikely circumstances, whether being thrown together at work or in school

How Might We

  • Make it easier to make connections without meeting in public?
  • Facilitate friendships between unlikely connections?
  • Create remote quality time spent together outside the home or on the move?
  • Recreate the feeling of having a loved one with you without them being there?

Ideation

The app would obviously have a chat feature but how was I going to solve the problem of people being stuck at home and social distancing?
My initial idea was that people could go to a park or coffee shop while social distancing and open the app. If there was someone else in the area also looking to meet people, they could then video chat from a distance. This however seemed too problematic and possibly unsafe.

My second idea was to use holograms to project people into homes because many users said how important body language was to get to know someone. I needed a way to bring this outside too for users on the move so I got the idea to use smart glasses and augmented reality. This way users could not only do activities inside the home, such as watch TV and have a drink but also take their remote connections outside, on a bike ride or run!

 After discussing ideas with my mentor and realizing for this project that I was not limited to current technology, I decided to run with the smart glasses, and who knows? They could be just a matter of years away! Google Glass did already have a brief moment in the sun.

At about the same time I attended an online Meetup lecture from Noreena Hertz about loneliness in the 21st century. Many users had mentioned troubles meeting people stemming from shyness and being unable to make the first move. There were also the issues of missing out on matches you might not pick for yourself and conversations fizzling out before any real connection gets created.

I thought of the idea to have an A.I. match maker in the Finder Keeper app. He will learn about the user from the user created profile in the Peeper tab and match people, start the conversation and keep the conversation going if it dies down too soon.

The Finder Keeper MVP

Initially the apps consisted of three main navigation tabs, the Finder, Keeper and Doer. The user can Find new friends in the first tab, Keep in touch with friends and family in the second tab, and Do activities in the third tab. There would also be a user profile with a 'Tinder-like' photo swiping activity to train the A.I. to get to know the user's personality.

In the Finder flow, the user logs in, goes to his Finder chat with which the A.I. matched him with other users matching his interests, sends them a text and starts an augmented run with the members of the chat.

In the Keeper flow, the user logs in, goes to the Keeper group chat with his family members and sends them a funny GIF.

The Peeper Tab

The profile tab turned into the Peeper tab, keeping with the tongue in cheek names of the other tabs Finder, Keeper and Doer and referencing the main action of 'peeping' at photos to add things you like to your profile.

The Finder Tab

The Finder tab consists of a list view of all your conversations the A.I. matched you with.

Inside the chat window, you have the function buttons for keeping a match, video chat, A.R. and settings in the top right.

Underneath I call this the quick stats. These are new people the user is talking to so they area provides some details about the person as a quick reminder rather than having to go back to look at their profile every time.

Lastly, under the chat window, the text bar has a button for sending photos and video on the left and a button on the right for GIFs and stickers.

The Keeper Tab

Over in the Keeper tab, the top bar no longer has the 'lock' icon because these users are already your 'Keeps' meaning they are your close friends or family.

There is also no quick stats area as the user knows these contacts well.

Under the GIF keyboard I wanted to make sure to show a larger version of the GIF so the user can make sure its the right one to send. I have had many times where I sent the wrong GIF when I could only see the tiny thumbnail before sending!

Guerrilla Testing with Marvel App

I used my sketches to create my first prototype in the Marvel app to do guerrilla testing. Through some tests in person on my phone and online over Zoom calls I discovered a few issues I could resolve before moving on to tackle the wireframes.

Post-Guerrilla Changes

Users were confused by the Finder and Keeper tabs and where they could find their new matches and also their family and friends. I changed the icon for the keeper tab from the original lock icon to an icon of two people holding hands

Secondly, some users had trouble finding where to send a GIF from. In the original sketches I was using a smiley face button and some users thought that meant an emoji keyboard. For the wireframes I switched the button to a circle with GIF inside it.

Visual Design

I wanted the Finder Keeper app to be fun, bubbly and popping with color, as I've heard most designers want for their first app. The Finder Keeper brand should be quirky, and retro futuristic, celebrating vintage camp but also a nod to the future since major parts of the app are artificial intelligence and augmented reality.

While writing my style guide, I chose to stick with most of the standards of iOS development, using the San Francisco Pro Text font family, provided by Apple, using a five column layout with 12 pixel margins and gutters and I created a set of boxy rounded icons with a signature dimple, based of a binocular icon I found on icons8.com.

After I designed the first four screens I performed an accessibility check to check for possible contrast issues. The grey text against the grey bubbles did not pass the WCAG standards so the backgrounds were lightened to achieve AAA level contrast. Initial discussions with my mentor and a few users brought to my attentions the problems with this “offensive” green yellow color. There was too much color and it was too harsh on the eyes so I was forced to go back to the drawing board and continue to work on finding the perfect palette.

After learning that beginning designers typically want to go overboard with too much color on their first project I pulled back and chose a palette of one color. I chose green because I landed on a retro jungle cruise theme with binoculars as the logo and also because green is the color of harmony and health. Green is relaxing and revitalizing, giving us a sense of safety and security. It also gives us hope, with promises of growth and prosperity.

Usability Testing

After completing my high fidelity mockups and stringing them together to create a prototype in the Invision app, I was able to get back out into the world and unleash the Finder Keeper app for some usability testing. The two tasks asked of the users represented the two red routes

  1. Send a text to your most recent Finder group chat and start an AR run with them
  2. Send a funny GIF to the group chat you have with your family

Users had some issues figuring out the difference between the Finder and Keeper tabs, so I added a quick tutorial to help explain the differences.

The original navigation of the AR run flow turned out to be confusing for users, as the flow transported them across high-level navigation boundaries. Even though they had started a run with a chat in the Finder Tab, they ended up finishing in the Doer tab.

I resolved this issue by adding a pop-over menu within the chat window to choose which activity and then start it. I changed the button inside of the run activity to ‘Stop’ instead of ‘Finish’ and added the ‘Finish’ on the completion screen because I noticed users where looking for a way to exit other than the back button leading back to the chat window.

After the second round of usability testing, some users still were having trouble with the concept of where to find a new match versus a friend or family. I decided to create more differentiation between the Finder and Keeper tabs by changing the background color of the Finder tab to mint. Users responded well to this change. I decided to change the Finder tab because I could envision a time where the user is not looking for new matches. The user would then stay in the three tabs to the right, which all remain uniformly white.

Outcomes & Results

In the end I got a lot of good feedback from my test users. They expressed that they could really see themselves using this app and had plenty of ideas for features I could add. They had a lot to say about where they wanted to see it go in the future. I did still however have some concerns from users about the fact that there are two different chat streams, the Finder and Keeper tabs. I attributed this mainly to the fact that there is no mental model for having two chats in one app. Users would normally meet someone in ‘Bumble’ for instance and eventually exchange phone numbers or say “Hey, let’s talk in Instagram, its easier over there!” I want to keep both of my user groups in the app because our main purpose is the A.R. activities and the A.I. matchmaking abilities. Users expressed that they liked the ability to keep them separate and were able to focus on closer friends without also getting bogged down in the new matches. This project was a great learning experience and I would love to come back to it in the future to flesh out some more details! I also look forward to collaborating on projects in the future!