Covenant House Web Design

Covenant House Web Design

Homepage Design, Navigation Design, and UX Design

Homepage Design, Navigation Design, and UX Design

Background

Covenant House, a leading organization dedicated to supporting homeless youth and survivors of trafficking, sought a redesign of their website to enhance user experience and accessibility.



Content

I am tackled my project based on the following prompt:

Design a user-friendly and accessible website for Covenant House that addresses the challenges homeless youth face when seeking housing.



Problem Statement:

Make it easy for homeless youth find housing.
The current digital platform lacks a cohesive and intuitive user experience, making it difficult for users to access critical information and resources. Without a strong visual narrative or clear calls to action, the site struggles to inspire meaningful engagement and convey its mission effectively.

The overall design and navigation issues hinder the ability to communicate the impact of the organization’s work, limiting opportunities for deeper user connection and support.

Background

Covenant House, a leading organization dedicated to supporting homeless youth and survivors of trafficking, sought a redesign of their website to enhance user experience and accessibility.



Content

I am tackled my project based on the following prompt:

Design a user-friendly and accessible website for Covenant House that addresses the challenges homeless youth face when seeking housing.



Problem Statement:

Make it easy for homeless youth find housing.
The current digital platform lacks a cohesive and intuitive user experience, making it difficult for users to access critical information and resources. Without a strong visual narrative or clear calls to action, the site struggles to inspire meaningful engagement and convey its mission effectively.

The overall design and navigation issues hinder the ability to communicate the impact of the organization’s work, limiting opportunities for deeper user connection and support.

Project Goals:

Focus on creating an intuitive interface that provides clear, easy-to-navigate resources, support services, and housing information tailored to their needs. Ultimately, this project helps bridge gaps and empowers users to make meaningful change


  • Improve User Experience:
    Develop an intuitive and accessible digital platform that allows homeless youth to easily navigate and quickly find housing support, along with other critical services.


  • Enhance Donor Engagement:

    Design the site to clearly showcase the organization’s services and emphasize the impact of donor contributions.


  • Increase Donations:

    Develop a visual strategy that encourages visitors to contribute by illustrating how their support directly benefits the youth Covenant House serves.


Project Goals:

Focus on creating an intuitive interface that provides clear, easy-to-navigate resources, support services, and housing information tailored to their needs. Ultimately, this project helps bridge gaps and empowers users to make meaningful change


  • Improve User Experience:
    Develop an intuitive and accessible digital platform that allows homeless youth to easily navigate and quickly find housing support, along with other critical services.


  • Enhance Donor Engagement:

    Design the site to clearly showcase the organization’s services and emphasize the impact of donor contributions.


  • Increase Donations:

    Develop a visual strategy that encourages visitors to contribute by illustrating how their support directly benefits the youth Covenant House serves.


Discover & Define

Discover & Define

User Research

To kick off my research, I explored housing and rental platforms like Zillow, Apartments.com, and Airbnb.

These applications provided valuable insights into how users navigate complex systems to find housing options. I conducted a competitive analysis by comparing and contrasting various features offered by these platforms, such as search filters, user interface design, and accessibility tools.


Through this analysis, I identified key strengths to incorporate into my project, such as intuitive navigation and resource visibility, while noting weaknesses that presented opportunities for improvement. This comparative approach helped me selectively integrate features that were both useful and feasible within the context of my project.


Key Strengths Identified:


  • User-Intuitive Layout: Many housing platforms offer an intuitive, easy-to-use interface, making it simpler for users to quickly find housing options—a crucial feature for homeless youth seeking immediate support.


  • Comprehensive Information: Listings typically provide detailed information on housing availability, accommodations, and restrictions, helping users make informed decisions about their housing needs.


Key Weaknesses Identified:

  • Missing Availability Staying Dates: Several platforms lack critical information about housing availability dates, which is essential for youth in urgent need of housing options.


  • Limited Communication Tools: There is a notable absence of communication features that would allow homeless youth to connect directly with housing providers or potential roommates, limiting their ability to explore shared living opportunities.


