Friendle

In my Design of Networked Media course at Georgia Tech, I designed and created a clickable, high-fidelity prototype for Friendle, an application that helps reforge and expand the user's existing friend network. The project took place from October 2017 to December 2017, and was completed in conjunction with my other course projects. From this project, I improved my user research, ideation, wireframing and prototyping skills. 

 

Opportunity

 

The idea for this project stems from an issue that I have been interested in prior to this class, which is the idea of forming genuine friendships. Often times, modern social media is a mirage used to cover up a person’s actual life. People want to show themselves in the best light, and so they add as many friends as they can and post as much content as possible to show how “happy” they are. The question here is whether or not this persona they create online is an accurate representation of their true self? 

 

The motivation behind Friendle is more so to serve as a tool for discovering and preserving friends, but the actual friendship-building process would happen in person and/or over voice communications. Friendle’s purpose is to suggest potential friends to a user, and suggest places for them to hang out at. Some additional functionalities for Friendle are to serve as the user’s personal reminder to regularly hang out with their friends, and keep track of hangouts the user has planned already. A user’s friends list on Friendle is for the user’s own convenience rather than being a trophy to show off to the world how many friends the user has. I wanted to take the competitiveness of modern social media out of the picture so the user can focus on finding people who can be their friend. 

 

User Research

I first started the project by looking into the potential user base and finding their pain-points. I did market research to see what existing solutions exist that tackle this problem, and came across applications like Tinder and Ketchuppp. Romance aspect aside, Tinder allows its users to find others who share similar interests and who they would want to connect with and get to know more. Tinder, however, introduces barriers of entry such as a ranking system, unknown algorithms that limits who gets displayed on the user's screen, possible compromising of safety, etc. All these digital outlets also introduce a lack of authenticity when connecting with someone. 

As for real life discovery friend networks, it’s all a matter of who you know – or who you don’t know. In the real world, one can only meet others through a mutual friend’s introduction, or by going to community social events. And for those who are more introverted, willingly going to these social events by yourself is out of the question. Therefore, it is often quite difficult to discover new friends in real life outside of your own friend circle. 

After some user interviews with peers at Georgia Tech, I created a list of user assumptions that would help me greatly during my design process. 

 

Ideation

I first started my design process by planning out the flow of the tool that I wanted to make, and specifying all the things it should accomplish. This step allowed me to think deeply about the functionality that Friendle would have. The biggest takeaway from this exercise was the concept of finding friends within one’s existing networks versus finding entirely different friends. This prompted me to think about how I would handle users who have no friends at all. The solution I ended up with was allowing users to not specify friends at the beginning of the registration process, and the app would then suggest people from the user’s community based on the user’s interests.

 

 

One question that has been asked of me throughout the project is where I am getting these “friends” from. The short answer is that the user will build this friend network on their own, and this will be stored in the app in the form of the user’s “friend list.” The long answer is that at the beginning of the registration process, the user will have the option of importing friends from their existing social media such as Facebook. The user’s friends list for Frindle will initially be empty, and the user can populate it with friends who currently use the app and are connected to Facebook, or by the contacts on their mobile device of their choosing. Alternatively, the user can choose not to specify any friends. Once the user dives into the application and starts discovering friends, the app will act differently depending on whether or not the user has friends in their friends list. If the user has friends in their friends list, the app will first suggest mutual acquaintances to the user based on mutual interest. The mutual friend between these two people will not be revealed as to not cause any tension, but the user and the mutual acquaintance will know that the other person is accountable. This allows for a greater sense of safety and assurance. If the user does not have any friends in their friends list and/or if the system has no more mutual acquaintances to suggest, it then pulls from its overall userbase and suggests people in the user’s community with mutual interests. Once the user finds a match, the user is first prompted to set up a hangout with the other person to see if they would like to pursue this friendship. If the hangout works out well, the user will have the option of adding the person to their friends list for future reference.

 

 

Once the user has a populated friends list, they are able to create additional hangouts with their friends in order to keep building their friendships. 

Wireframe Sketches
Wireframe Sketches

Wireframe Sketches Cont.
Wireframe Sketches Cont.

Low-Fidelity Wireframes
Low-Fidelity Wireframes

Wireframe Sketches
Wireframe Sketches

1/3
 

Wireframing

After I created the flow for this application, I then proceeded to create some low-fidelity sketches. These sketches were then subject to some peer evaluation and feedback, and went through multiple iterations to perfect the user experience and figure out all of the application’s details.

Once I settled on the experience of the application, I then went into Adobe Illustrator to create some low-fidelity wireframes. This would be the beginnings of the high-fidelity, clickable prototype that I presented as my final deliverable. I was able to figure out the general layout of elements during this stage for Friendle, and I was able to further develop all of the functionalities that Friendle would have. These wireframes were then subject to additional feedback, which lead me to my final prototype version.

 
Login Screen
Login Screen

