CHAI BALTIMORE
Full Redesign:
Content Inventory, Proto-Personas, Search Analysis, Competitive Analysis, Accessibility Review, Card Sorting, Journey Maps and Wireframes
(2026)
Project Overview
This project was completed for my graduate level Information Architecture (IDIA 630) course at the University of Baltimore and focused on redesigning the website for CHAI (Comprehensive Housing Assistance, Inc.) Baltimore, a nonprofit that provides housing, financial, and community support services. The goal was to improve how residents and community members find and understand available programs and services online.
The University of Baltimore partners directly with CHAI, allowing students to work with a real client organization.
Project scope included:
-
Conducting a full content inventory to understand the existing site structure and identify gaps, redundancies, and navigation challenges
-
Developing proto-personas to represent key user groups seeking housing assistance and community services. Proto-personas were used vs. research-based personas due to time constraints in class. These acted as a lightweight tool to build empathy and guide design decisions.
-
Performing a search analysis to understand how users search for housing assistance and related services online and highlight possible improvements to CHAI's search system.
-
Performing comprehensive strategy and branding-focused competitive research to understand how similar organizations structure and present services online
-
Undergoing an accessibility review using the WAVE toolbar plugin and evaluating the site against Web Content Accessibility Guidelines (WCAG) 2.0.
-
Running a closed card sort to validate suggested improvements to the site’s navigation and information architecture
-
Creating user journey maps to understand how people move through the process of finding and applying for services
-
Designing wireframes for a redesigned site structure to improve clarity, accessibility, and discoverability of CHAI’s programs
The final deliverables propose a restructured information architecture and website design, which will be shared with CHAI for feedback and potential future implementation.
Content Inventory
First, we reviewed all content on the site and noted the following for each page:
-
Hierarchy level
-
Page name
-
Navigation label
-
URL of page
-
Summary of page content
-
Purpose of page content
-
Suggested keywords for page
-
Page layout developed in Miro
-
List of downloadable content/files on page
-
List of external links on page
-
Questions, suggestions, notes
Each top-level navigation item had a tab in the Google Sheets document, and each internal page within the site had a separate column with the above details listed. External pages were excluded from having their own separate columns, but were included in the "list of external links on page" column.
Example of Content Inventory Page
Proto-Personas
Personas are tools that help teams design for real people by capturing key needs, goals, and constraints; typically they are informed by strategic user-experience research. For this project, we developed “proto-personas," early, assumption-based versions of a research-backed persona. They were created from existing knowledge rather than direct user research, and their meant to be validated through ongoing research. Our choice for proto-personas was mainly due to time constraints in our semester-long course which involved multiple components for the redesign.
These proto-personas represent likely user groups navigating housing challenges in Baltimore, from avoiding eviction to finding affordable housing. They help guide early design decisions by grounding the experience in realistic scenarios, with the understanding that they should be validated and refined through future research.
Homeowner in fear of foreclosure
Mother looking for affordable housing
Disabled older adult looking for community housing
Older adult looking for support to make home repairs to age in place
Adult with mental illness fearing eviction and looking for better housing
Search Analysis
These personas informed the next stages of the project, including a full search analysis. The search analysis included included a review of the search system on CHAI's site, with industry citations and a special focus on the following topics:
-
Indexing, including search zones
-
Pattern-matching algorithms, including stemming and recall vs. precision
-
Search functionality and search bar design
-
Search results page design
-
No search results page design
-
Supporting revision
-
Key recommendations for updates
-
Persona demos
Industry citations included Information Architecture (Arango, Rosenfeld and Morville, 2015), Nielsen Norman Group and others.
Key Issues Include:
Search Bar Issues: The magnifying icon and search title in the top-nav is in a lighter color than the rest of the text in the nav. When a user chooses to search, the search bar pops up as a banner at the top of the page. This is easy to miss and can be distracting with the rest of the page still visible. Modals, including search pop-ups, can interrupt workflow and feel intrusive (NNG).
No Stemming: The site search does not seem to support stemming, "expanding a search term to include other terms that share the same root (or stem.” (Information Architecture, Rosenfeld and Morville, 229). Stemming would help “expand the user’s query…retrieving more detailed documents, meaning higher recall.” Example: “Counseling" and "counselor" come up with different search results even though this is a similar term - stemming is described as "Counselor" yields 2 pages of results, with "eviction and foreclosure prevention" the first result, "counseling" yields 4+ pages of results, with "housing counseling" as the first result. Similarly, "program" yields 11 pages + of results, and "programming" yields 3+. This indicates no stemming for the site algorithm.
Precision vs. Recall: The site supports recall over precision, this is indicated by the high number of search results. In searching for "homeowner mortgage resources," 6 pages of results came up but there is no number of resources at the top of the search results page. All of the results are shown here vs. specific ones related to the very specific topic the user asked for. The general page "For homeowners" came up in search results as the second result, which feels like a navigation page showing up in the retrieval process. Rosenfeld and Morville describe this as something that you should not do on your site (221).
No Orientation to User: When a user searches a term, there is no total number of search results found listed at the top of the page. NU Lab states, "Giving users a total match count… adds handy context regarding the breadth and depth of available content. For example, displaying a message like “Showing 15 results for “running shoes'” helps users understand the relevance and scale of information available. It can also help manage user expectations — if they see a higher number of results, they might be more inclined to refine their search. ” (NU Lab) Instead, a user has to search through all of the pages of results to have a sense of how many there are. To make matters worse, there is also no total number of pages of search results on the page, instead it just says "next."
No Query Highlighting: Search results do not include the section of the content of the result that matches the query. This information ideally should be bolded so a user knows where the exact content match is and can be more confident that it's a match (Rosenfeld and Morville, 237). Descriptive content (Rosenfeld and Morville, 234) would be helpful here to include to give a user a sense of what their search results are about. “If your suggested search feature will suggest popular queries that contain the user’s text anywhere in the query, it’s best to highlight the user’s query.” (NNG)
Dead End No Results Page: There is only a "reset" link which takes the user back to the main search page, which is already pre-populated with generic results that are not related to the search terms originally queried. The no results page is essentially barren, there is no guidance or options to the user, it's not friendly, it's essentially a dead-end with a link back to the main pre-populated search page. There is no human support or suggestions to refine your query or "did you mean?" questions to the user to guide search iteration. Ideally, there should be 1) a means of revising the search, 2) search tips to improve the search, 3) a means of browsing, such as through filters like buttons displayed for "resources for homeowners," "resources for renters" and 4) a human contact if searching and browsing doesn't work.
Key Recommendations for Improving the Search Experience
-
Functionality
-
Add link to separate search page on top-level navigation and remove pop-up search bar
-
Consider voice search capabilities to help with low visibility and limited mobility and improve accessibility
-
-
Improve search algorithms to match patterns for users
-
Include stemming, spellcheck, autosuggest and autocomplete to support partial searches and misspelled searches and enhance discoverability of site content for users
-
Include recent searches so users can go back to previous searches without having to remember or redo
-
Support natural language queries by users
-
-
Search Result Page Design Updates
-
Do not default to show all possible content matches on the “reset” page - include a blank search page instead
-
Add total number of search results at the top of the page and total number of pages at the bottom instead of just “Next”
-
Include search term in descriptive content of search result, bold keywords so users know the content retrieved is a match
-
Include “best bets” and overall, indicate to users how content is ordered on the search result page - is the first a best match, is it newest, etc.?
-
Add suggested queries and filters to the search page
-
Link resource title, not just the “Read More” link - this is confusing, especially because “Read More” does not look like a link
-
-
No Results Page Design Updates
-
Allow users to revise search on this page, include query suggestions based on query
-
Include tips on improving search
-
Allow users to browse - add filters or buttons with specific user type resource homepages linked (Example: “Resources for Homeowners,” “Resources for Renters” buttons)
-
Add human contact information in case searching and browsing does not work
-
Competitive Analysis
The project also included an extensive competitive analysis of three competitors and CHAI. This competitive analysis included:
-
Overview of site purpose and goals
-
Branding - mission, color, audiences and color theory insights
-
Functionality highlights
-
Examples of key features
-
SWOT analysis
-
Suggested improvements
-
Persona walkthroughs
-
Competitor comparison
-
CHAI site recommendations
Key highlights from the review of CHAI and one competitor, CHN Housing Partners are below:
CHAI (Comprehensive Housing Assistance Inc.) Competitive Analysis Overview
Site Purpose and Goals
-
Assist community members in finding available services offered by CHAI such as:
-
Housing counseling for preventing foreclosure, eviction, and for first-time homebuyers
-
Senior independent living support
-
Getting a home improvement loan
-
Renting from one of CHAI’s apartment communities
-
Technology skill building for older adults with the Myerberg
-
Increase community connectedness among older adults
-
-
Encourage donors to support CHAI programs
-
Provide community access to recent CHAI News
Branding
-
CHAI’S mission - “CHAI strengthens the fabric of neighborhoods connected to Jewish Baltimore, through housing and community development, so residents of all ages can thrive.”
-
Main target audiences: homeowners, renters, aging adults, secondary - donors
-
Brand colors are showcased below
-
What's missing from the brand experience?
-
The mission statement is not on the homepage, it's only on the About Us page.
-
What is the key differentiator from competitors? Why should someone opt for CHAI over other organizations in terms of volunteering, donating or participating in services?
-
What is CHAI's memorable slogan or tagline?
-
Color Theory for Green
-
Green is linked to growth, renewal, balance, and safety. (Color Psychology)
-
Green is associated with nature, health, prosperity, wealth and stability. Financial brands often use the color. (99Designs)
-
“Green is calming, reassuring and evokes stability…Green is also deeply tied to ambition, prosperity and growth…Muted olive? Grounded, organic and eco-mindful.” (Bluebird Branding)
-
“Associated with environments that satisfy basic needs like food, water, and shelter, green evokes a sense of security and abundance. It is often linked to the idea of a safe haven where one can find sustenance and protection.” (Color Psychology)
Functionality Highlights
-
Check eligibility for home repair and energy savings loans by filling out a form - link to application will be emailed to user if eligible
-
Enroll in a CHAI monthly workshop on buying a home
-
External links to Myerberg Center, Northwest Baltimore Partnership, Northwest Neighbors Connecting and CHAI Housing Communities (Senior Living, Affordable Family Housing and Disability Housing) to explore further
-
TAKEAWAY: Functionality is limited, mainly consisting of eligibility checks that still require waiting for an application. The site is mostly informational for users.
SWOT (Strengths, Weaknesses, Opportunity, Threats) Analysis
Suggested Improvements
-
INCREASE TESTIMONIALS
-
Limited storytelling currently to build emotional connection with brand. Focus more on the experience of engaging with CHAI
-
Promise quality, show good reputation
-
Where’s the emotional bond between volunteers and CHAI? People served through housing and community development programs and CHAI?
-
Add multiple testimonials across all important services offered
-
-
MAKE MISSION MORE TANGIBLE
-
What’s their key differentiator from competitors?
-
What is CHAI’s memorable slogan or tagline?
-
-
MAKE IA REFLECT BRAND TRUST
-
Currently, it’s unclear exactly who CHAI serves with their programs by glancing at top-level navigation structure. Navigation and resources offered are not broken out by user type. The homepage at least has user-centric CTAs based loosely on user types.
-
Internal links should not open in new tabs.
-
-
IMPROVE + ADD IMAGES
-
Many images on the site are low-quality.
-
Carousel with constantly rotating images on homepage is distracting and annoying. Either replace it with a hero image or, allow for ability to stop rotation and increase delay between images.
-
Add photos of home repair projects to show possibilities
-
-
SHOW SUCCESS METRICS TO BUILD TRUST
-
Number of new homeowners
-
Number of people who have been placed in homes of any kind (rent or own)
-
Number of people who have avoided eviction
-
Number of people who avoided foreclosure
-
Number of housing communities
-
Money saved with energy savings services
-
Number of home repairs conducted for homeowners
-
-
IMPROVE CONTENT
-
Increase user-centered messaging - especially around volunteering, loans, and housing programs. Organize content by user-type.
-
Include prominent, actionable CTAs and clearly explained eligibility requirements for services.
-
Eliminate buried content (example: volunteer page).
-
Improve accessibility (poor text visibility, acronym explanations, homepage distracting animations) and be consistent with direct phone contacts offered across pages (example: Affordable Family Housing page has no contact phone as there was in Senior Housing page)
-
CHN Housing Partners Competitive Analysis Overview
Site Purpose and Goals
-
Assist community members in finding available services offered by CHN Housing Partners, such as:
-
Accessing the Homeownership Center including Believe Mortgage, providing services for flexible lending options
-
Financial coaching with certified financial coaches for one-on-one support and tax preparation services for free
-
Other comprehensive services: energy services, utility services, counseling for eviction/foreclosure prevention/reverse mortgages and home repair program
-
-
Apply directly to CHN programs (such as a reverse mortgage, utility assistance) through a proprietary application portal for clients of CHN, check eligibility for programs (such as home repairs)
-
Enroll in a free class (example: financial and homeownership)
Donate to support CHN programs -
Provide access to recent CHN News
Branding
-
CHN’S mission - ““We leverage the power of affordable, stable housing to change lives and improve communities.”
-
Main target audiences: homeowners, renters, aging adults
-
Brand colors are showcased below
-
What's working well with the brand experience?
-
Short mission statement
-
Punchy tagline on homepage
-
Quantifiable impact information front and center on About Us page (see image below)
-
More user-centric top-level IA than CHAI
-
Striking and consistent color branding
-
Clear CTAs for applications
-
High-quality images
-
Easy to read formatted content (bullets, large text, high contrast) + testimonials
-
SWOT (Strengths, Weaknesses, Opportunity, Threats) Analysis
After extensively reviewing 3 key competitors, we compared them across key dimensions and prepared recommendations for CHAI based on the analysis of what competitor's are doing and how their sites appear to users.
Competitor Comparison Table
Key Recommendations for CHAI
-
IMAGES
-
Update images to higher quality
-
Add more images to enhance testimonials
-
Remove automatic rotation of images on homepage carousel, add pause or delay
-
-
MISSION
-
Workshop and implement an updated mission statement.
-
Add a sharper articulation of CHAI’s unique value - why is CHAI is the organization to trust? Clarifying its differentiator and adding a memorable tagline would strengthen brand clarity and emotional resonance.
-
-
INFORMATION ARCHITECTURE
-
Redo navigation to be more user-centric, focused on homeowner, renter and aging in place and tasks they would accomplish on the site.
-
Ensure that urgent services (like senior transit or foreclosure counseling) are no more than one click away from the homepage.
-
CONTENT
-
Add a clearer, prominent location for the "Volunteer" page for the site.
-
Collect more testimonials and add them to the site on various service pages.
-
Ensure that all program descriptions are written at an accessible reading level, keeping in mind users who are in an active financial crisis and cannot process dense text.
FUNCTIONALITY
-
Add direct application links with automatic eligibility verification for energy and home repair loans, consider automatic self-service application approval as well + consider application portal such as CHN’s
-
Consolidate forms for checking eligibility across programs so all applications start from one form and branch off.
-
Implement clear "Get Help Now" CTAs on the site
-
Implement Recite or a similar accessibility tool.
Accessibility Review
Next, we engaged in a review of site pages against key accessibility standards from WCAG 2.0 AA guidelines. We used the WAVE toolbar plugin to analyze if the site pages met standards and judged the page by each key accessibility criteria in the guidelines.
Below are images of both the WAVE plugin outcomes against the current CHAI Baltimore site and the accessibility analysis.
Key accessibility issues on the site homepage, as one example, that were uncovered included the following:
-
The rotating carousel on the homepage which does not have the ability to be stopped or paused by the user. This carousel is extremely distracting. The carousel violates guideline 2.2.2, which states "automatically moving, blinking or scrolling content such as carousels that last longer than 5 seconds can be paused, stopped or hidden by the user."
-
The search bar opens a pop up, which the screen reader mentions. This violates guideline 3.2.1, which states "when a page element receives focus, it does not result in a substantial change to the page, such as the spawing of a pop-up window."
-
The keyboard focus also does not include visual indicators of the main CTAs/service lists on the homepage (Apply for CHAI Rental Housing, etc.). The keyboard focus when tabbing goes through the main navigation with both a visual indicator (thin black box over the link) and the link changing in the left-hand corner of the screen, but once the tabs reach the CTAs, there is no visual indicator other than the links changing in the left-hand corner, which is very easy to miss. Once the user tabs through all of these CTAs, it jumps to a visual indicator (thin black box) again around the Read More Links in Recent News, and then proceeds to the footer with the dual visual indicators. This is not consistent and should be fixed, it violates 2.4.7.
-
There is also missing alternative text across the page that should be fixed.
-
There are issues with low contrast across the page and this should be fixed.
-
The "Read More" links also contain suspicious link text, which should clearly describe the destination and function of the link. This text is ambiguous and may not make sense of out context, causing confusion. It should be reworded so it's more descriptive of the destination.
Card Sorting
Next, we worked to test our proposed, updated information architecture structure with users. Our goals for our closed card sort were the following:
-
Validate our hypotheses for an intuitive IA structure
-
Utilize the summarized insights to restructure the navigation on the site
Preparing for the Card Sort
To prepare for the card sort, we followed these steps:
1. We reviewed our content inventory and the website to develop a list of page names in a Google Doc that represented our new proposed structure and linked the original pages to the new proposed pages. This helped us keep track of all of the pages to include in the card sort.
We had a good sense of what categories we wanted to include; while we did this we decided we would create a closed card sort as a result.
2. Then, we created a rough sitemap using our outline in Miro. We also laid out the navigation as a lo-fi wireframe to see what it would look like visually, this helped us ensure titles were not too long for the main nav.
We determined what content we would remove from the main navigation entirely and include only on the homepage or as a button in the nav (example: Preservation Project and Donate). We excluded this information from the card sort.
Next, we developed a higher fidelity site map that allowed us to easily view our proposed IA.
We specifically chose to test a task- or action-oriented structure rather than a user-type-based structure. We included “Senior Services” as a main user-centric section in this proposed IA because we saw there were many senior-oriented services on the site, but not as many clearly for current homeowners, first-time homebuyers or renters.
If we had more time for this project, we would have also tested a user-centric version with those main user groups with a different participant group to compare which approach better matched user expectations.
A possible issue with this user-centric IA we hypothesized would be the understandability of the distinction of resources for first-time homebuyers and current homeowners, this was one of the main reasons why we did not end up testing this structure originally with our limited time available.
.png)
Card Sorting Methodology
We decided on a closed card sort for the following reasons:
-
VALIDATION VS. DISCOVERY: We decided to do a closed card sort since we were confident in the labels that we came up with and wanted to focus on validating our proposed structure.
-
LIMITED PARTICIPANT CONTEXT: Some participants had limited context with the content of CHAI Baltimore and a closed card sort would make the exercise a little easier to understand with the limited context.
-
TIMING CONSTRAINTS, LIMITING COGNITIVE LOAD: An open card sort would be more mentally taxing for participants, we decided to avoid this given our short data collection timeline of only 3-4 days. With more time, we may have opted for iterative closed sorts and eventually a tree test to further validate findability.
Card Sorting Tool Selection
Next, we found a free software online called ValidateThat. At first, we wanted to use the industry standard tool, Optimal Workshop but it only allows you to view results from 2 participants with a trial license before paying over $2,000 for a regular business license.
ValidateThat has some limitations that we’d like to call out:
-
It’s a (mostly) free tool with no ability to add descriptors to card items -
-
*It’s important to note that descriptors would have still added cognitive load to the test and understandability of many items would have still relied on participants actually taking the timeand energy reading descriptors.*
-
-
We decide to do an unmoderated test due to timing constraints for the project, so we didn’t get any feedback about why participants moved something in a specific category because the tool, unlike Optimal Workshop, does not allow comments from participant.
-
Once we hit 4 participants it asked us to pay $9.50 for the first month and after that $19 to unlock analysis. We ended up paying.
Programming the Card Sort in ValidateThat
Then, we took our proposed IA structure and the categories we were most unsure about how users would sort and programmed it all into the tool.
For example: we wanted to especially test “Find Affordable Housing” as a category and where the “Senior Housing” card would most intuitively go (under Senior Resources or Find Affordable Housing?)
We developed an intro script that introduced participants to the activity and set expectations for time to participate.
We then shared the link with participants. Below is what both the intro script and welcome portion of the test looked like to participants and what the actual test looked like.
Our Participants
We received a total of 15 responses. This is the recommended amount of participants for a qualitative card sort to adequately identify consistent patterns in how users group information.
To recruit, we determined 6 main characteristics based on our personas and previou sextensive review of CHAI offerings and their website:
-
Older adults (65+)
-
Renters
-
Homeowners
-
People with disabilities
-
Baltimore-area residents
-
Individuals with young families
CAVEAT: Our participants were not only from the Baltimore area due to constraints around recruitment and geographic location of teammates
Analysis
ValidateThat provided several analysis tools, including common categories, groupings, dendrograms, and similarity matrices.
However, these tools were more suited for open card sorts and focused primarily on individual card grouping, which was helpful, but we needed more about how cards mapped to categories.
Since we needed to evaluate this card-to-category agreement, these tools were not very useful for our specific goals.
Below are some of the analysis tools that were provided, which would have been more helpful if we had decided on an open card sort.
Since ValidateThat did not easily show card + category agreement, we decided to do this manually.
We went through each individual response and counted when a card was assigned to a category. With this approach, we could easily see how often a card was assigned to a category across participants. Agreement over 9 participants was highlighted in yellow as high agreement. Based on our 13 participants, we defined 9 out of 15 as “high agreement” (60%)
This sheet gave us insight into what categories we should consider assigning to specific content labels.
After tallying all cards against categories based on participant responses, we reviewed our original proposed site map and noted when what we proposed was different from user expectations (green = match, red= mismatch)
Upon detailed analysis, we found that many key sections, including Senior Services, Find Affordable Housing, Avoid Losing Your Home, About Us, and Stay Connected, aligned strongly with our proposed structure. This gave us confidence that users understood and agreed with most of our labeling and organization.
High Card to Category Agreement (9+ Participants)
Key Insights
Overall, our hypothesis/proposed IA performed extremely well. Out of all tested items, 26 cards matched our proposed categories, and only 3 did not.
Most major groupings showed strong agreement, including sections like Stay Connected, Partnerships, and Home Repair Support. This meant we only needed to rethink placement for three areas of the site: Senior Housing, Home Repair Support for Seniors, and Funding Partners.
Despite these minor mismatches, we chose to maintain our overall structure with some minor changes given the performance of our proposed structure in testing and ideally would plan to test a user-centric version in a future iteration if we had more time.
Important Caveats
-
“Neighborhood,” “Senior” and “Partnerships” wording may have biased grouping into Areas We Serve, Senior Services and Partnerships categories, respectively.
Adding the descriptors “Senior” and “Neighborhood” within the name of the cards themselves improved clarity and added missing context, but was a workaround due to tool + context limitations. -
We ended up slightly mixing levels despite recommendations for the “Get Help Buying Your First Home” and “Home Repair Support for Current Homeowner” sections only. These two sections had a third level. We felt this was fine as an exception since the level of granularity was similar for these sections to the rest of the test. The majority of our sections did not have 3 levels, but we felt we needed to test these in order to get enough detail in a single test. Ideally, if we had more time, these would have tested each level in separate tests to avoid mixing levels.
Below is an image that shows how we needed to add the word "Senior" to "Housing (for Seniors)" to avoid confusion with a more general category "Find Affordable Housing."
New Site Map and IA
Our updated site map reflects a few key changes that came from our research.
We renamed the page Funding Partners to Our Supporters to reduce confusion with Partnerships. This is based on how users often put “Funding Partners” under Partnerships, likely due to the word Partner appearing in the title.
We also moved Senior Housing and Home Repair Support for Seniors under the more holistic title of Senior Services, since that better matched user expectations from the study.
Then, we developed a rough lo-fi wireframe of the nav so we could see how this would look with the new proposed structure.
.png)
Round 2 Iterative Testing - Ideal Next Step
The results suggest that a user-type-based navigation, with L2 organized by seniors, current homeowners, first-time homebuyers and renters, could potentially work well and even simplify the structure by making it more shallow.
However, we would need to test this to confirm usability and mental models of our users.
Due to time and participant constraints, we weren’t able to run a second round, but ideally we would validate this alternative structure through additional testing and a new set of 15 users who had not previously seen the test. We would then follow-up with a tree test to validate the best performing structure (more task-oriented or more user-centric).
Below is the possible user-centric IA that we could test if we had more time and resources available to us for this part of the project.
A possible issue with this user-centric IA we hypothesized would be the understandability of the distinction of resources for first-time homebuyers and current homeowners, this was one of the main reasons why we did not end up testing this structure originally with our limited time available.
.png)
Wireframe Development
Next, after restructuring the IA based on our card sorting results, wireframes were the next logical step. Wireframes are simplified layouts that show the structure, content hierarchy, and key interactions of a site without visual design details.
These wireframes illustrate CHAI’s experience from the homepage through Level 4 pages, mapping how a user like our persona Maya seeking first-time homeowner loan resources might navigate from top-level entry points into more specific programs and resources. They help demonstrate how the information architecture translates into a clear, task-driven user flow.
Annotations for important functionality appear to the left of each wireframe.
These are considered templates for all L1-L4 resource pages (falling under Programs). Due to lack of time, we were not able to create wireframes for every single page for the site. Many pages would remain similar (example: Careers, Staff and Leadership), so we focused on prioritizing the Program pages that would need a significant overhaul in design and functionality. The wireframes were developed in Balsamiq; I also included a clickable lo-fi prototype that link the wireframes together.
The image below is a deconstructed section of the new proposed site map which shows what steps Maya would likely go through to find the $10,000 First-Time Homebuyer Loan page. The prototype shows the user flow through these pages.
To navigate the site, Maya might enter in directly on the “BUYING OR REPAIRING YOUR HOME” page if she found CHAI through Google, but we can imagine she takes a longer route and enters CHAI directly from the homepage. She'd also maybe enter that page through the dropdown menu on the homepage.
We can imagine she took the longer route for the sake of showing each wireframe. First, she enters CHAI from the HOMEPAGE.
-
From the homepage, she'd click on PROGRAMS in the top nav -->
-
Then, she'd be redirected to the BUYING OR REPAIRING YOUR HOME page -->
-
Next, she'd click on the FIRST TIME HOMEOWNER HELP button -->
-
Lastly, she'd click on the LEARN MORE ABOUT THE LOAN button to land on the $10,000 FIRST-TIME HOMEBUYER LOAN page.
Below is the HOMEPAGE wireframe. Key changes to the homepage represented in this wireframe include the following:
Key Changes:
-
The homepage now includes a continually updated hero image, we removed the distracting automatically rotating carousel. This space is used for project highlights that are changed every 3 months based on the project that CHAI would like to highlight to community members, donors and volunteers.
-
Inclusion of mission and punchy tagline on homepage - this content was previously buried under “About Us”
-
Inclusion of metrics showcasing CHAI’s accomplishments
-
Inclusion of a new manual carousel (user-controlled) with testimonials from people CHAI has helped across programs - including quotes and images.
-
Guided questionnaire to help users find the right program for them, taking them directly to the page that is best suited to their needs as an additional wayfinding support element on the homepage.
-
Donate and Subscribe to Our Newsletter buttons are made more prominent
.png)
Below is the L1, PROGRAMS page wireframe. Key features of this page that are represented in this wireframe include the following:
Key Features:
-
This is a page that is very similar to the existing page within CHAI’s site, the main change is the name (“What We Do” vs. “Programs”).
-
This page acts as a “homepage” for all programs within CHAI.
-
It contains very short (max 1-2 sentence) descriptions about programs and links users directly to L2 pages with more information about the programs and testimonials from people who have used them.
-
The key difference from the current “What We Do” page are the CTAs. Instead of just “Learn More,” they are more descriptive and action-oriented.
.png)
Below is the L2, BUY OR REPAIR A HOME page wireframe. Key features of this page that are represented in this wireframe include the following:
Key Features:
-
This is a brand new page that is now represented in our new IA. This page acts as a “homepage” for homeowner resources and directs users based on their homeowner type to more specific resource pages.
-
The page has clear distinctions between first-time homeowner and current homeowner support services offered through CHAI’s programming.
-
Program-specific testimonials (quote and image) continue on these L1 pages to further provide detail to prospective users of CHAI’s services.
-
Other similar pages, such as “Find Affordable Housing,” “Senior Services,” “Avoid Losing Your Home,” “Partnerships,” and “Baltimore Areas We Serve” would follow a similar format. This is considered a template page for L2 introductory service pages.
-
This page also has a button “Special Repair Support for Seniors” that navigates users directly to the senior-specific page on this topic housed under “Help for Seniors.”
.png)
Below is the L3, GET HELP BUYING YOUR FIRST HOME page wireframe. Key features of this page that are represented in this wireframe include the following:
Key Features:
-
This page proposes including more descriptive content for users about the loan and grant that CHAI offers.
-
It also breaks apart the eviction and mortgage foreclosure pages from the “Housing Counseling” page originally on the site. This page showcases the workshops and counseling for first-time homebuyers directly.
.png)
Below is the L4, $10,000 FIRST-TIME HOMEBUYER LOAN page wireframe. Key features of this page that are represented in this wireframe include the following:
Key Features:
-
This page is a revamp with a more descriptive title of the “Homebuyer Assistance Loan” on the current site.
-
Since developing content was out-of-scope for this project, there is an in-depth description of the loan present on the page, right now represented by cat lorem ipsum.
-
Steps to apply for the loan are clearly explained, with an emphasis on the prerequisities of enrolling in the workshop and also scheduling a counseling session. The schedule link would take a user directly to a Calendly page to schedule with a counselor.
-
The “Check Eligibility” link would take a user directly to start their application and check eligibility at the same time. The application would be saved as a draft to finish and submit later if they did not get complete the pre-requisites of the workshop and counseling session.
-
The page also features more robust testimonials of people who received the loan.
.png)
Scenarios and Journey Mapping
Lastly, we developed journey maps to further enhance our emotional understanding of the scenarios our personas go through to get to CHAI and their experience using CHAI. This also allowed us to imagine exactly how a user would navigate through our new proposed IA.
Maya's Journey
Maya begins her search feeling urgency to find stable, affordable housing for her and her daughters, initially exploring homeownership but quickly realizing it’s not financially feasible right now. She shifts to rental support through the CHAI site, where she finds concrete housing options that align with her needs - affordability, proximity, and family-friendly environments. While she notes homeownership resources as something to explore further in the future, she leaves the experience feeling encouraged after identifying viable rental options and planning next steps toward securing housing.
Marcus's Journey
Marcus comes to the CHAI site feeling overwhelmed, looking for clear, actionable ways to prevent foreclosure after struggling with confusing resources elsewhere. He quickly finds more direct guidance on CHAI’s site, including a workshop and access to a housing counselor, which helps shift him from panic to focused action. By the end of the session, he signs up for both and leaves with a clear, step-by-step plan, feeling supported and more in control of his situation.
Evelyn's Journey
Evelyn comes to the CHAI site initially feeling isolated and conflicted, wanting more connection and support but unsure about leaving her long-time home. She explores senior-specific resources on the site such as technology assistance, housing, and social activities. She moves slowly and carefully through the site as she weighs what feels manageable given her vision limitations. By the end, she hasn’t made a decision, but she writes down a housing contact for one of CHAI’s housing communities - Woodland Gardens II and leaves with a clearer, self-paced path forward that preserves her independence.
Linda's Journey
Linda comes to the CHAI site feeling vulnerable after a recent fall, determined to make her home safer so she can continue aging in place without leaving a space deeply tied to her identity. She carefully explores home repair support, balancing relief at available assistance with hesitation about cost for repairs given her fixed income. By the end of the session, she feels cautiously hopeful and takes a concrete next step by calling a CHAI counselor to understand her options.
Evan's Journey
Evan comes to the CHAI site feeling panicked about a potential looming eviction, urgently looking for clear steps to protect him and his roommate’s housing. He quickly finds straightforward guidance on CHAI’s site and schedules a call with a counselor, helping shift him from anxiety to immediate action. As he continues exploring, he also discovers supportive disability housing options for adults with mental health needs that feel more aligned with his long-term needs, leaving him with both a short-term plan and a sense of future possibility.
Final Steps
This project was developed into a final deck which summarized our key insights and recommendations across the semester. It was then presented to the client directly via our instructor. Tiered recommendations were included for CHAi to implement within 6 months from now, 1 year and 2 years - these were evaluated based on impact to the user and estimated effort by the CHAI team.