📄Pride Family Case Study

About Pride Family

Pride Family is a non-profit focused on serving disowned LGBTQIA+ community members. Their core mission is to connect LGBTQIA+ community members with safe, compassionate chosen families, with the hope of reducing the risks of isolation and harmful behaviors by providing the long-term support they deserve to live their true lives.

Project Objective

LGBTIA+ individuals who face family rejection and disownment are left isolated and without essential care, making them much more likely to engage in harmful and risky behaviors. To tackle this problem, we designed and developed a web application that matches LGBTQIA+ users with chosen families based on proximity and shared interests and provides a safe messaging environment for them to directly communicate and build a connection with.

Project Demo Video 🎥

Link to Finished Project/Figma Prototype 🚀

Pride Family Website👩‍💻

Process

Project Scoping Phase

Over the course of five weeks, our team worked closely with the Pride Family founders to fully understand the platform’s goals and user needs. We conducted technical and design research to determine the best tools and systems to use during development. This phase culminated in a comprehensive Product Requirements Document (PRD) and a detailed Project Plan outlining the platform’s four core functional requirements and corresponding acceptance criteria.

Connecting with the client

• Sign-up/Login: To offer a secure way for LGBTQIA+ members &  potential chosen families to access the platform
  ‍
• Automated Matching System & Family Directory: To give LGBTQIA+ members a way to find a potential chosen family based on location and common preferences.
  ‍
• Messaging Service: To give LGBTQIA+ members a way to directly reach out to and connect with a potential chosen family.
  ‍
• Reporting/Admin Service: To give LGBTQIA+ members and families a way to report anyone on the platform to Pride Family administrators in the event that someone makes them feel unsafe.

After reviewing Pride Family’s existing designs, our team planned our project’s implementation phase around our team structure to support two key processes: design and development. Our main goals:

1. Design: Test and reiterate on Pride Family’s existing designs to perfect and finalize the key user flows for our service based on real user feedback.
   ‍
2. Development: Fully develop the website so each of the core features are functional and easy to use, giving Pride Family a foundational website that they could launch and build upon.

After reviewing Pride Family’s existing designs, our team planned our project’s implementation phase around our team structure to support two key processes: design and development. Our main goals:

Project Implementation Phase

Over the course of nine weeks, our team followed an agile sprint methodology to implement and refine the platform’s four core features. We completed four biweekly development sprints followed by a shorter testing sprint focused on final quality assurance and polish. Regular stand-ups and weekly progress check-ins with the client ensured alignment across all stakeholders and allowed us to quickly resolve blockers or scope changes.

Website Components and User Flows

We designed the website around three core user experiences to create an accessible, safe, and easy to use platform.

• LGBTQ+ Members: The user flow guides LGBTQ+ individuals through a welcoming onboarding process, profile creation setup, and access to a directory of chosen families. Members can browse profiles, view system generated recommendations, filter by identity, and securely message those who resonate with their needs.
  ‍
• Chosen Family Members: Chosen families have their own streamlined onboarding and profile management experience. They can easily display their information and engage with LGBTQ+ users through a secure, moderated messaging system.
  ‍
• Admin: The admin experience includes visibility into platform activity through a private dashboard that supports user management and community safety oversight. Designed with low maintenance in mind, admins can monitor user metrics and reported messages in just a few clicks.

Design 🎨

Starting the Design Process

We began with a few of low-fidelity designs provided by an earlier Develop for Good batch, covering the core flows: profile creation, chosen family matching, and messaging. These gave us a helpful starting point and ensured we were aligned with Pride Family’s original vision. From there, we focused on improving the designs beginning with a UX audit to identify pain points and opportunities to make the experience easier and more engaging for users. We also collaborated closely with engineers to ensure the updated designs could be implemented smoothly and would work well within technical constraints.

We pulled UI inspiration from warm, community-focused apps (e.g. social support platforms) to inform our visual language.We designed the website around three core user experiences to create an accessible, safe, and easy to use platform.
‍

Testing our Designs

Round 1: Asynchronous Usability Testing via UserTesting.com
‍
We conducted our first round of testing by uploading interactive Figma prototypes to UserTesting.com and recruiting 10 LGBTQ+ participants to explore the platform asynchronously. Our main goals for this round were to:

