Obed Cundangan Design

HangOut App

HangOut aims to make it easier for queer men to find and connect with each other by providing event-based matching according to profile compatibility. This was my capstone project for the UX Bootcamp I completed in 2023.

View Prototype

OVERVIEW

Client

Brainstation

Role

UX/UI Designer

Team

1-Person team

Platform

Mobile iOS

Duration

10 weeks (2023)

The Story

This was my capstone project for Brainstation's UX Diploma Program. Having grown up as a gay man, I know how important it is to find community, but it's not easy. I've had several conversations with other queer men who share frustrations at the perceived shallowness of queer culture and have difficulties finding their place in the queer community.

Problem Space

For my project, I decided to explore the particular ways in which queer millennial men experience loneliness, disconnectedness, and isolation - potentially both from within the community as well as without.

Solution

HangOut is a mobile application aimed at helping queer men find spaces to connect with each other and develop meaningful relationships by matching users to compatible profiles based on events of mutual interest.

MY PROCESS

🔍

Research & Discovery

I did secondary research to explore the problem space and then conducted 4 user interviews to understand my target users.

✏️

Ideate & Design

Based on my research findings, I determined the functionality of a solution and developed a mid-fidelity prototype.

💎

Test & Refine

I did two rounds of user testing and iterated my designs based on user feedback before developing a final hi-fidelity prototype.

🔍

RESEARCH & DISCOVERY

Research Method 1: Literature Review

I conducted secondary research to better understand the landscape of loneliness among queer men and to get a sense of the kinds of pain points and struggles people were facing in this space.

Through reviewing literature, I found that:

as many gay and bisexual men report moderate to severe levels of depression and/or anxiety compared with men in general.

21%

of men who have sex with men report feeling recently unhappy or depressed compared to 12% among heterosexual men.

21%

of men who have sex with men report feeling recently unhappy or depressed compared to 12% among heterosexual men.

21%

of men who have sex with men report feeling recently unhappy or depressed compared to 12% among heterosexual men.

Potential causes:

1. Stigma Preoccupation

2. Internalized Homonegativity,

3. Sexual Orientation Concealment,

4. Social Anxiety,

5. Social Inhibition.

Potential causes:

1. Stigma Preoccupation

2. Internalized Homonegativity,

3. Sexual Orientation Concealment,

4. Social Anxiety,

5. Social Inhibition.

Conclusion: Queer men often feel othered and unaccepted by conventional society leading to feelings of loneliness and isolation.

Research Method 2: User Interviews

Research Method 2:
User Interviews

After validating the problem with data, I conducted 5 user interviews with a narrower target demographic, hoping to gain insights that would help me develop a more focused and impactful solution tailored to their specific needs and wants.

I chose to focus on queer millennial men, honestly because I wanted a solution for my own problems too, and I knew a lot of my friends shared the same frustrations.

I chose to focus on queer millennial men, honestly because I wanted a solution for my own problems too, and I knew a lot of my friends had shared the same frustrations.

I created a hypothesis based on my initial research and got some interesting results.

Hypothesis: I believe that queer millennial men in Canada have a strong desire to connect with other queer men and form community. I will know I am right when at least 75% of respondents express so.

45-minute interviews with self-identifying queer men age 25-35 in Toronto, Canada

50%

of respondents had a strong desire to connect with other queer men

100%

of respondents expressed difficulties connecting with other queer men.

Some Quotes:

