Background
Designed and developed by a team of Code for DC volunteers, Housing Insights is an open-source, civic tech project which aids the preservation of affordable housing in Washington, DC.
Problem
Those fighting to preserve affordable housing in DC have to make difficult decisions about where to spend resources. These decisions are made more difficult by incomplete data about affordable housing and a largely reactive preservation process.
A web app that combines essential information on all subsidized affordable housing in DC with relevant outside data such as public transit, property tax assessments, and neighborhood characteristics to make it possible to consider many relevant factors when prioritizing and coordinating work.
Duration
2–6 hours/week for 5 months
My Role
I led a rotating UX design team of about 4 volunteers—most of whom had no design experience—from research through the early stages of design.
First Steps
When I joined the Housing Insights project, the design team had already started working on a prototype. However, I quickly discovered that most of the design decisions that had been made up to that point were based on assumptions rather than research. As I started asking more questions, I found out that while a few user interviews had been conducted, many important types of users had been left out. Learning this, I persuaded the project manager to let the UX team to do additional user research so that we could better understand the users for whom we were designing.
Discovery & Research
User Research
I taught the other UX volunteers the basics of planning and conducting interviews, and then we interviewed 12 potential users about their roles in affordable housing. I used the results of these interviews to create four user personas: Stephen, a policy advocate and our primary persona, Janice, a policy maker, Maureen, a tenant advocate, and Kathleen, a developer.
Competitive Analysis
We researched several tools that were similarly focused on city data, but we also looked at other web apps that make use of maps with complex layering and filtering of data. Elements from several of these competitors provided us with some inspiration for the layout and interactions of our design.
Design
Feature Prioritization
After research was finished, we listed out possible features for our MVP (Minimum Viable Product) and then narrowed down the list to only the most essential features based on the goals and needs of our personas.
User Flows
I created user flows for filtering and searching for buildings from the main page, which would include a map and list of all affordable housing buildings.
Rough Sketches
Each member of the team individually sketched out possible screens for the interface. Together, we reviewed the sketches and then combined the best aspects of each into one design.
Some of our early sketches
Wireframes
With the basic features and layouts settled, I created wireframes from sketches using Moqups.
Two of my wireframes showing collapsible panels with map data layers, filters, and buildings
Conclusion
Unfortunately, I was not able to continue working on the project after making those wireframes. However, after I left, the team continued the process we started together, and after a few iterations of designing, prototyping, and testing, they launched an initial version of the Housing Insights web app a few months later.
Ready to make something great together?