Housing Database Digital Product
Michael Walker designed a digital product that helps New York City residents evaluate the quality of property listings.
Housing Database Digital Product
I designed a digital product that helps New York City residents evaluate the quality of property listings.
Around 62,000 people move to New York City every year. I want to design an experience that will help them evaluate apartment listings before they sign a lease. I will consider factors such as apartment condition, location, and building history.
This is a personal project I initiated
I was the sole designer for this digital product
I did research, flow diagrams, wireframes, usability testing, and final designs for this digital product
Design an experience that will help users evaluate an apartment listing before they sign a lease
Thoroughly investigate a the design of a digital product from ideation to final designs
Document all steps of product creation as a way of explaining my design process
Michael Walker Digital Product Designer
Background research to understand the problem
White board exploration of the problem
Analysis of similar products (usability audit)
This is a self-initiated design project inspired by my own experience finding housing in New York City. I researched a problem, identified a solution, built a prototype, and wrote this case study in a limited time span.
My initial idea was to redesign a NYC housing records database to make it easier to use. Before rushing into a product redesign, I took a step back and did research on the problem at hand. This helped me understand my target audience, anticipate the challenges they face, and dispel my own misconceptions about the NYC housing market. Here are a few brief articles I found to be helpful:
My research showed that people moving to New York consider factors such as cost, apartment size, number of roommates, and location but don’t always evaluate quality or safety of apartments. Redesigning the NYC building information site might help people access this information. This project is intended to be a brief study, but I was able to identify options for further research:
Set up an appointment with a NYC Planning representative to better understand housing challenges
Interview a NYC real estate agent to learn about how they discuss quality with potential tenants. Ask them what tools they use to check the quality of a listing
Interview friends and colleagues about their experiences finding housing in NYC. Ask them about touch points, pain points and the emotions they experience as part of the process
Launch polls on sites such as the Facebook Gypsy Housing group to understand how renters evaluate the quality of listings. Ask them what tools they use to evaluate apartments
Evaluate current digital products that help users find apartments in NYC
Observe what users do when navigating the current NYC Building Information Site
With background information in-hand, I was ready to start working through the problem of helping New York residents evaluate apartment listings.
White Board Exploration
I explored the problem on a white board to better understand the experience of someone looking for an apartment. This helped me focus on the needs of provisional personas, the scope of the solution, and content that would be most useful to users. After I finished the exercise I saw that I could meet user needs by redesigning the NYC Building Information Site. The next step was to take a look at the current NYC Building Information site to understand how it works and identify areas for improvement.
What is the NYC Building Information Site?
The NYC Housing Preservation and Development Building Information site allows anyone to see public records data about NYC apartment buildings. An example of the site is shown above.
Why is the NYC Building Information Site Valuable?
The site contains up-to-date information about the condition of NYC apartments that can help renters decide whether or not to sign a lease. While the content is relevant and useful, the UI makes the site difficult to navigate and may prevent users from accessing the information.
What Usability Problems Exist?
The current site caters to multiple audiences. Pages show information relevant to renters, landlords, and government employees.
The site is not adaptive in any way. It does not work well on mobile or on small or large browser windows.
It is difficult to locate a building using the search feature because:
House names and numbers do not correspond to addresses that are used in real life.
House entry is not intuitive because it does not follow standard US address formatting.
Acronyms and government registry numbers are used to describe potential search matches.
If no matches are found, a line of text is returned saying no matches were found. No suggestions for improving the search are given.
There is no type hierarchy on results pages. Type is small and presents accessibility issues.
Filtering results is not an intuitive process. The only prompt given asks users to “Find Apartment#.”
Results are not scannable. Results may be difficult for non-native English speakers to digest quickly.
How Can Usability Problems Be Addressed?
Create different views of the content to suit the needs of specific audiences. (To address the overall project goal and limit scope, I decided to explore the needs of potential renters.)
Update the site to be mobile-first
Enhance the search filter in the following ways:
Allow users to search for a building using a map of the city. When a user hovers over or presses a listed result, highlight the corresponding location on a map.
Create an open-ended search or use standard US address formatting for entry.
Avoid use of acronyms. Only show information that is relevant to a specific audience.
Provide the user with search revisions if no results are returned based on criteria.
Increase the size of type. Break out classes of type using different type styles.
Make complaint history access the main goal of the renter-centered experience. Use visual cues other than hyperlinks to indicate the presence of filters.
Use colored icons paired with text to make the complaint list scannable. Include a synopsis of building problems on the search page and on the building results page.
By making it easier to access public housing data, users should be better able to understand the quality of listings they are viewing. A side effect of redesigning the site is that there will be more pressure on landlords to improve the conditions of their holdings. If potential renters can check for complaints on-the-spot during a showing, they can avoid renting apartments with hidden problems. Landlords will have to fix hidden problems in order to fill rooms.
Initial research showed that searching an apartment to check for quality needs to be introduced as a crucial part of the house hunting process.
In order to achieve the results above, the redesigned portal will have to be highly publicized. The redesign alone won’t pressure landlords to update property, increased culpability for violations and loss of profit will.
The portal exhibits extreme lag on mobile devices. Technical changes beyond UI redesign will need to be made so that potential renters can use the portal on-site during an apartment tour.
Wireframes and Flows
Background research, a clearly defined problem, a provisional persona, a provisional user journey, and succinct project goals made it easy to wireframe a user journey. I quickly sketched out wireframe designs based on the flow diagram I made during my white board exercise. I then recreated the flow digitally.
My first digital sketch of the user flow was complex. it helped me identify journey segments that could be eliminated or consolidated. To simplify the flow, I focused on the needs of users. The provisional persona I created while white boarding was most interested in learning about the quality of their unit, not the overall building. To accommodate for this, I categorized violations and renter feedback under units. I made it possible to go to a unit directly from search results and eliminated a search suggestion screen by making suggestions inline with results. I also made it possible to save only individual units (and not buildings) in order to make it easier for users to access saved unit listings.
The resulting flow represented a more focused user journey and clarified what information would need to be shown on each screen. with this done, I was ready to draft mid-fidelity mocks of the app.
Mid-Fidelity Mockups and User Stories
Working through mid-fidelity mockups helped me identify additional functionality that would be helpful to users. These additions are detailed in the descriptions of three hypothetical user journeys below. The first explains how a user could learn about unit violations. The second shows how a user can view information about a building. The third journey follows a user as they share a saved listing. Other journeys are possible, but these three explain the basic features of the design and align with the needs of the provisional personas I identified.
In journey 1, a user is researching a unit before they schedule a viewing (1A). The user enters an address and suggestions are shown (1B). The user accidentally misspells the street name, causing suggestions to disappear, but the user is still able to complete the search by pressing enter. On the results page (1C), an alternative spelling suggestion is provided below the search box and a map shows the user where listings appear relative to their current location. The user then identifies the correct building and uses a dropdown to navigate directly to a specific unit (1D). On the unit page, the user can see open violations, reviews from current and previous residents, and resolved violations that may have occurred in the past (1E). The user can click on a specific violation to read more about it or share it with a friend (1F).
In Journey 2, a user is on-location viewing several apartment options in one building. They want to view information about all apartments at the address where they are currently standing. After turning on their cellular data, they choose to “Use Current Location” from the home screen (2A). Their wifi is spotty, making it so that their exact location cannot be determined. the system returns listings near their general location on a map and in list form (2B). The user clicks on a listing card to see current and past violations for the building shown (2C). They can filter the listings using options such as “most recent” and select a specific unit for more information.
In Journey 3, a user has previously researched several apartments and buildings and wants to share information about their favorite building with their roommate and family members to get feedback. They select the “Saved” option from the top navigation bar (3A). They are presented with units and buildings they have saved (3B). Even though they did not create an account, the system remembered their saved units. A line of text gently suggests they create an account so they don’t loose their list in the future. The user clicks on a saved building and goes to the building listing (3C). Because there are no open violations, the open violations field is filled with an illustration and a notice explaining that the building does not have open violations. the filter options for the open violations are shown in an inactive state because there are no open violations to display. The user can still view building units and view or filter any past violations for the building. They can share the building listing with others.
Status: I am still in the process of completing this personal project.
Next Steps: I will do observational usability testing with paper printouts, create high-fidelity mocks, and summarize results.
More Case Studies
I designed an app that helps 22,000+ users share and access business information on the go.
I designed purpose-driven UI that makes a complex tool simple to use on both desktop and mobile.