The goal of this redesign was to elevate Care For the Homeless’ (CFH) website by improving information architecture, navigation, and visual layout. The objective was to increase outreach, enhance accessibility, and create a seamless experience for diverse user groups—including individuals seeking aid, volunteers looking to contribute, and donors wanting to support the organization.
View PrototypeI led user research through interviews and surveys, conducted heuristic evaluations and competitor analysis, shaped the product strategy through ideation and definition. To enhance usability, I structured the experience with card sorting, site mapping, and user flows. I then translated insights into wireframes, prototypes, a cohesive style guide, and a polished visual design.
Duration: 3 weeks
Tools Used: Figma, Adobe Suite, Trello, Miro
The CFH website connects individuals in need with essential resources such as food, shelter, healthcare, and other critical services. It acts as a platform for advocacy groups, volunteers and essential workers to share their stories and make an impact, and also as a portal for donors to contribute and support the organization's mission.
We discovered that the existing website was not effectively serving its core audience—homeless individuals primarily relied on word-of-mouth or guided help rather than the site to find aid. Meanwhile, volunteers and donors engaged with the website more actively but struggled with navigating through the congested display of information.
Working within an agile, collaborative team of three UX designers, we executed a research-driven, iterative approach over a three-week sprint, progressing through research, ideation, prototyping, and testing.
Our research aimed to assess the website’s effectiveness, identify usability issues, and define opportunities for improvement.
We reached out to the organization, conducted on-site user interviews and handed out surveys at one of CFH’s open access outreach locations (All Angels' Church on W80th St), engaging with both service recipients and staff members.
- One-on-one interviews with five participants (including low-income and homeless individuals, food distributors, and volunteers)
- Survey questionnaires to gather broader insights on usability challenges
We discovered that the majority of homeless users relied on word of mouth or guided help rather than the website to find assistance. On the other hand, volunteers and donors engaged with the website more actively, but struggled with navigating through the congested display of information, hindering engagement. Users sought clearer access to essential services like food, clothes, as well as shelter locations, operating hours, and healthcare information. These insights guided our information architecture redesign to make resources immediately accessible while reducing complexity.
.png)
We conducted a heuristic evaluation across the existing primary and secondary pages, identifying and annotating key usability issues, such as lack of simplicity and consistency in layout and UI components, redundant navigation structures, and cluttered information hierarchy. The presence of two stacked navigation bars created confusion, as well as overlapping categories that need to be consolidated. Other usability gaps included broken links, missing error messages and go back button, inconsistent breadcrumbs, all of which needed resolution.
We created a persona to humanize our design approach: Elizabeth, a recently evicted woman searching for shelter. Our user research revealed that many people seeking aid had diverse backgrounds and good communication skills, some even have a stable job, contradicting common assumptions. By mapping out Elizabeth’s journey, we visualized the usage scenarios and critical stages in interacting with CFH, which guided our restructuring efforts.
To refine the website’s information architecture, we began with a define - group - structure card sorting exercise, clustering content into natural groupings. The primary goal was to make the organizational structure, navigation, and search system more intuitive to enhance programs accessibility. We clustered information into three main categories: main navigation, footer, and global utilities.
One of the primary issues with the existing website was the presence of two stacked navigation bars, which caused confusion and redundancy. By consolidating overlapping categories and integrating global utilities like Patient Portal, Donate, and Find Care into the main navigation, we simplified the menu structure for improved visibility. The labeling system was carefully adjusted accordingly.
Constructing user flow diagrams allowed us to map out the mental models of different user groups—those seeking aid (medical care, shelter, food, clothes, covid update) versus those providing support (donate, volunteer, advocate, get involved). This exercise helped define clear pathways and clarify the priority of programs.
We started the design process with brainstorming and paper wireframing, exploring various ways to structure the homepage and key internal pages. The initial layouts felt either too condensed in the middle or too spread out, making it difficult to establish clear focal points. As we refined our designs into mid-fidelity wireframes, we experimented with different visual hierarchies like large hero images, modular content blocks to create a structured yet scannable layout that guided users through the site efficiently.
We developed a style guide that emphasized clarity, warmth, and accessibility. The original website gave an oversaturation of colors and information that overwhelmed users, so we shifted the palette to earthy and inviting tones - replacing the original magenta red theme color with brick red, incorporating softer yellows and deep navy blues to create a sense of balance and trust. Typography was also optimized for readability. By maintaining consistency in spacing, font sizes, and UI elements, we reinforced a cohesive and professional visual identity for CFH.
The final high-fidelity prototype captured CFH’s value while prioritizing usability and accessibility. The redesigned interface featured a clear organizing principle, intuitive layout, and streamlined program access. Through a combination of cohesive visual elements and functional enhancements, we strengthened the connection between CFH and its users whether it be volunteers, donors, partners, or the homeless, making the website a true reflection of the organization’s mission.
1. Connect with CFH stakeholders to share our work and gather feedback.
2. Add more charities to our donation page. Gain more donors, partners and volunteers, get involved ourselves as volunteers to learn more and be part of the cause.
3. Track and analyze website usage metrics to enhance outreach efforts.
4. Integrate social media updates into website feeds for real-time engagement.
5. Apply insights and experience gained to strengthen our future projects.
1. Navigating stakeholder challenges required a proactive approach—jumping into action to conduct surveys and interviews despite initial unresponsiveness.
2. User research and best practices played a crucial role in shaping our strategies.
3. Effective collaboration and task delegation were essential for staying on schedule, maintaining clear and constant communication was key to a smooth workflow.
4. We truly stayed together with commitment and resilience every step of the way to completion.
