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

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

TOOLS USED

Figma, Illustrator, 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. It is geared towards postsecondary students while they are on campus, utilizing geolocation services, user profiles, action requests and conversation prompts to make it easier to form new connections. Students can get to know other classmates through their profiles, request seating or study partners, and engage in conversations. 

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

BACKSTORY & UNDERSTANDING THE USER

I remember being anxious about making new friends back in my first year of postsecondary. With large lecture halls and new social groups, it was challenging to make connections that would last. Many postsecondary students share the same struggles, and so I wanted to develop an app that could easily connect students within their classes, but without the romantic or superficial expectations of many existing social apps. 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. 

INITIAL RESEARCH

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 created a system map and system requirements chart based on the MoSCow Method to list out necessary features and functions. After developing user personas and scenarios, we conducted user interviews with 5 different undergraduate students. 

Our goal with the interviews 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. The data we collected from our participants had a large impact on our design development, as their insights helped us to both validate and implement several new features and functions into the app.

PACT ANALYSIS, SYSTEM MAP & INTERVIEW QUESTIONS

USER PERSONAS

WIREFRAMING & PROTOTYPING

We started with creating wireframes and using them to map out user scenarios. After conducting visual research and looking at gestures, we designed visual comps. We finished by prototyping the interactions in Figma. 

USER TESTING

Moving into the third phase, 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. Observing and obtaining the opinions of our users helped us to better understand how they approached certain challenges, and how we could improve the overall user experience based on what issues they faced. 

PROPOSED CHANGES

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

VISUAL DESIGN

LOOKING FORWARD 

REFLECTION & KEY TAKEAWAYS

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 our individual 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 a smooth, 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 user feedback and add another element of excitement to the app gestures. 

OTHER WORK

© Tiffany Chau 2020