“Well if I wanted to connect with another gay guy this instant, I would open up my phone and go on Grindr, Scruff or whatever, right, because that’s the go to. I think that might be the problem: the only outlet I have to connect with other queer men is an app that’s dedicated to hook ups.”
“If you don’t have a 6 pack, you might not be able to be part of certain friend groups.”
“I always felt like I didn’t really fit in anywhere, I guess, and I think that’s part of growing up as a queer person too, because you don’t fit in with what you see on TV and you don’t fit in with the expectations the world has for you, so you always feel a little bit lonely. But not all the time.”
“I don’t always want to talk about drag race, I don’t always want to talk about fashion, I don’t want to only talk about things I’m only allowed to talk about as a gay man”
“I've tried by being at a bar and just introducing myself and asking “what’s your name?” but that hasn’t quite worked.”
“Well if I wanted to connect with another gay guy this instant, I would open up my phone and go on Grindr, Scruff or whatever, right, because that’s the go to. I think that might be the problem: the only outlet I have to connect with other queer men is an app that’s dedicated to hook ups.”
“If you don’t have a 6 pack, you might not be able to be part of certain friend groups.”
“I always felt like I didn’t really fit in anywhere, I guess, and I think that’s part of growing up as a queer person too, because you don’t fit in with what you see on TV and you don’t fit in with the expectations the world has for you, so you always feel a little bit lonely. But not all the time.”
“I don’t always want to talk about drag race, I don’t always want to talk about fashion, I don’t want to only talk about things I’m only allowed to talk about as a gay man”
“I've tried by being at a bar and just introducing myself and asking “what’s your name?” but that hasn’t quite worked.”
“Well if I wanted to connect with another gay guy this instant, I would open up my phone and go on Grindr, Scruff or whatever, right, because that’s the go to. I think that might be the problem: the only outlet I have to connect with other queer men is an app that’s dedicated to hook ups.”
“If you don’t have a 6 pack, you might not be able to be part of certain friend groups.”
“I always felt like I didn’t really fit in anywhere, I guess, and I think that’s part of growing up as a queer person too, because you don’t fit in with what you see on TV and you don’t fit in with the expectations the world has for you, so you always feel a little bit lonely. But not all the time.”
“I don’t always want to talk about drag race, I don’t always want to talk about fashion, I don’t want to only talk about things I’m only allowed to talk about as a gay man”
“I've tried by being at a bar and just introducing myself and asking “what’s your name?” but that hasn’t quite worked.”
“Well if I wanted to connect with another gay guy this instant, I would open up my phone and go on Grindr, Scruff or whatever, right, because that’s the go to. I think that might be the problem: the only outlet I have to connect with other queer men is an app that’s dedicated to hook ups.”
“If you don’t have a 6 pack, you might not be able to be part of certain friend groups.”
“I always felt like I didn’t really fit in anywhere, I guess, and I think that’s part of growing up as a queer person too, because you don’t fit in with what you see on TV and you don’t fit in with the expectations the world has for you, so you always feel a little bit lonely. But not all the time.”
“I don’t always want to talk about drag race, I don’t always want to talk about fashion, I don’t want to only talk about things I’m only allowed to talk about as a gay man”
“I've tried by being at a bar and just introducing myself and asking “what’s your name?” but that hasn’t quite worked.”

Conclusion: While only 50% of respondents voiced a strong desire to connect with other queer men, all of them showed frustration and were visibly agitated when discussing their experiences trying to do so.

Research Synthesis

I used Affinity Mapping to organize my interview notes into motivations, behaviours, and pain points for each of the participants, which I then aggregated into 4 key themes and insights.

Theme 1: Shallow Party/Hook-Up Culture

Dominant queer culture often feels hypersexualized and shallow leading to feelings of inadequacy and isolation.

Theme 2; Tensions in the Queer Community

The queer community can unfortunately be toxic, divisive, and judgemental with a lot of in-fighting and conflict.

Theme 3: Queer Fears and Discomfort

Queer men have gone through specific traumas that make it difficult to be comfortably authentic.

Theme 4: Finding Your Tribe

It can be difficult for queer men to find people who share similar experiences, values, interests and hobbies.

I chose to focus on Theme 4: Finding Your Tribe as it spoke more to my interest in building connections. I also had to keep in mind the constraints of the project: it seemed more feasible to design a digital solution to foster connections than to resolve deep intra-community conflict or tackle deep systemic issues within the allotted time and scope.

Understanding My User

I created a Persona, Freddy Singh, to represent the target users. This would help guide my design decisions, keeping in mind Freddy's needs, goals, and pain points.

I also created an Experience Map to better understand Freddy's struggles finding new people to connect with and identify opportunities for intervention.

Main Pain Points

It’s difficult to find people to connect with who have similar interests, hobbies, experiences and/or values.

The Party scene and hook-up culture are too prominent with no easily visible alternatives.

No time to join a club or commit to an ongoing activity to make friends.

Opportunities for intervention

Make it easier for Freddy to find an alternative to the queer party scene.

Make it easier for him to start natural conversations.

