An app to help find and make friend by filtering mutual interests.

How through the use of Human Centered Design, I attempted to create a solution for those looking to find friends and build their social circle.


Project Details

Roles

Researcher, UX/UI Designer, Copywriter 

Timeline

10 weeks
Figma, Google, Unsplash, Otter.ai, pencil, paper, 

Tools

Constraints

Time

Problem Space

I have often noticed that new residents in Vancouver can often feel alone and isolated due to a lack of social networks or support, thus causing an uphill battle in adapting to their new surroundings. The 25 to 35 year old age group is hit hardest by this, as they are relocating most frequently for work or study.

On a personal level, I have experienced this too. It goes without saying, that not everyone experiences these issues, but enough people do that this city has a well established reputation. What follows is my attempt to find a doable solution, not just in Vancouver, but for anyone who struggles to connect with others.

Market Research

To begin understanding the problem I conducted secondary research, examining Vancouver’s population, how they have responded to surveys on the issue, as well as the broader effects of loneliness and social isolation. Some key findings were

of people say it’s difficult to make new friends in Vancouver

31%

25%

Vancouverites deal with social isolation

Approximately three out of ten expats surveyed, surveyed say Vancouverites are “unfriendly”

29%

18%

of cases of depression can be directly attributed to loneliness.

People with weak social connections have as much as a 50% greater risk of early death. (equal to 15 cigarettes daily)

50%

39%

of expats surveyed are unsatisfied with their social life in Vancouver.

Assumptions

Based on this research, I believe that..

  • It’s difficult for new people in Vancouver to make deep connections.

  • As there’s already a variety of existing digital solutions, which will make breaking into the market an uphill challenge.

  • Some people socialize within existing spheres, such as coworkers or classmates

  • people have a negative impression of Vancouverites due to this perceived coldness

Hypothesis Statement

I believe that if there can be a digital solution to help adults aged 25-35 reach out of their personal shells, then individuals can feel empowered to meet new people in the city and build new social circles to improve and maintain a high quality of mental well being.

Interviews

Based off my research findings, I created a script for interviews for primary research. Three interviews were conducted, all in person.

Criteria:

  • Participants were selected based on the following

  • They were in the age range of 25-35

  • They were living in Vancouver for no more than five years

  • They moved to Vancouver as adults.

Ages 25-35 has the highest demographic of people relocating to Vancouver, and are the highest hit demographic in the problem space. In terms of time in the area, I wanted people who’s experience was at most 5 years so their experiences would be fresher to mind. They needed to move here as adults.

View Transcripts

Key Insights

After sorting interview findings into pain points, goals and motivations, they were further categorized by themes of Culture, Interaction, and Personality via an affinity map. I then created insight statements based on those themes.

Culture:

The cultural barrier for people new to Vancouver creates a divide and furthers alienation. This increased form of alienation is strengthened when the individual has to deal with a language barrier as well.  

Interaction:

The depth of social interactions can often feel shallow. It is not that the people here are mean or inherently ill-willed. However individuals often find a lack of depth when meeting people in Vancouver.

Personality:

Isolation is stronger in those who self identify as being introverted. Insecurities can also be heightened when they are unsure of themselves or how to reach out to strangers within social boundaries.

This insight was chosen as it dictates how the individual interacts with others as well as the methods they use to out out to others. After honing in, it would influence the creation of the “How Might We

Personality:

HOW MIGHT WE

empower adults foreign to Vancouver, aged 25-35 who have moved to the city within the last year to grow their social circle so that they will feel more comfortable integrating into the city and improve their quality of life?

Persona

I tend to think of personas as something like an RPG character to navigate the digital landscape. Allow me to introduce Richard.

Some key points of intervention found were

  • Stop the tedium of swiping

  • Allow for greater refinement of interests so users can hone in on commonality

  • Give users the opportunity to have a broader range of interactions when trying to meet someone digitally

User Stories

After exploring the opportunities for solutions, it was time to create a set of user stories. After sorting them according to epics of “Discoverability”, “Connection”, and “ Interactivity”, I then chose the specific epic of “discoverability was chosen as it had the best correlation to how a person would achieve their goal of finding a friend. I then crafted ten refined user stories based off of that chosen epic.

Task Flow

The chosen tasks were to find matches based on common interests and to find local events catered to selected interests. This would give a person a number of different ways to meet people who already have a level of commonality with them.

