Helping people realize their dreams.
The Community Home Trust is the primary source in Chapel Hill, North Carolina in helping people find and keep affordable housing.
The challenge was to suggest and implement tools to help users navigate the hurdles of qualifying for and purchasing affordable homes.
The outcome streamlined the home buying process, offering help at all points. More importantly, it empowered users to realize that their dreams of owning a home were realistic. Something many lower-income home buyers never thought possible.
Role
UX Designer
Goals
Help users realize their goals of homeownership
Timeframe
08/2021 - 10/2021
The current website caused confusion because of several usability issues.
Problem:
User feedback indicated that people didn't have an overview of what the home buying process involved. There are no clear steps to take and help is difficult to locate.
With no budget or accessible user-base, I looked to housing forums and user groups to solicit user interviews/survey participants.
No comprehensive overview of the steps involved or how they relate to each other.
Difficult to find help.
Users are left stranded. Where do I find these resources?
Where can I seek help?
A large number of navigation elements.
There were over 60 navigation choices on the site.
Design:
How might we help the user feel supported and informed throughout their home buying journey?
From user feedback, the website presented materials in a disparate manner:
-
The user has no idea what step of the process they are in.
-
No easy way to find help if they have a question.
-
No feedback as to whether they are on the right track.
-
No updated status if they are even eligible for affordable housing or loans.
​
But what if there was a module that could guide the user step-by-step through the buying process, offering help at each critical point, as well as letting you know along the way if you are qualified for the affordable housing or loan and ways to get help if needed?
I experimented with a couple of different systems that would include all necessary information for each step of the application process. I started with modules, but discovered that these were not suitable for the amount of information I wanted them to contain.
I experimented with using modules which Users would click back and forth, but realized that these were not suited for larger bodies of information.
Using an accordion type of design afforded more room and expandability.
Using the accordian design, there was more available area to include a "DId you know", "Common FAQs" and "Help" information.
One User concern was knowing where in the process they were at. The accordion afforded a view of what was coming up, what step they were at, and made it easy to go from section to section.
I also experimented with tabbed navigation, but opted for the accordion as it felt more "old school". Users were filling out a series of forms so I wanted to have a feeling of paperwork. Something that felt comfortable and reliable.
Item A
Item B
Item C
Encouraging users "Did you know?" section which could include successful Homebuyer stories, and other encouraging info/tips.
Pop-ups give a warning if they are not eligible, giving reasons, FAQs concerning items, and where to reach out for more information and help.
Current application flow
New application flow
Users would have to seek help and answers to questions on other pages, causing frustration and chances of abandoning their application.
Users wanted to be informed, encouraged, and able to access help along the way.
"Did you know?", "Pertinent FAQs and "Help links/phone #'s
would be on each page.
One revision I made when executing the hi-fi comps, was on the actual application form section. The section became extremely long, and so the application was split into several pages. This shortened section made the application more manageable for the user.
Feedback from the 5 testing participants was overwhelmingly positive. Overall they appreciated the information presented on the sidebar.
One concern was that most (4) did not think the different sections were connected. This would be an immediate issue to work on.
.png)
Colors were added to emphasize sidebar help
Numbers added to add order sequence