Befriend

Simplifying the process of making new friends and helping postsecondary students reach out

PRODUCT DESIGN, UI/UX

The Problem

Making new friends during postsecondary studies can be challenging. Students 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

Research, Ideation, 
Visual Design, Prototyping, User Testing, Motion Graphics

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 making new friends for postsecondary students and encourage them to reach out?

The Solution

Befriend is a social application that aims to combat one of the biggest challenges in making new friends—reaching out. Geared specifically for on-campus use, students can get to know other classmates through their profiles, request seating or study partners, and easily engage in conversations. 

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.  

Fostering friendship in a healthy environment

Befriend is geared towards students of all diversities and backgrounds. With the option to accept or decline requests, students can openly choose who they feel comfortable with connecting. User profiles are focused on personality and interests rather than superficial factors or glamorous photos, working to form connections that are truly meaningful. 

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. 

User Profiles

Fill in your own user profile with current interests and basic information, as well as answer profile prompts to help spark conversation. Browse other user 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 with a PACT analysis to place our target users into context. We then conducted user interviews with 5 undergraduate 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. 

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 wireframes, and then used them to map out user scenarios. After conducting visual research to decide our creative direction, we were able to design at high-fidelity. We finished off by prototyping the interactions in Figma. 

User Testing

Moving into user testing, we conducted in-lab usability tests with 3 users of varying ages and backgrounds. While reading them each user scenario, we encouraged the users to think aloud as they worked their way 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. 

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 work on further developing certain details to be more intuitive, such as the room filter icon, toast notifications and conversation prompts. I also think it would be interesting to explore micro-interactions, which would improve the feedback for users and allow for more dynamic app gestures. 

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.