Peyton O'Donoghue
Peyton O'Donoghue
Peyton O'Donoghue
Back
UX Research UX Strategy UX/UI Design
June 1, 2023

UCSF Benioff Homelessness & House Initiative

Mission


The Benioff Homelessness and Housing Initiative (BHHI) a dedicated organization providing accurate policy-oriented research on homelessness to policymakers and practitioners at local, state, and national levels.





Project overview


BHHI collaborated with Kanopi to undergo a data-driven website transformation that effectively tackled significant challenges faced by internal and external users. The project’s primary goal was to establish a contemporary, engaging, and interactive website experience, which successfully bridged the gap between stakeholders and the community. Furthermore, it was essential to ensure that the website could seamlessly accommodate the wealth of insights held by BHHI in an accessible and responsive environment. Through team collaboration, the end result delivered an impressive and cohesive solution that aligned with BHHI’s core objectives.

  • Strategy

    Brand strategy, UX Strategy

  • Design

    UX/UI Design, Art Direction

  • Client

    UCSF Benioff Homelessness and Housing Initiative

  • Tools

    Google Analytics, Google Suite, Figma, Figjam, Illustrator, Drupal

  • Created at

    Kanopi Studios, Remote in the US & Cananda

  • Tags

    UI/UX Design, UX Strategy

Before

A sneak peak into the UX evolution of BHHI

Drag the center arrow controls from left to right to view the before and after.
Before After

After

Research and testing

Discovery

Deliverables included

  • Discovery deck (assessment overview)
  • Sitemap
  • Persona-based user journeys

Tactics included

  • Analytics review
  • Site performance testing
  • Accessibility testing
  • Stakeholder interviews and surveys
  • User survey and heatmapping
  • Content audit and ideation

Tools Used

  • Google Analytics
  • Lighthouse Overview (Chrome DevTool)
  • Wave Accessibility Checker (Chrome DevTool)
  • Mouseflow

With the job of enhancing the usability, overall organization, and visual impact of their existing website, we at Kanopi began the process with our initial research. Our methodology embraced a data-driven approach, beginning with the strategy phase, also termed “Discovery,” where we meticulously explored opportunities for development and design implementation to improve the overall user experience. This involved a series of stakeholder exercises, thorough data collection, and user testing. With the qualitative and quantitative insights that surfaced from both external and internal users during the discovery phase, we relied on a data-driven approach known as the severity framework to list usability issues in order of priority; task criticality, impact, and frequency.

  • Task criticality measures the importance of the task to the user.
  • Impact evaluates the level of hindrance the issue causes.
  • Frequency represents the percentage of occurrence among users.

By categorizing key friction points into common themes and establishing clear project success expectations based on discovery findings, I was able to lay the foundation for restructuring the website’s information architecture and mapping user journeys based on well-defined Personas.

Problem Statements

Homepage impression

The homepage suffers from information overload, lacking clarity, clear pathways, and adequate representation of organizational storytelling.

Visual presentation

The visual presentation of the website exhibits a generic design, lacking the ability to engage users and create an impactful experience.

Site structure hierarchy

The absence of a well-structured site architecture inhibits users’ intuitive navigation and content discovery, resulting in difficulties in accessing relevant information with ease and effectiveness.

Accessibility

The lack of consistency in font or heading usage, inadequate color contrast, and the absence of alt text significantly hinder the accessibility of the content, limiting users with disabilities from effectively perceiving and interacting with the website.

Site performance

Unused JavaScript is negatively impacting overall site performance, 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.

Content gaps

Insufficient storytelling and representation, particularly concerning the depth of research and insightful content, reduces user connection and impact of the organization’s work.

Project Success Outcomes

The project’s success envisions creating a website that is both immersive and dynamic, built to accommodate the growing range of content and transform the website into a central hub of information for the BHHI’s current and future goals. Knowing the website will serve as a central hub to foster connection and engagement with BHHI, the primary focus is to prioritize user-centricity, empowering students through self-service capabilities, and bridging the gap between academic and community stakeholders. 