View Task Flow

Sketches

A variety of different sketches were created to better visualize the task flow. The person would first be taken to a “category” page. After selecting one such as “Sports”, they could then find others who made similar selections and then reach out.

Final Sketches

The best parts of each sketch were compiled into a final set of sketches. This would be the guide for the low-fi wire frames.

User Testing

Two rounds of testing were conducted to test the flow, design, and overall concept of the prototype. These were conducted with five testers per session.

Prototype v.1

Round 1

The first round of tests ultimately marked the first prototype as a failure. The results were fairly mixed in terms of navigability and the flow of the prototype. 

The “Home” and “Hub” screens were fairly misleading, in terms of function and label. 

The full test guide for the first set of user tests can be found here.

View Here

Revisions

The most notable changes were

  • The “hub screen was changed to “home” and became the starting point of the task flow

  • “Home” screen was changed to a more general “suggestions” page

  • The flow to seek local events was created

  • Screens were redesigned and given more contrast between elements.

Prototype v.2

Round 2

Navigation and flow were greatly improved. Testers had no issues finding there way through the tasks.

The full test guide for the second set of user tests can be found here.

View Here

Prototype v.3

As the issues with navigation were smoothed out in the second iteration, the third focused more on design, making the main CTA stand out more on the homepage while attempting to improve the overall visual hierarchy.

Branding

Naming and wordmarks

For names, I wanted to find something direct and to the point that would tell a person what the app does in a minimal amount of syllables. After coming up with a variety of names, I went with “Common Ground”. I then began experimenting with different ideas via sketching.

However, I realized that “Common Ground” was too long and sounded more like a coffee shop than a friend finder. I then made a slight pivot to my number two choice, “Buddy Up”. A new set of sketches was created.

Typeface

I decided on Bauhaus93 for its unique curves and it’s inviting demeanour. Unfortunately, due to time constraints, I was unable to further explore ways to make it more personalized before the deadline.

Moodboard

I utilized a mood board to better understand the vibe of the app and develop a color palette. I knew that I wanted green, as it represented growth and spring, helpful for fostering friendships. I wanted a calming blue to counter the stress of that some have when meeting new people.

Final Wordmark

I would change the name of the app for the third time to the more approachable “Be You”. As it was the same initials, the icon and color palette could remain the same.

Typography

For typography, a switch was made from Roboto, the android standard, to Matter. I felt it was more unique and offered a level of design agnosticism for the product, which would give a level of accessibility regardless of device.

Refined Palette

Based off the colors found on the mood board, the color palette was expanded. I went against the grain and chose cool colors. Green represents the growth of a new friendship, ala Spring. Blue was meant to bring calm for those who a stressed by the idea of meeting people.

Accessibility

Colors were ensured to meet WKAG standards for AA and AAA for regular sized text, as well as AA minimum for large text.

High Fidelity Prototype

In the high fidelity prototype, the task flow has been further simplified and reduces the amount of screens necessary to make a connection.

A new sequence has been added to the task flow as well. A person now needs to be added by another user before messaging. This is to add a needed layer of consent in the interaction.

View Prototype

Alternate Devices

Considerations were made for how Be You would look and function on alternate platforms, in this case Desktop.

Marketing Website

In support of the app, responsive websites were made for both desktop and mobile interfaces. It was a unique opportunity to step away from the app while still finding a way to sell it from an outsider’s persp

View Desktop
View Mobile

To Conclude

Ultimately, a product such as “Be You” probably would not make a dent compared to the current socializing/meetup style apps such as Bumble or Tinder or the social media giants like Facebook. However, where it succeeds is that it humanizes the person using the app in a way that current products move farther and farther away from. In this, I am immensely proud of the work I put in to my first case study.

Key Learnings

  1. Set up your design styles, BEFORE you start designing.

  2. Do not rush any part of the process. The product will suffer for it and it will take longer to accomplish your goals.

  3. Seek feedback early and often, do not be afraid of the critique.

  4. Power through burnout. Find a way.

  5. Do not use Squarespace ever again.

Next Steps

  1. Continue improving the UI and hierarchy

  2. Continue to build and improve the concept for usability and repeated use.

  3. Continue to iterate the product, always keeping people in mind.

  4. Continue to learn and build skills in UX and UI. Always be learning.

Return Home