User Research

To kick off my research, I explored housing and rental platforms like Zillow, Apartments.com, and Airbnb.

These applications provided valuable insights into how users navigate complex systems to find housing options. I conducted a competitive analysis by comparing and contrasting various features offered by these platforms, such as search filters, user interface design, and accessibility tools.


Through this analysis, I identified key strengths to incorporate into my project, such as intuitive navigation and resource visibility, while noting weaknesses that presented opportunities for improvement. This comparative approach helped me selectively integrate features that were both useful and feasible within the context of my project.


Key Strengths Identified:


  • User-Intuitive Layout: Many housing platforms offer an intuitive, easy-to-use interface, making it simpler for users to quickly find housing options—a crucial feature for homeless youth seeking immediate support.


  • Comprehensive Information: Listings typically provide detailed information on housing availability, accommodations, and restrictions, helping users make informed decisions about their housing needs.


Key Weaknesses Identified:

  • Missing Availability Staying Dates: Several platforms lack critical information about housing availability dates, which is essential for youth in urgent need of housing options.


  • Limited Communication Tools: There is a notable absence of communication features that would allow homeless youth to connect directly with housing providers or potential roommates, limiting their ability to explore shared living opportunities.


User Research

To kick off my research, I explored housing and rental platforms like Zillow, Apartments.com, and Airbnb.

These applications provided valuable insights into how users navigate complex systems to find housing options. I conducted a competitive analysis by comparing and contrasting various features offered by these platforms, such as search filters, user interface design, and accessibility tools.


Through this analysis, I identified key strengths to incorporate into my project, such as intuitive navigation and resource visibility, while noting weaknesses that presented opportunities for improvement. This comparative approach helped me selectively integrate features that were both useful and feasible within the context of my project.


Key Strengths Identified:


  • User-Intuitive Layout: Many housing platforms offer an intuitive, easy-to-use interface, making it simpler for users to quickly find housing options—a crucial feature for homeless youth seeking immediate support.


  • Comprehensive Information: Listings typically provide detailed information on housing availability, accommodations, and restrictions, helping users make informed decisions about their housing needs.


Key Weaknesses Identified:

  • Missing Availability Staying Dates: Several platforms lack critical information about housing availability dates, which is essential for youth in urgent need of housing options.


  • Limited Communication Tools: There is a notable absence of communication features that would allow homeless youth to connect directly with housing providers or potential roommates, limiting their ability to explore shared living opportunities.


Research Goals
Based on insights from the literature review and competitive analysis, I established five primary research goals for surveys and interviews:


  1. Accessibility and Ease of Use: Investigate the major challenges homeless youth face when searching for housing online, and identify barriers that make these platforms difficult to navigate.


  2. Platform Feature Preferences: Determine which features, such as direct communication with housing providers, resource accessibility, or reviews from other youth, are most valuable to homeless youth in a housing platform.


  3. Understanding User Needs: Explore the key factors that influence homeless youth in their housing decisions, including safety, availability of support services, and the suitability of temporary or long-term housing options.


  4. Inclusivity in Housing Search: Assess how to design a platform that is inclusive, catering to the diverse needs of homeless youth, including those from different backgrounds or with unique housing challenges.


  5. Ethical and Secure Use: Identify strategies to ensure ethical handling of sensitive personal data and build user trust, with a focus on safeguarding the privacy and security of homeless youth during the housing search process.