The website aims to expand its audience and foster engagement by ensuring credibility through verifiable evidence-backed content, promoting fact-checking, and, in the coming years, allowing BHHI to become a trusted media hub of insight to a diverse audience. By foster engagement, collaboration, and citations from authoritative sources will enhance recognition, influence, credibility, and relevance, all to promote greater awareness of the organization’s initiative and impact.

In order to ensure inclusivity, the website will be designed to be accessible and user-friendly for all individuals. Ultimately, the success of the project will be reflected in the widespread adoption of its key messages, highlighting its significant impact and establishing it as a thought leader in the field of homelessness.

Finalizing the research and discovery phase

Strategy outcomes

Information Architecture

With the insights surfaced during the research and discovery phase, it became evident that the prior iteration of the BHHI sitemap did not effectively showcase and make valuable content easily accessible for established personas. Our information architecture approach was centered on ensuring seamless entry to all facets of the organization, spanning research, initiatives, identity, and impact. Leveraging user journeys, we identified potential obstacles and pain points, resulting in a revamped sitemap designed for enhanced usability. This new structure aids each persona in efficiently locating their desired information.

Before and After
Information Architecture
Before After
Creating a unique visual system and strategy

Design and Functionality

BHHI-Mobile-Resources
Visual planning

Determine structure and aesthetic

Deliverables included

  • Moodboards
  • High fidelity Wireframes
  • Responsive designs
  • Icon bank and color coating for resource taxonomies

Tools Used

  • Google Suites 
  • Figma
  • Photoshop
  • Illustrator

With the insights surfaced during the research and discovery phase, the solidified sitemap, user journeys, and common key friction points defined, we then transitioned into the visual and structural planning of the interface experience. Prioritizing visual exploration, I crafted two mood boards, and upon receiving approval to marry the two concepts, our goal was to streamline the design phase and allow the mood boards to serve as a guiding inspiration for developing high-fidelity wireframes. 

 

When selecting a diverse array of pages to structure during wireframing, the primary objective was to ensure the inclusion of all necessary components to meet their content needs. Throughout the project’s progression, my collaborative efforts with the client and development team were pivotal, as their insights and expertise played a crucial role in determining the solution scope and pushing the boundaries of functionality and visual presentation on the website.

Deliverables

Design planning deliverables

Mood board creation

By leveraging a well-defined brand guide and adhering to strict constraints and distinct client requests, I successfully crafted the mood boards. Discover the captivating proposed aesthetics that shape the website’s visual presentation.

BHHI Wireframes

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. 

Deliverables

Final design outcomes

View live site

*site may appear slightly different due to client management

The project successfully addressed various key findings to transform the website into an immersive and dynamic hub, enhancing engagement with BHHI. The homepage’s previous information overload was replaced with clear pathways, fostering a better understanding of the organizational narrative. The visual presentation underwent a captivating overhaul, now engaging users and creating impactful experiences.

 

A well-structured site architecture was implemented, enabling intuitive navigation and seamless content discovery. Accessibility concerns were tackled by ensuring consistent font usage, improved color contrast, and proper alt text, allowing all users to access content effectively. By eliminating unused JavaScript, site performance was optimized, resulting in faster load times and improved user satisfaction.

 

Engagement concerns were resolved through the establishment of clear pathways, encouraging meaningful interactions. The sitewide content gap was addressed by enhancing storytelling and research representation, creating stronger connections with users, and magnifying the organization’s impact.

 

The project’s overarching success is evident in the website’s transformation into a hub that fosters connection and engagement with BHHI. Prioritizing user-centricity, the website empowers students, bridges academic and community stakeholders, and promotes fact-checked, evidence-backed content for credibility. By nurturing engagement and collaboration with authoritative sources, the website has become a trusted media hub, elevating BHHI’s influence, recognition, and relevance. The inclusivity of the design ensures accessibility for all users, while the widespread adoption of key messages solidifies the project’s impact, establishing BHHI as a prominent thought leader in the field of homelessness.

Next Project
Bourdon & Tortolero, PLLC