Providing a satisfying housing application experience
Intro
PSHH (People's Self-Help Housing) is a prominent nonprofit housing organization in California, serving 10,000+ residents across four counties. My team and I collaborated with PSHH's HR department, leveraging our design expertise to support their mission. My central role encompassed a comprehensive spectrum of design activities, including research, ideation, design, and testing. This four-week non-profit design initiative culminated in the complete redesign of the final prototype, led by me.
The Solution
Our team presented a redesign of the website to the PSHH organization, to streamline the navigation.
The current website's non-intuitive organization hinders user navigation and essential tasks, such as housing applications, accessing PSHH information, and facilitating donations. My aim was to restructure the interface, prioritizing a user-friendly experience to address these critical usability issues.
The Problem
_png.webp)
"We build affordable homes with site-based services that offer opportunities to change lives and strengthen on the central coast of California." — www.pshhc.org
Design Proccess
Empathize
User Research
I interviewed prospective users to gain deeper insight into user needs, goals, motivations, and frustrations to improve the website. Below are the three objectives for the interview.
Stakeholder Interview
To understand the organization and the affordable housing landscape, our team had a brief interview with the receptionist and the communication coordinator of the PSHH organization.
Below are the key notes from the interview.
-
Sensitivity surrounding assistance needs inhibits open user discussions.
-
Website analysis shows 50% seek properties, 25% look for jobs, and 25% explore other services.
-
Users express the need for testimonials and reviews to establish trust on the website.
User Insights
Insights from User Research Gatherings:
-
Time-consuming housing search due to numerous options.
-
Users reluctant to seek help openly.
-
Testimonials vital for building user trust.
-
Some participants hesitant to share personal history.
5 Participants
3 male / 2 female
Age range 20~40
10~15 min
I translated user insights into an affinity diagram displaying user needs, goals, pains, and motivations.
User Persona
Drawing from the user research findings, I developed a user persona closely resembling individuals such as Abigail, aligning their struggles of finding affordable housing with the design objectives.
This was done to ensure user needs in future design processes.
Abigail, a new visitor to PSHH, is pressed for time and seeks to learn about the organization by accessing About Us.
The lack of differentiation between the homepage and About Us page creates confusion, leaving Abigail unsure about the subsequent steps to explore housing application information on the website.
This highlights the critical need for a more intuitive and streamlined user experience to cater to time-sensitive users like Abigail.
Market Research
Delving into a comprehensive examination of articles, blogs, and renowned industry surveys, I analyzed prominent companies in the affordable housing sector: Mercy Housing, Linc Housing, Affordable Housing, and Human Good.
This was done to discern prevailing patterns, successes, and vulnerabilities within the existing landscape of housing platforms. The competitor analysis enabled us to identify actionable strategies for integrating successful elements and circumventing potential pitfalls during the redesign process for the PSHH platform.
Research unveiled that low-income individuals in constrained housing markets often experience feelings of financial strain and social stigma. To address these concerns, our proposed solutions include:
-
Offering a comprehensive resource to empower users in their housing search journey.
-
Enhancing the prominence of the organization's core mission and purpose.
-
Cultivating user trust and comfort through authentic testimonials, fostering a caring and supportive platform environment.
Implementing these strategies serves to expand the service's user base and extend genuine support to individuals in need of affordable housing solutions.
Define
Leveraging insights derived from Abigail's perspectives, I formulated concise Point of View (POV) statements, enabling a comprehensive interpretation of the user research data. Subsequently, I crafted targeted 'How might we?' (HMW) questions, fostering an ideation process geared towards enhancing the discoverability of alternative education pathways. This was done to synthesize what I know about the user needs into actionable plans.
Ideate
Card Sorting
Redline Annotations
Before constructing a user flow, I annotated the current website to keep track of design issues and potential design changes.
Site Map
With streamlined categories, the new header features a reduced menu selection, minimizing navigation complexity and enabling users to easily locate relevant information within specific menu sections.
Style Guide (old)
Wireframe
Referring to the site map, I generated preliminary sketches both on paper and digitally, effectively outlining the wireframe structure for the prototype. Our collaborative decision emphasized a user-friendly layout, ensuring easy access to vital pages. Key components, including 'Who We Are,' 'How It Works,' and 'Give Today' (formerly 'Donate Today'), were prioritized to facilitate user engagement and donation accessibility, aligning with PSHH's nonprofit focus.
Adhering to the original color scheme outlined in the PSHH Style Guide, our team integrated elements that fostered a 'friendly' and 'warm' atmosphere, aimed at creating a welcoming online environment for users. In line with this approach, we strategically incorporated images designed to evoke feelings of happiness and trust, reinforcing a sense of comfort and reliability within the PSHH online platform.
Prototype
Our team streamlined the header with fewer categories and provided essential content through shortcut cards beneath the hero section. This removed unnecesarily large images for quicker scrolling.
Mobile Site Transformation (Mid-Fi )
-
Reduced the size of the hero/carousel for improved mobile viewing.
-
Maintained the logo on the header for consistent branding.
-
Included 'Who We Are,' 'How to Apply,' and 'Donate Now' cards below the hero section for quick access to key information.
-
Streamlined the homepage scrolling to enhance the mobile user experience.
Mobile Site Transformation (Mid-Fi)
Evaluate
I conducted a quick A/B Testing of a card design.
-
Users stated both titles are uncomfortable to read in red and the text is too small.
-
B version is preferred as it appears above the fold
-
Advised to lighten the shadow and make sure the rounded corners align with other UI elements.
Mobile Iterations
The menu was one of the main focuses of the mobile site as it was difficult to click for dropdowns.
Our team condensed the number of categories to make the website more precise (following the header on the web redesign).
-
Users did not readily recognize that 01, 02 has a shape of a house (which was intentional)
-
Red background is too saturated
-
05 was most preferred as the alignments were unified
After running through a couple more usability tests, I synthesized the results and feedback discovered through tests and iterations into a hi-fi mock-up (posted on the top of the page).
Overall Challenges
Lesson
I discovered the critical importance of user research, especially when faced with challenges in gathering insights directly from users. Often, projects revolve around sensitive or personal topics, making individuals hesitant to share their experiences. In these instances, I found that utilizing open-source platforms where users can discuss their thoughts anonymously proved invaluable. These resources not only facilitate access to a diverse range of perspectives but also save considerable time in identifying and connecting with the right participants for interviews.
Result
As per feedback from HR, the organization expressed the ongoing need for a testimonial page, a pivotal inclusion in the new design. The PSHH team wholeheartedly embraced the final design, underscoring its positive reception within the organization. Anticipating potential future updates, I remain eager to witness the continued evolution of the web redesign project.
The Struggle
Discussing current or past living situations proved to be a sensitive and challenging aspect during in-person interviews, presenting obstacles in obtaining valuable user insights. Despite these difficulties, engaging in a short-term project significantly pushed my boundaries, fostering personal and professional growth from the experience.