Research Goals
Based on insights from the literature review and competitive analysis, I established five primary research goals for surveys and interviews:


  1. Accessibility and Ease of Use: Investigate the major challenges homeless youth face when searching for housing online, and identify barriers that make these platforms difficult to navigate.


  2. Platform Feature Preferences: Determine which features, such as direct communication with housing providers, resource accessibility, or reviews from other youth, are most valuable to homeless youth in a housing platform.


  3. Understanding User Needs: Explore the key factors that influence homeless youth in their housing decisions, including safety, availability of support services, and the suitability of temporary or long-term housing options.


  4. Inclusivity in Housing Search: Assess how to design a platform that is inclusive, catering to the diverse needs of homeless youth, including those from different backgrounds or with unique housing challenges.


  5. Ethical and Secure Use: Identify strategies to ensure ethical handling of sensitive personal data and build user trust, with a focus on safeguarding the privacy and security of homeless youth during the housing search process.


Project Execution: The project was carried out in three key phases:


  1. Analysis & Brainstorming:

    • Reviewed the existing website audit and gathered insights from Covenant House PA’s Volunteer Manager.

    • Conducted brainstorming sessions to align on project goals, focusing on the dual objectives of user support and donor engagement.

  2. Initial Design:

    • Created mock-ups for key site pages, incorporating feedback over multiple review rounds.

    • Focused on visually presenting the organization’s services in a way that resonates with both youth seeking support and potential donors.

  3. Finalization:

    • Delivered the final visual design, complete with a style guide and detailed design notes.

    • Provided guidance to front-end developers through two consultation calls to ensure the design was accurately implemented.



Project Execution: The project was carried out in three key phases:


  1. Analysis & Brainstorming:

    • Reviewed the existing website audit and gathered insights from Covenant House PA’s Volunteer Manager.

    • Conducted brainstorming sessions to align on project goals, focusing on the dual objectives of user support and donor engagement.

  2. Initial Design:

    • Created mock-ups for key site pages, incorporating feedback over multiple review rounds.

    • Focused on visually presenting the organization’s services in a way that resonates with both youth seeking support and potential donors.

  3. Finalization:

    • Delivered the final visual design, complete with a style guide and detailed design notes.

    • Provided guidance to front-end developers through two consultation calls to ensure the design was accurately implemented.



Donation Page



Project Overview:

Covenant House, a leading organization dedicated to supporting homeless youth and survivors of trafficking, sought a visual redesign of their website to enhance user experience and accessibility.


The project focused on creating a more engaging and informative online presence that aligns with the organization's branding and style preferences.

Donation Page



Project Overview:

Covenant House, a leading organization dedicated to supporting homeless youth and survivors of trafficking, sought a visual redesign of their website to enhance user experience and accessibility.


The project focused on creating a more engaging and informative online presence that aligns with the organization's branding and style preferences.

Donation Page UI/UX Design Overview


  • User-Centered Design: The layout is clean and intuitive, prioritizing ease of use. The design minimizes friction by guiding users smoothly through the donation process with straightforward and clearly labeled sections.


  • Emotional Resonance Through Milestones: A key feature is the donation milestone tracker, prominently displayed to highlight the collective progress toward the fundraising goal. This element taps into the donors' emotions, encouraging them to contribute by making them feel part of a larger, impactful community effort.


  • Goal-Oriented Engagement: The donation amounts are presented as clearly defined options, with a prominent call to action (CTA) button, "Donate Now." This approach simplifies the decision-making process and keeps users focused on completing their donation.


  • Streamlined Information Entry: The form fields are organized logically, requiring only essential information, which reduces cognitive load and accelerates the donation process. Payment options are clearly displayed with visual cues, enhancing usability.


  • Secure Donation Assurance: A "Gift Securely" button emphasizes the security of the transaction, building trust and confidence in users, which is crucial for online donations.


  • Responsive and Accessible Design: The design is fully responsive, ensuring an optimal experience across all devices. Accessibility considerations are integrated to ensure the page is usable by a diverse audience, including those with disabilities.


  • Supportive Content: Additional content, such as links to learn more about the shelter’s services and programs, is strategically placed to provide context and deepen the donor’s understanding of the cause, potentially increasing their commitment.


Designer

Celine Lai

Let’s
Connect

©

Celine Lai

2025

Let’s
Connect

©

Celine Lai

2025

Let’s
Connect

©

Celine Lai

2025