UCSF Benioff Homelessness & House Initiative
Mission———
The Benioff Homelessness and Housing Initiative (BHHI) is a dedicated organization that provides policy-oriented research on homelessness to policymakers and practitioners at local, state, and national levels. With a commitment to driving advocacy for evidence-based solutions, BHHI strives to make a tangible impact on communities across the nation.
Project overview———
BHHI partnered with Kanopi to modernize their website and address key pain points for both internal and external users. The goal was to create an intuitive, engaging experience that connected researchers, policymakers, and community members. We made BHHI’s research and initiatives more accessible, while developing a centralized resource hub and media center to unify their content and channels. The result: a cohesive platform that drives traffic, strengthens advocacy, and supports BHHI’s mission to combat homelessness nationwide.
Tactics included
- Analytics review
- Site performance testing
- Accessibility testing
- Stakeholder interviews and surveys
- User survey and heatmapping
- Content audit and ideation
Deliverables included
- Discovery deck (assessment overview)
- Sitemap
- Persona-based user journeys
Tools Used
- Google Analytics
- Lighthouse Overview (Chrome DevTool)
- Wave Accessibility Checker (Chrome DevTool)
- Mouseflow
Our mission to enhance the website’s usability, organization, and visual impact began with comprehensive research in the “Discovery” phase. We explored development and design opportunities to improve user experience through stakeholder exercises, data collection, and user testing. Using insights from both external and internal users, we applied the severity framework to prioritize usability issues based on task criticality, impact, and frequency. By categorizing key friction points into common themes and setting clear project success expectations, we established a solid foundation for restructuring the website’s information architecture and mapping user journeys based on well-defined personas. This structured approach ensured a focused and effective redesign, resulting in a significantly improved user experience.
Homepage Impression: The homepage suffers from information overload, lacking clarity, clear pathways, and adequate representation of organizational storytelling. Despite this, only 11% of visitors land on the homepage first, driven primarily by search engines.
Visual Presentation and Accessibility: The visual presentation of the website exhibits a generic design, lacking the ability to engage users and create an impactful experience. Additionally, inconsistent font and heading usage, inadequate color contrast, and the absence of alt text hinder accessibility, limiting users with disabilities from effectively perceiving and interacting with the website.
Site Structure Hierarchy:Poor site architecture, making navigation and content discovery extremely difficult.
Site Performance:Unused JavaScript leading to longer load times and user frustration.
Engagement and User Pathways: The absence of clear pathways diminishes user engagement and hinders their ability to take meaningful actions while interacting with the website. Twitter referrals account for 74% of the traffic, indicating high potential for engagement if horizontal pathways are optimized.
Content Gaps: Insufficient storytelling and representation, particularly concerning the depth of research and insightful content, reduces user connection and the impact of the organization’s work. In addition to the blog, visitors are consistently navigating to pages like Our Team, Leadership, and Research.
Our project envisions transforming the BHHI website into an immersive and dynamic hub, overcoming challenges like information overload, generic design, poor site structure, and accessibility issues. Imagine a website where students are empowered, academic and community stakeholders are seamlessly connected, and every piece of content is backed by verifiable evidence. This user-centric redesign ensures that the site is inclusive and user-friendly for all, fostering engagement through compelling storytelling and credible fact-checking. By addressing these core issues, we aim to position BHHI as a trusted media hub and thought leader in homelessness. As the website evolves into a central hub of information, it will expand its audience, inspire meaningful interactions, and ultimately reflect the significant impact of our efforts, solidifying BHHI’s influence and credibility.
By analyzing user journeys and identifying pain points, we created a sitemap that ensures seamless access to research, initiatives, identity, and impact, allowing each persona to efficiently find their desired information.
- Utility Navigation Added quick links and action items for efficient access to essential functions.
- Who We Are Introduced a section highlighting the team, mission, and career opportunities to build visitor trust.
- Our Approach Created the Strategic Science section to clarify research methods and data-driven solutions.
- Our Impact Showcases the research’s impact on the community.
- Resource Hub Consolidated all resources, tagging by topic and type for easier discovery.
- Media Center Established a Media Center to promote media channels and community presence, distinct from research resources.
Deliverables included
- Moodboards
- High fidelity Wireframes
- Responsive designs
- Icon bank and color coating for resource taxonomies
Tools Used
- Google Suites
- Figma
- Photoshop
- Illustrator
With insights from the research and discovery phase and our strategic planning complete, we transitioned into the visual and functional structuring of the interface. I crafted two mood boards, which were then blended into a single, finalized mood board. This vision streamlined the design phase and guided the development of both low-fidelity wireframes and high-fidelity designs.
By leveraging a well-defined brand guide and adhering to strict constraints and specific client requests, I crafted mood boards that played a crucial role in integrating visual aesthetics with the website’s functionalities. These mood boards helped maintain brand integrity and allowed the aesthetic elements to be considered during the low-fi design stage, leading to a more efficient hi-fi design phase.
When selecting a diverse array of pages to structure during wireframing, the primary objective was to ensure the inclusion of all necessary components and functionality. Explore the key wireframes that set the foundation for the design.
*site may appear slightly different due to client management
The project transformed the BHHI website into an engaging and dynamic hub, significantly enhancing user engagement. We tackled the previous homepage’s information overload by creating clear pathways that effectively conveyed the organizational narrative. The visual presentation received a captivating makeover, which now engages users and creates impactful experiences. A well-structured site architecture was implemented for intuitive navigation, while accessibility concerns were addressed with consistent font usage, improved color contrast, and proper alt text, ensuring all users can access the content. Optimizing site performance by eliminating unused JavaScript resulted in faster load times and greater user satisfaction.
Engagement was further boosted by establishing clear pathways for meaningful interactions, enhancing storytelling, and representing research more effectively to bridge content gaps. This led to stronger user connections and amplified the organization’s impact. The redesigned website prioritizes user-centricity, empowering students, bridging academic and community stakeholders, and promoting credible, evidence-backed content. The inclusivity of the design ensures accessibility for all users, establishing BHHI as a prominent thought leader in the field of homelessness. By nurturing engagement and collaboration with authoritative sources, the website has become a trusted media hub, elevating BHHI’s influence, recognition, and relevance.