In one of my UX courses this Spring, we performed a review of the Housing Authority Baltimore City website. This process involved six user tests, with eye tracking software. Based on the results of the study, which you can find here. I’ve created wireframes and a basic mock-ups for a redesigned home page and more intuitive breakdown of the two housing programs they offer.
A caveat: because this was a concept project based on an academic exercise, I didn’t purchase and plugins or assets for my mock-up. There are elements you’ll notice — like the wordpress.com in the footer, for example — that would not be present in a true client project and I haven’t build out some layout and navigability functions.
I developed these sketches based on feedback from users. You can see all of the feedback in our presentation slide deck, but I’ll outline some of the changes I made and why in these layout mock-ups I made.
Home Page, Above the Fold
The current home page (left) has these big beautiful images right off the bat. They display one of four values, which are randomized as they load. I love that we’re seeing both a representation of the user and a declaration of value, but there are two issues at play here. The first is that there’s no immediate information; you have to scroll down for that. The second is that you get one value displayed prominently and then a list of three more words. You wouldn’t know that all four are a value and a priority unless you visit the page many times.
The changes I’m recommending (right) keep the things that are good, but give a clear set of next steps and equal weight to each of the four values. In a live, paid site, the carousel of images would be automatically rotating and provide a tip-point pop-up explaining each value, when clicked.
Home Page, Below the Fold
The next item on the original homepage (left) is a large news item. It’s a basic update that does not require an image and takes up a great deal of prime real estate, so I added a news room banner (right), that can be used to link to stories that require more detail.
Immediately below the news story, the current site (bottom left) has a set of eight blocks, followed by a by-the-numbers style info graphic. In the blocks, the four colored blocks pop the most. All of the blocks with colors contain background information, which is important, but folks coming to this site looking for quick action aren’t going to find what they’re looking for hidden amongst these blocks.
My recommendations (right) take advantage of the vivid colors, but use them to focus folks toward immediate services. This gets folks to action items immediately, and gets folks curious about the Housing Authority to more information quicker.
In addition to getting to the by-the-numbers section faster, my recommended layout gets the up coming events to the top of the page without sacrificing the placement of top level background.
Currently, folks navigate to the two primary pages — public housing and housing vouchers —from the menu bar at the top, but there’s no explanation about which is which. Folks also have to know what HCVP means off the bat. Those pages ( public housing, left) provides an explanation of public housing, but the eye is drawn to the map of properties — certainly not a first step in the process of learning about and applying for housing — and then four other programs. Subsequently, is the public housing applicants guide. This link takes you to a PDF document that outlines quite a lot of helpful information, but is hard to read and is not searchable.
Those concerns are addressed, but my main concern is that there’s no way to know what the differences are between the two programs or what you should be researching further.
My recommendation (right) is a landing page. It acknowledges that there are two programs, provides a clear link to next steps for each and, after a scroll down, provides and explanation for each program. A frequent concern outlined in the slide deck is that it’s not initially obvious that the voucher program and its waitlist are currently closed (or why). I used the news bar I added to announce that the program is closed and I added an explanation in the section about public housing (below right).
You can see the full mock-up on these two live mock-ups.
Like I said, the sites are for illustrative purposes only and are missing major elements like navigation, headers, and footers — but take a look at the flow! Here’s the original homepage and the mock-up of my recommendations and here’s the original topic page and the mock-up of my recommended landing page.