Let him know more about people attending events he's interested in.

Help him find common ground with others.

Honing In

With a more comprehensive understanding of the target users and their needs, I developed a Problem Statement and How Might We Question to further guide design intervention.

Problem Statement

Many queer millennial men struggle with finding other queer men they can relate to and with whom they can develop meaningful connections and bonds. This often leads to feelings of frustration and isolation.

HMW Question

How might we make it easier for queer millennial men to meet other queer men who share similar interests, values, hobbies, and/or experiences in order to foster authentic, identity-affirming relationship and a sense of belonging?

✏️

IDEATE & DESIGN

Determining Functionality

Next, I developed 30 user stories based on the theme "Finding Your Tribe" broken down into 3 Epics. These user stories helped me to understand what users would want to accomplish, and make sure the features I design address real-world scenarios and tasks, resulting in a more intuitive and impactful user experience.

I chose to focus on Epic 3: Plan Outings, as one of Freddy's biggest goals is to find an alternative to the party scene, and there was a huge opportunity to remedy several pain points he had while searching for and attending events.

Also, based on my own experience and anecdotal evidence from my peers, I believe that the best way to form genuine connections with people is to spend time with them doing the things you love.

I created a Task Flow based on the following User Story:

As a friend-seeker, I want to invite compatible people to events of shared interest so that we can hang out together.

The Task Flow allowed me to map how users would interact with the product and determine what screens and features I'd need. As I developed the Task Flow, I kept in mind other user stories that could be accopmlished, including:

As an Event Goer I want to see trending events so that I can have a sense of what's popular and interesting around me. (Events Page)

As an Event Goer I want to filter types of events/activities so that they align more to my interests. (Filtered Events Page)

As an Event Goer I want to know how many people are attending/interested in an event so that I can see how potentially fun or busy it might be. (Event Details Page)

As a Newcomer I want to find fun and interesting things to do around the city so that I know what the city has to offer and get to know my new home. (Homepage/Events Page)

As an Friend Seeker I want to be matched with people who are interested in events/activities I'm interested in so that I know we have some common ground. (Match Page).

As a Young Professional I want to find low-commitment and low-maintentnace activities so that they're more feasible for my schedule. (Filtered Events Page)

Designing the Solution

Then I sketched the screens before creating mid-fidelity wireframes and a mid-fidelity prototype;

Homepage

Events

Event Details

Match

Homepage

Saturday - 9:00AM EST

Frontrunners Running

Saturday morning run at The Village!

Find more events near you!

Explore

All

Going

Interested

Past

Tap above to schedule a hangout.

No hangouts yet!

Saturday - 9:00AM EST

Come join Frontrunners every Thursday evening and Saturday morning for a run before head...

Saturday morning run at The Village!

Your next event

Your hangouts

Your calendar

Calendar

Calendar View

Calendar

Profile

Matches

Explore

Home

9:41

Hangout

Notif.

Chats

Events

Thursday - 8:00PM EST

Toronto Paint Society

Paint Night - Moon Reflections

24 Interested

Art Gallery Cafe

Thursday - 7:00PM EST

The Piston

Open Mic @ The Piston

30 Interested

The Piston

Thursday - 8:00PM EST

Toronto Paint Society

Paint Night - Moon Reflections

24 Interested

Art Gallery Cafe

Friday - 7:00PM EST

The Piston

Open Mic @ The Piston

30 Interested

The Piston

Trending

See All

When do you want to hang out?

Today

This Week

Next Week

Select Dates

This Weekend

Tomorrow

Arts and culture

See All

Filters

All Filters

Dates

Distance

💎

TEST & REFINE

Usability Testing

I did two rounds of usability testing with the mid-fidelity prototype with 11 users total (5 in round 1, 6 in round 2). I drafted a User Test Plan to guide the participants through 6 tasks, and organized my findings in Session Output Documents.

Testing Scenario: It’s Thursday night and you have the day off tomorrow and you think it’d be fun to go out, but you don’t really have any friends in the city yet. You go on the app to see if you can find something to do and someone to do it with.

Iterations and Improvement

After each round of testing, I plotted potential usability improvements onto Priority Matrixes, which guided my iterations. I’ve included some examples of iterations below.