The user has the option of creating an account either through Facebook or natively through the app.

Onboarding Intro Screen
Onboarding Intro Screen

“Connect with Friends” is for users who have friendships they wish to build. It is an easy way to find friends who currently use Friendle and/or invite friends who do not use Friendle. “I want a fresh start” is for users who do not wish to connect with any friends using Friendle and/or do not want to invite their friends to use it. It is also for those who, for example, have recently moved to a new town, do not feel confident that they have friends, or want to find a new set of friends entirely.

Facebook Access Screen
Facebook Access Screen

This screen asks the user for their permission for the application to access their Facebook friends list. The application works off the assumption that the user has connected with their friends via Facebook since it is such a large networking platform.

Mobile Device Access Screen
Mobile Device Access Screen

This screen asks the user for permission for the application to access their mobile device’s contacts list. The application works off the assumption that if the user doesn’t have friends added on Facebook, that they will have their friends’ phone numbers. This information will help Friendle’s backend identify the user’s friends who are currently on Friendle. The user will have the option of linking their phone number to the app during registration so others can locate the user via their phone #.

Friend Selection Screen
Friend Selection Screen

At this point, the application now has a solid reservoir of friends from the user. The user can search for friends to populate their Friendle friends list by searching for their friends’: - Name (will match based on Facebook & phone number first) - Friendle Username

Friend Selection Screen Cont.
Friend Selection Screen Cont.

This screen shows that the user has found some friends that they want to connect with. The user will be able to find additional friends later on in the application. To reiterate, this friend’s list is populated by people from the user’s Facebook, mobile device contacts list and/or Friendle’s native database of users.

Hobbies Selection Screen
Hobbies Selection Screen

Here, the user is able to select hobbies to help the system identify potential friend matches and suggest activities for the user and their match to do. The search bar will have autofill suggestions to aid the user.

Hobbies Selection Screen Cont.
Hobbies Selection Screen Cont.

The user has now chosen some hobbies. These can be revised and added to later on in the application. The circles next to the text will have an activity icon, and the user can press the “x” button to delete the hobby.

Onboarding Completion Screen
Onboarding Completion Screen

The user has now finished the onboarding process, and is now able to explore Friendle.

Home Screen
Home Screen

For the sake of time, I have only prototyped the main interaction of the application: the friend-discovery and the friendship-building aspects. These interactions are via the “Discover Friends” and “Plan a Hangout” tabs, respectively.

Discover Friends Screen
Discover Friends Screen

Here, the user can discover friends. Mutual acquaintances with similar interests are suggested to the user first, and can be identified by the icon to the right of the person’s name. Once the system runs out of mutual acquaintances, it will then default to suggesting other Friendle users with similar interests based on proximity to the user. The user can specify whether or not they want the system to suggest mutual acquaintances in the settings.

Plan a Hangout Screen
Plan a Hangout Screen

Here, the user can create a hangout with their current friends in order to build their friendship. The system will have quick link suggestions as to who the user should hang out with. The user can also click the “+ Create a Hangout” button to pick a friend and get started.

Choose a Friend Screen
Choose a Friend Screen

Here, the user can choose the friend they want to hang out with. For now, I have only prototyped the process of making a 1-on-1 hangout. If I were to work on this project in the future, the user will be able to plan group hangouts as well.

Choose a Friend Screen Cont.
Choose a Friend Screen Cont.

This screen shows what happens when the user selects a friend. They are able to see a quick reminder of their friend and the friend’s hobbies. This will help remind the user what their friend’s hobbies are and if the user wants to hang with them.

Pick an Activity Screen
Pick an Activity Screen

This screen allows the user to pick an activity. The system will lean towards suggesting real-life options, but users are still able to search for online activities such as “Playing League of Legends.”

Pick an Activity Screen Cont.
Pick an Activity Screen Cont.

Once the user picks an activity, Friendle will help find additional details as necessary to facilitate the planning of the hangout.

Hangout Details Screen
Hangout Details Screen

Here, the user is able to specify additional details for the hangout such as the date, time, location, description, etc. depending on the chosen activity.

Hangout Confirmation Screen
Hangout Confirmation Screen

Once the user solidifies all of the details necessary for the hangout, it is sent to the other party. The other party can then choose to confirm or deny the hangout request. If the request is accepted, the event will be added to each party’s calendars and they will receive reminder notifications. Going on hangouts helps level up the user’s account. Gamification encourages proactivity in the user to regularly go on hangouts and build their friendships.

Solution

For my high-fidelity clickable prototype, I used Microsoft Powerpoint to create the interactions for the sake of ease and finance. Please feel free to view further detail for the high-fidelity wireframes by clicking on any of the images above.