COLAB13 - Mobile First Web App

Haven

How might we build a safe network for members of the LGBTQ+ community to find friends?

Problem Context

Have you had trouble finding friends? Two members of our team, Ryan and Lien, are members of the LGBTQ+ community and Lien had problems with making friends in the community. We wanted to solve this problem for Lien, so we got the research started.

To validate if this is a concern for many other people like Lien, we asked the community to share whether they had difficulty making new friends. Through the survey, I learned that most people deeply care about making meaningful friendships in their community, yet as many as 50% of people had difficulty making new friends. 

After the survey, we knew it is a concern, but we were not sure what are the reasons, and why this issue hasn't yet been resolved since there are already so many social media platforms out there to connect people from different places.

Users Pain Points

To learn about why it's so hard for members of the LGBTQ+ community to make friends, Lien and I invited 8 people to have 1 on 1 in-depth conversations. Through these conversations, I learned about different obstacles the members of the LGBTQ+ face when trying to make new friends. 

88% of interviewees said the landscape of apps today is still more dating-oriented than friendship-oriented. 75% of interviewees felt the particular demographic in rural cities makes it challenging to find friends. 25% of interviewees said it takes a lot of work to find out whether a person can be a good friend because people do not share their personal experiences online. I learned that contrary to dating, friendship is built on trust, safety, and consistent maintenance.

Screenshot of synthesized data of common pain points during our surveys and interviews

How might we build a safe network for members of the LGBTQ+ community to find friends?

We hypothesize that:

In order to help people to find friends, there should be a space exactly just for making friends. 

In order to make meaningful connections, people need to feel safe to express themselves freely and share their interests and experiences with other people.

Exploration/Brainstorm

  • User identification (usernames and avatars)
  • Social media validation (users can share their social media handles)
  • Event organization (users can create activities and invite others to join)
  • Group chat (users can discuss the activity posted)
  • Profiles optimization (matching users with other users of similar interest)
  • Reputation tracking (users receive badges for their efforts)
  • Following friends (users can add each other as friends)
  • Moments journaling (users can build their profiles through daily questions)
  • Direct message (users can chat with each other privately)

Screenshot of rapid ideation 

Technical Implementation

Technical stack: 

Tech stack react JS, HTML, SCSS, nodes JS, express JS, JWT, bcrypt.

Why we picked the stack: reusability of code, played to our strengths, we built the moments, login, sign up view profiles, answer our moments—in the future we hope to implement messaging, chat, and social handle optimizations. We chose to use JWT, because we could place a user ID inside the token as a payload, and retrieve user-specific information later on, by using this ID in the payload in our SQL queries. 

Design:

  • Creating/editing a profile
  • Writing a moment

Wireframes

HiFi/Prototype

Learnings

Product Manager Learnings:

Lien Chang

I learned not to focus on solutions but on what problem are we trying to solve by building XYZ features.

I also learned to prioritize and descope as needed to achieve a true MVP.

Lastly, I learned that in order to run like a well-oiled machine, it is extremely important to communicate with all members of the team.

Designer Learnings:

Jingjing Wang

As a part of the a cross-functional team, I learned how to collaborate and work remotely with people at different places and time. When challenges arrive, I learned to be proactive about problems, and ask for help early. In the future, I would like to be better at planning and leading a team to host standups.

As a designer, I learned research skills and the power of data driven design decisions. I learned how to negotiate design choices and advocate for the users.

I am looking to practice more so I can work faster on the process of rapid prototyping.

Designer Learnings:

Jo Sturdivant

  1. Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
  2. Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
  3. Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.

Developer Learnings:

Ryan Vandeneeckhout

Looking back on the past few weeks, it can be summed up in one word—challenging. Within the brief time, I was within the co.lab program, I learned that open and honest communication is beyond necessary for a team to function well and have a product delivered.

It was also challenging to juggle schedules and time slots with everyone. I hope to work on my soft skills for the next challenge.

Developer Learnings:

Vanady Beard

&

As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.

Developer Learnings:

Stephen Asiedu

&

As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.

Developer Learnings:

Ait-Emir Akhmetov

&

During my work on this project, I realized that communication and collaboration are far more important than my standalone technical abilities.

I learned that it’s very important to be on the same page with my teammates and keep them updated on the project status in order to achieve success as a team.

Developer Learnings:

Maurquise Williams

&

  1. Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
  2. Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
  3. Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.

Developer Learnings:

Jeremiah Williams

&

All in all this experience was very awesome I learned that in coding with others being transparent is key

Developers Learnings:

Justin Farley

&

I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.

Full Team Learning