Feedback: One participant failed the first task during testing as he kept trying to click the top calendar button to explore more events. Users also found it redundant that your scheduled events show up in two sections of the page

Action Taken: I changed the whole top section to make it less confusing and remove the redundancy of having upcoming events in two different sections of the screen This also encourages and makes it easier for users to quickly see and explore new events, which is a more important function of the app than seeing what you already have scheduled.

Feedback: The screen looked cluttered and the layering of components made it seem messy. The buttons on top were also confusing (is it indicating your status, or the match's status?). Not enough information about the person on first glance, and highlights seemed random.

Action Taken: I removed confusing/unneccessary buttons, changed some copy to make it more specific (compatibility highlights indicate things you have in common), and did some simple resizing the make the screen simpler, more readable and more user friendly. I also added a short bio for matches so users get a better sense of them at first glance.

Branding and Visual Identity

Before translating my refined wireframes to Hi-Fidelity, I needed to determine the mood and spirit I wanted to convey. Some words that came to mind were:

Inviting: A sense warmth, friendliness, and acceptance.

Authentic: Staying true to oneself and being embraced for it.

Community: A focus on finding your place as part of a greater whole.

Connection: Emphasis on a shared spark, on two souls meeing.

Adventure: The excitement of trying new things and embarking on new experiences

I decided to use a complementary colour palette based on orange as according to colour theory, orange:

is energetic and warm, bringing feelings of excitement
Combines red's power and yellow's friendliness, and may bring feelings of motivation, enthusiasm, and love for life
Can convey a spirit of creativity and adventure
is often considered more friendly and inviting than red

is energetic and warm, bringing feelings of excitement
Combines red's power and yellow's friendliness, and may bring feelings of motivation, enthusiasm, and love for life
Can convey a spirit of creativity and adventure
is often considered more friendly and inviting than red

I chose to call the app HangOut as this captured the casual and low-stakes vibe I wanted to convey, while also serving as a play on being "Out" and emphasizing spending time together in person. The casual and playful lnature of the app is reflected in the wordmark.

I chose to call the app HangOut as this captured the casual and low-stakes vibe I wanted to convey, while also serving as a play on being "Out" and emphasizing spending time together in person. The casual and playful nature of the app is reflected in the wordmark.

The Final Product

Homepage

Events

Filtered Events

Event Details

Loading Screen

Match

Invitation Modal

Confirmation Modal

Solution

Explore Events

Match with Attendees

Invite to HangOut

Invite to Hangout

Design Impact

Pain Points Addressed

Difficulty Finding Community

HangOut makes it easier for users to connect by providing starting off points for conversation (e.g. Compatibility Highlights) and providing events they're mutually interested. With this app, the experience of meeting other queer men won't be limited to traditionally queer spaces, where some might feel they don't fit in.

Emphasis on Shallow Hook-Up Culture

The app allows users to browse a variety of activities and events based on personal interests, meaning the party scene can be totally avoided if desired. This is not a hook-up app, so the emphasis is on making friends and building community, and not on dating or sex.

Lack of Time

You can find low-stakes and low-commitment events and activities on this app so there's no need to register for a class or a club to meet new people aligned with your interests. Simply match with someone already going to event you're interested in and plan to hang out!

Interventions

If we look back at the Experience Map, we can see that HangOut successfully mitigates the struggles Freddy experiences while trying to find new people to connect with. HangOut provides him with an alternative to the queer party scene where he can still meet queer men, and it also makes it easier for him to start conversations with them by allowing him to browse profiles, get to know other users, and find common ground. If he matches with anyone, he already has one confirmed mutual interest: the event/activity itself, which is a great starting off point for conversation.

Takeaways

Next Steps

Target User Testing

Due to the time constraints on the project, I didn’t have time to do usability testing with my target users (queer millennial men in Toronto). I would love to see how a sample of them would interact with the product, whether or not they’d use it at all, and how their feedback might change the solution.

Onboarding Flow

The crux of the app is matching compatible profiles, so I'd like to develop an effective onboarding process after researching what kind of information successful match-based apps gather from their users, and consulting with various experts to create a sophisticated algorithm.

Group HangOuts Feature

One of the other main task flows I'd like to prototype is, instead of selecting an event and finding a match through the event, the users would "start a hangout" by selecting the dates they're free, then get matched to compatible profiles available on those dates, and then the app would recommend events based on similar interests.

Refine UI

I’d like to redesign several of the visual components after gaining more experience. Specifically, I think the Event cards and buttons can be significantly improved and I'd also love to design my own custom icons. One of the biggest challenges I faced was using colour effectively. I wanted to convey the sense of a wistful summer night, but I didn't quite capture it; I'd love to experiment with the colour scheme and visuals to see if I can get closer to what I originally envisioned.

Success Measures

To measure HangOut's success, I would track typical user engagement metrics, such as number of downloads, active users, etc. along with paying attention to user reviews and gathering feedback through customer surveys. I would also like to be able to track how many matches actually end up meeting in person, so perhaps I'd design a toggle on profiles or a push notification asking to mark a successful HangOut

Key Learnings

It All Comes Back to the User

I developed a deep understanding of the Design Thinking process and the value of human-centric design. Keeping in mind the user's needs, goals, behaviours, and especially pain points at every stage provided a strong, data-driven rationale and narrative that allowed me to design a solution that was tailored to my target audience and helped them solve real world problems in a resonant way.

The Importance of Flexibility

I learned it's important the remember the process is iterative and non-linear. In all honesty, as soon as I identified the problem space, I immediately began ideating solutions, one of which was very similar to the final design. The value in the process came from the insights I gained from User Research and Testing, which allowed me to revisit the problem space, validate or pivot design decisions, and iteratively refine and redesign the product to maximize impact.

My Biggest Strengths

As a designer, I learned that my strengths lie in engaging with and understanding users; being able to distill and synthesize user information to create actionable insights that lead to impactful and innovative solutions. I loved seeing how User Research and Testing allowed me to revisit the problem space and iteratively refine the solution.

My Biggest Weaknesses

UI and Visual Design are my weakest points as a designer right now. I’m looking forward to learning more, practicing these skills and honing my craft. I look forward to digging deep into spacing, typography, and colour and bringing beautiful designs to life, and I know my skills will improve with experience.

More Projects

Mobile iOS | Web | UX/UI Design

2024

UX Training to rapidly improve my craft

Insert Your Design Here

Macbook Air

Web | UX/UI Design | WordPress

2023

Responsive website for an Awards Night event

Insert Your Design Here

Macbook Air

Web | UX/UI Design | WordPress

2023

Responsive website for an Awards Night event

Insert Your Design Here

Macbook Air

Web | UX/UI Design | WordPress

2023

Responsive website for an Awards Night event

2024 All rights researved

Thanks for dropping by!

2024 All rights researved

Thanks for dropping by!

2024 All rights researved

Thanks for dropping by!

HangOut App

OVERVIEW

The Story

Problem Space

For my project, I decided to explore the particular ways in which queer millennial men experience loneliness, disconnectedness, and isolation - potentially both from within the community as well as without.

For my project, I decided to explore the particular ways in which queer millennial men experience loneliness, disconnectedness, and isolation - potentially both from within the community as well as without.

Solution

HangOut is a mobile application aimed at helping queer men find spaces to connect with each other and develop meaningful relationships by matching users to compatible profiles based on events of mutual interest.

HangOut is a mobile application aimed at helping queer men find spaces to connect with each other and develop meaningful relationships by matching users to compatible profiles based on events of mutual interest.

MY PROCESS

🔍

Research & Discovery

Research & Discovery

✏️

Ideate & Design

Ideate & Design

💎

Test & Refine

Test & Refine

🔍

RESEARCH & DISCOVERY

Research Method 1: Literature Review

Conclusion: Queer men often feel othered and unaccepted by conventional society leading to feelings of loneliness and isolation.

Research Method 2: User Interviews

Research Method 2: User Interviews

Hypothesis: I believe that queer millennial men in Canada have a strong desire to connect with other queer men and form community. I will know I am right when at least 75% of respondents express so.

Hypothesis: I believe that queer millennial men in Canada have a strong desire to connect with other queer men and form community. I will know I am right when at least 75% of respondents express so.

Hypothesis: I believe that queer millennial men in Canada have a strong desire to connect with other queer men and form community. I will know I am right when at least 75% of respondents express so.

45-minute interviews with self-identifying queer men age 25-35 in Toronto, Canada

of respondents had a strong desire to connect with other queer men

of respondents expressed difficulties connecting with other queer men.

“Well if I wanted to connect with another gay guy this instant, I would open up my phone and go on Grindr, Scruff or whatever, right, because that’s the go to. I think that might be the problem: the only outlet I have to connect with other queer men is an app that’s dedicated to hook ups.”

“If you don’t have a 6 pack, you might not be able to be part of certain friend groups.”

“I don’t always want to talk about drag race, I don’t always want to talk about fashion, I don’t want to only talk about things I’m only allowed to talk about as a gay man”

“I've tried by being at a bar and just introducing myself and asking “what’s your name?” but that hasn’t quite worked.”

Conclusion: While only 50% of respondents voiced a strong desire to connect with other queer men, all of them showed frustration and were visibly agitated when discussing their experiences trying to do so.

Conclusion: While only 50% of respondents voiced a strong desire to connect with other queer men, all of them showed frustration and were visibly agitated when discussing their experiences trying to do so.

Conclusion: While only 50% of respondents voiced a strong desire to connect with other queer men, all of them showed frustration and were visibly agitated when discussing their experiences trying to do so.

Research Synthesis

It can be difficult for queer men to find people who share similar experiences, values, interests and hobbies.

Understanding My User

Main Pain Points

Opportunities for intervention

Honing In

How might we make it easier for queer millennial men to meet other queer men who share similar interests, values, hobbies, and/or experiences in order to foster authentic, identity-affirming relationship and a sense of belonging?

✏️

IDEATE & DESIGN

Determining Functionality

As a friend-seeker, I want to invite compatible people to events of shared interest so that we can hang out together.

Designing the Solution

💎

TEST & REFINE

Usability Testing

Usability Testing

Testing Scenario: It’s Thursday night and you have the day off tomorrow and you think it’d be fun to go out, but you don’t really have any friends in the city yet. You go on the app to see if you can find something to do and someone to do it with.

Testing Scenario: It’s Thursday night and you have the day off tomorrow and you think it’d be fun to go out, but you don’t really have any friends in the city yet. You go on the app to see if you can find something to do and someone to do it with.

Iterations and Improvement

Feedback: One participant failed the first task during testing as he kept trying to click the top calendar button to explore more events. Users also found it redundant that your scheduled events show up in two sections of the page

Feedback: One participant failed the first task during testing as he kept trying to click the top calendar button to explore more events. Users also found it redundant that your scheduled events show up in two sections of the page

Feedback: One participant failed the first task during testing as he kept trying to click the top calendar button to explore more events. Users also found it redundant that your scheduled events show up in two sections of the page

Feedback: The screen looked cluttered and the layering of components made it seem messy. The buttons on top were also confusing (is it indicating your status, or the match's status?). Not enough information about the person on first glance, and highlights seemed random.

Feedback: The screen looked cluttered and the layering of components made it seem messy. The buttons on top were also confusing (is it indicating your status, or the match's status?). Not enough information about the person on first glance, and highlights seemed random.

Feedback: The screen looked cluttered and the layering of components made it seem messy. The buttons on top were also confusing (is it indicating your status, or the match's status?). Not enough information about the person on first glance, and highlights seemed random.

Branding and Visual Identity

Inviting: A sense warmth, friendliness, and acceptance.

Inviting: A sense warmth, friendliness, and acceptance.

Inviting: A sense warmth, friendliness, and acceptance.

Authentic: Staying true to oneself and being embraced for it.

Authentic: Staying true to oneself and being embraced for it.

Authentic: Staying true to oneself and being embraced for it.

Community: A focus on finding your place as part of a greater whole.

Community: A focus on finding your place as part of a greater whole.

Community: A focus on finding your place as part of a greater whole.

Connection: Emphasis on a shared spark, on two souls meeing.

Connection: Emphasis on a shared spark, on two souls meeing.

Connection: Emphasis on a shared spark, on two souls meeing.

Adventure: The excitement of trying new things and embarking on new experiences

Adventure: The excitement of trying new things and embarking on new experiences

Adventure: The excitement of trying new things and embarking on new experiences

I decided to use a complementary colour palette based on orange as according to colour theory, orange:

Research Method 2:
User Interviews