1_LandingImage_v2.jpg

Befriend

Empowering students to make new friends by simplifying the process of reaching out

PRODUCT DESIGN, UI/UX

The Problem

Postsecondary students have trouble reaching out to make new friends and meaningful connections. They encounter numerous problems every day, including trying to form connections in a large classroom setting or taking the initiative to make the first approach. Some feel anxious about how to move a conversation forward, and others struggle to find their own social groups that share the same interests and goals. 

ROLES

Project Lead, Research, UI/UX, 
Prototyping, Visual Design, User Testing, Motion Design

TOOLS USED

Figma, Illustrator, Camtasia, Premiere Pro, After Effects

TIMELINE

Jan — Mar 2020
(3 months)

TEAM

Selina Chung, 
Sharyl Man

DESIGN CHALLENGE

How might we simplify the process of reaching out for postsecondary students to empower them to make new friends?

The Solution

Befriend is a social app that aims to tackle one of the biggest challenges in making new friends—reaching out. Geared for use on-campus, students can get to know other classmates, request their next seating or study buddies, and easily engage in conversations. With Befriend, students form connections that are truly meaningful.

Promotional Video

The Befriend marketing video promotes the app to students and other stakeholders, enticing them to download it. It clearly captures Befriend's key features.  

Why Befriend over other social apps?

Through action requests, Befriend reduces student anxiety and simplifies the process of reaching out. Profiles are shown to you based on room size, making it easy for students to connect in class. With profiles that are focused on personality, students have greater opportunities to form meaningful connections. 

Key Features

Onboarding 

The Befriend onboarding process helps you setup your initial search preferences and start using the app with ease. This includes a friendly tutorial and preliminary room size selection, as Befriend uses geolocation services to scan for user profiles nearby. 

Student Profiles

Fill in your own student profile with current interests and basic information, as well as answer profile 
prompts to help spark conversation. Browse other student profiles through various search filters, such as educational institution or program and year of study. 

Action Requests 

When you're ready to connect with another classmate, you can send a request for them to sit with you, study together or start a conversation. Alternatively, you can comment on one of their profile prompts to spark conversation. Reach out and take action!

Conversation Prompts

Finding topics to start a conversation can be difficult. Befriend makes it easy by providing fill-in-the-blank icebreakers that are great for a first chat. 

THE DESIGN PROCESS

Framing The Problem

I remember being anxious about making new friends back in my first year of postsecondary. Many postsecondary students shared these same sentiments, and so I wanted to develop an app that could easily connect students within their classes. 
After successfully pitching this idea to my user-centered design class, I led and collaborated with two other designers to bring this app to life. 

Understanding The User

The first phase of this project consisted of a deep dive into user research. As a team, we started off with a PACT (People, Activities, Contexts, Technologies) analysis to understand how users will interact with our product. This useful framework is crucial for discovering potential issues that may arise and figuring out potential solutions.

PEOPLE 

The target users are postsecondary students, who are generally tech-savvy and familiar with social media systems.  The frequency of people using the app to make new friends as opposed to reconnecting with established connections needs to be considered. 

ACTIVITIES 

App activities include connecting students within their classrooms to either sit, study or converse with. 

CONTEXT

The app will be used primarily within classrooms, lecture halls, and labs. Distractions will likely occur as lectures may be in session while the app is in use.

TECHNOLOGIES

Geolocation services and good internet connection are required for the app to perform successfully. Chat features in the app allow for communication amongst users and different types of media files to be inputted.

Competitive Analysis

Our top market competitors include Bumble BFF (by Bumble) and Skout. Taking a look at both apps, I analyzed their key strengths and pain points.

Bumble BFF

STRENGTHS

Functional and easy to use, clean and playful visual design, profile prompts as conversation starters, profile filters available

 

PAIN POINTS

Quick swiping focuses on looks over personality, additional cost for important features

Skout

STRENGTHS

Functional and features load quickly

 

PAIN POINTS

Too many features, takes time to learn, intrusive ads everywhere

User Interviews

We then conducted user interviews with 5 undergrad students. Our goal was to get a better understanding of how students establish connections with others, and some of the frustrations they might experience when trying to make new friends.

Main Interview Questions

  • Can you tell us about a recent experience where you made a new friend? What facilitated that process or connection?

  • In your opinion, what are some of the challenges when getting to know new people?

  • Do you make the effort to connect with new people or wait for them to reach out to you?

  • Once you make a connection with someone, how do you maintain or follow up on it?

Key Insights

📌 Connections are commonly formed from common interests, mutual friends and online chatting.

📌 Challenges include making the first approach, feeling anxious about how to move a conversation forward, and lacking shared interests. 

📌 Features that students desire the most are detailed profiles that describe people’s interests and being able to send study buddy requests.

Priority Feature Requirements 

  • Profile prompts that encourage students to get to know each other

  • Action button for students to send out various requests

  • Distance filter that restricts how much of the room is scanned

  • Conversation starters as a chat function to help break the ice

  • Recommending friends to other friends to widen mutual circles

Information Architecture

With our app features defined, we created a system map to represent the hierarchical structure and how the user would navigate the main pages of the app.

User Personas

We created user personas to truly understand our target users, their frustrations and pain points, and how the Befriend app could fit into their lives.

Wireframing & Journey Mapping

We started with creating sketches, and then moved to wireframing in Figma. My role was to design the landing page and request queue screens. Afterwards, we mapped out user scenarios to see how users would complete various tasks. 

High-Fidelity Mockups

Designing at high-fidelity was an entirely iterative process which went through multiple revisions. For example, the red action button was moved to the middle because the closer proximity to the profile photo helps users understand what it's associated with. The room size filter options were originally single-stacked, but by switching to a larger overlay the user can scan and select the options much faster. 

User Testing

After prototyping the interactions, we conducted in-lab usability tests with 3 users of varying ages and backgrounds. As we read out scenarios, we encouraged our users to think aloud while they worked through the prototype. 

📌 User testing helped us understand how our users approached challenges, and how we could improve the experience based on the issues they faced. 

Proposed Changes

After analyzing our findings from the user testing sessions, these are some of the critical app revisions we proposed.   

Style Guide

The style guide outlines how the brand should be applied. Befriend’s identity mark comprises of a word mark set in Muli Bold together with an abstract symbol. The brand colour palette consists of orange for primary usage, blue or red for secondary usage, and black and white for text.  

Key Takeways

This project gave me the opportunity to collaborate in a team setting from start to finish. It taught me the importance of focusing on the bigger picture, making consistent progress together, and finding ways to best utilize each of our strengths. I also realized the value of conducting interviews and user testing, as it was extremely useful towards the development of our app features.

 

Overall, it was interesting getting the chance to explore and understand all kinds of student experiences within a social context. We worked hard as a team to craft an engaging user experience, and I personally really enjoyed the entire process!

Next Steps 

If I were to revisit this project, I would like to have explored whether AR features could be incorporated to scan the size of a room. In this way, users would not have to set a new room size every time they changed rooms, reducing the extra workload.

 

I would further work on developing certain details to be more intuitive, such as the room filter icon, toast notifications and conversation prompts. I would also incorporate micro-interactions, which would improve the feedback for users and allow for more dynamic app gestures.