• Gauge the clarity of the onboarding and signup flows
  ‍
• Understand user preferences for matching with chosen families and the types of relationships they’re seeking
  ‍
• Identify any points of confusion in the current user interface

Based on usability testing, we gathered the following key results and insights:
‍

• Onboarding & Signup: Users found onboarding clear and intuitive, and felt comfortable sharing personal identity information.
  ‍
• Preferences for Matching: While the matching flow was understood, users wanted richer chosen family profile descriptions.
  ‍
• Usability Pain Points: Some confusion following how to navigate between each feature.

Round 2: Live Sessions with Pride Family Users

‍After refining primary issues, we ran three 1-on-1 moderated sessions with both Pride Family community members. Our goals were to:

• Gather feedback on the end-to-end matching experience
  ‍
• Evaluate the usability of the messaging flow
  ‍
• Review overall navigation and clarity of key interactions

From these sessions, we observed the following key insights:
‍

• Matching Flow: Participants generally found the order intuitive but suggested incorporating additional details to the chosen family profile cards that could aid selection.
  ‍
• Messaging: Participants requested more control over message threads, including the ability to delete, archive, or report conversations directly from the inbox.
  ‍
• Navigation & Labels: Users were occasionally unsure how to return to previous pages or interpret certain icons.

Finalizing Our Designs

Based on insights from both rounds of usability testing, we made targeted refinements to elevate clarity, trust, and ease of use across both primary user flows.

LGBTQ+ Member Flow: We improved profile cards by adding key context like location, hobbies, and clearer role descriptions. This made it easier for LGBTQ+ users to quickly assess compatibility and feel confident in their choices. To enhance discovery, we introduced a redesigned Find Your Family Directory. At the top, users now see “Your Top Recommended Matches” based on our backend matching algorithm, followed by a full list of available families. Filter options such as number of family members, ethnicity, and education allows users to refine their search with more control and flexibility.

Chosen Family Flow: We enhanced the Chosen Family experience by enriching profile cards with more descriptive and humanizing details. Each card now includes the family’s interests, the type of relationship they’re seeking, and photos to help LGBTQ+ users connect with real, relatable people. To streamline navigation, we also reorganized the flow so families can easily find LGBTQ+ members who have messaged or matched with them.

Finally, to ensure consistency and prepare for future updates, we defined a lightweight design system for our finalized designs.

• Typography & Scale: Adopted a scaled typographic hierarchy for clarity and accessibility.Matching Flow: Participants generally found the order intuitive but suggested incorporating additional details to the chosen family profile cards that could aid selection.
  ‍
• Color Palette: Built on Pride Family’s brand purples and complementary neutrals, adding functional colors for success (green) and alerts (red).
  ‍
• Iconography & Components: Selected a unified icon set and defined core components including buttons, form fields, cards, and modals for rapid iteration

Development 💻

Starting the Development Process

Before moving into development, our team discussed at length what tools and platforms would best be suited to build Pride Family’s website — taking into account the ability to contribute our own custom features and styling, which would be key to deploy a custom matching algorithm, while still prioritizing long-term maintainability for Pride Family after handoff. We also learned that Pride Family had initiated development for test purposes in an existing WordPress website, and debated as a team whether or not to continue in the website itself or start from scratch.

Based on these factors, we made the decision to move forward with WordPress: as an established tool regularly used by Pride Family’s team, this would allow us to directly begin development within Pride Family’s existing WordPress environment and easily hand over the completed website at the end of the batch. We would additionally be able to leverage WordPress plugins and database support — adding our own custom HTML/JS additions for styling sign-up/login, messaging, and reporting features to match our designs as well as our own custom backend algorithm and deployment for a custom matching service.  Although we decided not to build the website from scratch, at the start of development we chose to build our own custom theme to better support the integration of our designs into the platform — a move that took some time but ultimately ensured smooth development and the delivery of high-quality features throughout the rest of the implementation. For the remainder this section, we’ll go over each of the key facets of our development process:  this includes the tech stack, Github environment, key plugins, as well as an overview of our backend and frontend development.

Technology Stack

Platform & Tools: WordPress, Github
‍Programming Languages: PHP, Javascript, HTML, CSS

Github Environment

