US DEPARTMENT OF HOUSING & URBAN DEVELOPMENT
HUD'S MISSION IS TO CREATE STRONG, SUSTAINABLE, INCLUSIVE COMMUNITIES, AND QUALITY AFFORDABLE HOMES FOR ALL.
BACKGROUND
The United States Department of Housing and Urban Development (HUD) is a department that offers the following major programs:
Community Planning and Development
Public and Indian Housing Office of Fair
Housing and Equal Opportunity Policy
Development and Research (PD&R)
Government National Mortgage Association (Ginnie Mae)
Healthy Homes and Lead Hazard Control
Partnership for Advancing Technology in Housing
"More than three (3) million households will receive Section 8 rental assistance this year."
GOAL
The goal of the research is to clearly identify the issues with the current home page and information provided about the Housing Choice Voucher Program (Section 8) with the current HUD website.
CHALLENGE
HUD is a needed resource for those who do not have access to affordable housing. The current design of the website is not user friendly and can prevent those who need assistance from receiving it easily.
With this information, the aim is to redesign the home page and task flow of the Housing Voucher Program (Section 8) so that those who need this service can find application information easily.
ROLE
Low fidelity Prototype, Hi-fidelity prototype, Usability Testing, and UI Design was done individually. Research, Analysis, and Information Architecture was done with one more member of the team.
TOOLS
XD, InVision, Figma, Photoshop, Miro, Google, Zoom
RESOURCES
www.hud.gov, Contrast Checker WebAim
DURATION
4 weeks
USER PERSONA
WHY THE USER VISITS THE GOVERNMENT WEBSITE [WWW.HUD.GOV]?
Our user- Kristen, is living paycheck to paycheck and must provide for her five-year-old daughter. She has been living with her parents, but they do not live in a school district where she wants to send her daughter for kindergarten. Unfortunately, she does not make enough to pay rent for an apartment within the school district she wants her daughter to attend for kindergarten. She wants to apply for a housing choice voucher to better support her daughter and become more independent.
.png)
KRISTEN'S EXPERIENCE WITH HUD
We observed that Kristen uses HUD’s top navigation bar the most to accomplish her task. She feels overwhelmed by going through all the written content to find what she is actually looking for. And she is frustrated that the website has so many external links, which makes her feel lost. It takes her a lot of clicks and goes through a number of screens to achieve her goal.
DEFINING USER PATH
HEURISTIC EVALUATION
Conducted a heuristic evaluation of the HUD website and identified problems in the following categories: Appearance of the website, content, navigation, and efficiency. Also conducted a color accessibility test, the result was fair- 84% and there were no color contrast issues
.png)
GUERILLA TESTING OF THE WEBSITE
Things We investigated through Usability Tests
Do users understand the purpose of HUD?
What information are users gathering from the home page?
What information are users gathering from the dual top navigation?
Are users able to easily identify where they are on the HUD website?
How are users finding information about the Housing Voucher Program (Section 8)?
Are users able to easily find contact information for their local Public Housing AGency (PHA) to apply for the Housing Voucher Program (Section 8)?
NOTES FROM USABILITY TESTING
%20(1).jpg)
.jpg)
TASK GIVEN TO USERS:
Identify the challenges with the homepage and information provided about the Housing Choice Voucher Program (Section 8) with the current HUD website.
METHOD:
Moderated Usability Testing
PARTICIPANTS:
5
RESULTS:
Users did not complete tasks with ease and were tempted to use search. Even upon landing on the right page, they struggled reading the content and could not locate the exact information they were looking for. Users repeatedly forgot what they were finding and asked for help.
FEATURE PRIORITIZATION MATRIX
.jpg)
RED LINING AND ANNOTATIONS
INFORMATION ARCHITECTURE WITH HELP OF
CARD SORTING AND CATEGORIZATION
.jpg)
SITE MAP
WIRE FRAMES FOR MOBILE AND DESKTOP
UI STYLE GUIDE
USABILITY TESTING PLAN FOR HI-FIDELITY MOBILE PROTOYPE
NOTES FROM USABILITY TESTING MOBILE PROTOTYPE
RESULTS
After the usability testing, one can conclude that this prototype serves the following:
Easy to understand the purpose of the website and it’s pages.
User Friendliness and Readability
Icons, symbols and images are clear and coherent.
Iterations made after testing:
On the carousel indicator, add arrows on feed for easy tapping, instead of swiping left.
Change the heading of the page with respect to the content and category user selects.
Change the position of the location icon on the homepage to make it look less cluttered.
RWD - HIGH FIDELITY PROTOTYPE - DESKTOP AND MOBILE
RWD MOCK-UPS FOR DESKTOP
KEY TAKEAWAY AND FINAL THOUGHTS
Lack of information about HUD made it difficult to redesign.
Time is a huge constraint
Prioritization of every category can be influenced because of a lack of thorough research.
It is very important to test with actual users, esp lower-income earners.
In the future, make iterations on the footer.