Pride Family provided our team with the necessary credentials to set up a fully functional local WordPress environment with a synced database, along with custom automation scripts that are automatically deployed via GitHub. This environment not only gave us the ability to support standard development collaboration workflows but also became the foundation for our effort to integrate our own custom matching algorithm into Pride Family’s production site.

Plugins

As part of the development process, our team utilized a combination of existing plugins that we installed into our WordPress environment and our own custom plugins for each of the features:

‍Custom Code Across the Website: Custom Snippets
‍Log-in/Sign-up: Ultimate Member, Advanced Custom Fields, Frontend Admin
‍Matching: Matching API, Match Users Block (Custom Plugins)
‍Messaging: Better Messages
‍Reporting/Admin: Included within Ultimate Member & Better Messages

Backend

While each of the plugins we installed in our WordPress environment has its own backend functionality, our work on the backend development of the application mainly encompasses the custom matching algorithm and its testing suite. Our team developed a weighted scoring system in PHP to rank the compatibility of LGBTIA+ users and potential chosen families based on location, desired relationship type, and shared hobbies. We then delivered the algorithm’s results to the frontend through a REST API encapsulated in custom plugins (Matching API, Match Users Block).

All of the website data itself (content, users, settings, pages, plugin functionality) is stored in a MySQL database used by WordPress. Each of the plugins either leverages the core tables provided in the WordPress database or creates its own custom tables as part of its interactions.

Frontend

On the other hand, we built WordPress pages to render the frontend for the website — most of which was built by assigning templates to their corresponding pages, placing shortcodes for plugins into those pages, and inserting patterns across the website to build layouts that matched our designs. To make sure that we could build our website to support our custom functionality and rendering, we used the Code Snippets plugin to add custom PHP and Javascript where necessary to tweak, override, or extend the plugin behavior.

Results 💯

The final platform delivered on all core functionality scoped at the beginning of the batch, with several enhancements made to improve usability and long-term scalability. Our team prioritized intuitive design, robust backend functionality, and alignment with user needs uncovered during usability testing.

• Login / Signup:
  We implemented a complete registration flow with custom profile fields tailored to each user type.
  
  → Users could create profiles with detailed background info, improving match quality and personalization.
  → Added logout functionality and real-time profile editing post-account creation.
  ‍
• Matching Experience:
  The matching algorithm was designed to recommend top families using a weighted similarity score based on location, shared hobbies, and desired relationship type.
  
  → Users benefited from an intuitive dual-view interface: “Your Top Recommended Matches” and “Additional Family Matches.”
  → Advanced filters (religion, ethnicity, education, etc.) gave LGBTQ+ members better control in finding aligned families.
  → Profile cards were redesigned with expanded visuals and descriptive text for better storytelling and connection.
  ‍
• Messaging System:
  Messaging was implemented using a reliable plugin that supported real-time chat, full conversation history, and multiple threads.
  ‍
  → Users experienced <2s message delivery with features like reactions, favorite messages, and reply threads.
  → Integrated notification system with audio and visual cues made staying in touch seamless.
  → Moderated design allowed only LGBTQ+ users to initiate conversations, maintaining platform safety.
  ‍
• Reporting and Admin Functionality:
  ‍We developed a lightweight but effective reporting system paired with a streamlined admin dashboard to empower client oversight while maintaining user safety.
  
  → Users could flag inappropriate messages directly within chat threads for convenience and context.
  → Admins could access submitted reports and basic user data through a read-only dashboard, enabling timely, low-maintenance moderation.
  → Positioned the dashboard for future scalability, such as password resets and account interventions.

Testimonials 📩

From our client Michele Ellenberger, President and Founder of Pride Family:

“The Develop for Good team absolutely exceeded our expectations this batch! Their dedication, creativity, and professionalism shone through in every step of the process. They not only delivered high-quality work, but they also truly understood and supported our mission. We're so grateful for their hard work and the positive impact they've made.”

Meet the Team 💌

Product Manager: Ria Sinha
‍Technical Manager: Shreya Devaraju
Designers:

• Nikki Ngatio
• Karla Santamaria
• Lutfiyah Nawaz Mohammed

Engineers:

• Taylor Spencer
• Vanessa Tang
• Nicholas Hioe