Overview
Summary
At the second annual ATX Diversity Hack-a-thon our team created a more efficient way for queer, trans, and gender nonconforming people to connect and share safe housing.
Roles
User Researcher and Designer
Date
October 21-23, 2016
Impact
Won the Mark Dean Best UX/UI Design Award presented by IBM Design.
Problem
A Fundamental Need
Having access to safe shelter is one of our most basic fundamental needs. Your home is base for being comfortable and secure and everyone has to be able to find a safe place to live in order to grow and thrive.
For queer and transgender individuals, finding suitable living arrangements can be a big challenge. LGBTQ people are subjected to many issues when it comes to finding safe housing, such as discrimination and facing higher percentages of violence and abuse in their homes. To help alleviate these difficulties we set out to find a more efficient way for queer, trans, and gender nonconforming people to connect and share safe housing.
Process
Starting with the User
We started this project by trying to understand our users by doing research into the current ways LBGT people typically find housing. We found that numerous disparate and unorganized Facebook groups or Tumblr pages like Trans Housing Network were commonly used.
To find important word usage we ran an algorithm that ranked the importance and frequency of the words. The results from this were used to create a word cloud to visualize the results.
Word cloud from Tumblr
Identifying Patterns and Needs
After looking at the current ways in which people looked for housing we started to identify certain patterns and key needs that needed to be addressed.
Many posts started with the person identifying their orientation and how they identified. A typical example looked like this:
“I am a queer black female from the Midwest looking for a temporary living space (2 months max) somewhere on the east coast or eastern southern states.”
Respecting the individuals identity was ultimately going to be a key aspect in our solution.
In numerous posts we found that the individual was trying to escape violence and was in dire need of finding a safe space to live.
“There’s nowhere for me to go because everything in Massachusetts for domestic violence victims are completely full and the New England area is overwhelmed as well with so many victims.”
We had to find a way for our users to find what they were looking for in a fast and efficient way because time was of the essence.
Other living needs and preferences were noted that came up often, like alcohol friendly, cigarette free, location, cost, and dietary habits. These preferences would be key in finding homes that the person would fit in and be comfortable at.
Understanding and Empathizing with the User
Our team gathered all of our assumptions, drawing upon personal experience and empathizing with people we knew, about what it would be like for a LGBT individual to find housing. Once we had a comprehensive list we sought to validate these assumptions.
Gathering assumptions
To gain a better understanding of the users we did an empathy mapping exercise. We wrote on post-its what a person looking for housing would experience and sorted them into four categories: See, Hear, Feel, Think. After we exhausted all our ideas, we began sorting the individual notes into groups based on similarities.
The groups that appeared, revealed deeper insights into what a person looking for housing would be going through, what life was like for them and what they valued. After we recorded these findings we did the same exercise with a person looking to fill a room. This was a little bit easier because the group collectively had a good idea of who this person was and ended up with a lot of responses.
Empathy Mapping
Goals and Behaviors
With the new found insights from empathy mapping, we were able to create a persona for both unique users. One for a person looking for housing and another for somebody offering a room. We included their names, age, how they identified, a quote that helped personify what they might say, 3 goals and 3 common behaviors.
These Personas really helped flesh out who the end user would be in order to keep them in mind when making design decisions and to help empathize with them.
Personas
With our personas in mind we did a six frame storyboarding exercise to flesh out what the process might look like and to find any pain points that stood out in the process.
Storyboard
Solution
Design Decisions
The research methods we used, uncovered lots of useful information that would aid in creating a clearer vision of the whole process a user would go through while using our app. To match this process, we created a user flow of the steps the user would see. The user flow illustrated each of the user’s steps in the app so we began hand drawing wireframes to match each screen.
Wireframes
We chose to design the interface with a mobile first, native app approach because our users were more likely to have a mobile phone than access to a computer and we could scale the app up at a later time if we found that would be necessary.
All of our wireframes had been drawn out, so we began creating page mockups using Google’s material design framework. We chose this because these were well designed, commonly used UI elements that would be easy for our developers to implement quickly with pre-made libraries.
Material Design Mockups
UI Pivot
While these wireframes were recognizable and easily implementable in React, we decided to give the app it’s own personality and see what it would look like with a more unique UI framework.
New UI Screens
Sign up Made Simple
We analyzed what information would be needed during sign up and only kept the most useful and necessary inputs. The first page has the user input a username and phone number. To ensure privacy and safety the profiles are set up with a made up username rather than the user’s real name and do not use any kind of profile picture. The next step is basic user info to populate their profiles where the users are able to input their own gender pronouns to fit their identity. The final step touches on housing needs and preferences that will help filter housing situations that would be more preferable.
Sign up Screens
A Match is Made
The two main functions are searching and then conversing with the potential person to make the deal official so we wanted to allow for both interactions to be accessible from the main screen. When users log in, the main screen of the app has a feed of scrollabe potential matches at the top and message previews at the bottom. When selected, the card expands showing more information and if the information is to your liking, a message can be sent directly through the app. 
‘Matches’ Screens
Last Minute Logo
As we neared the final hour of the Hack-a-thon we realized we did not have a logo yet. I quickly began sketching ideas for a logo down and periodically showed them to the team to get feedback.
We decided we wanted to keep the logo as inclusive as possible and ultimately decided to have the logo represent our primary themes with a house as the background and a key in the foreground. The house represents the purpose of the app as a housing finder and the key signifies the overarching goal of safety. The same colors from the UI were used in the logo to maintain consistency. As the final minutes of the Hack-a-thon were upon us, we submitted our app and newly created logo for judging.
QT Housing Logo
Results
The Final Product
Using InVision we created a prototype using the mockup screens and created this video going through the full app, all the way from sign up, to messaging between room seeker and provider and everything in between.
Our team presented the solution outlined above, to the rest of the hackers and judges. After the presentation many groups complimented us on a job well done and on our thorough execution.
In the end the judges deemed our app to have the best UX/UI and we walked away with the Mark Dean best UX/UI prize plus all of the bragging rights!
Future Endeavors
Going forward there are a couple of avenues to really improve this app and take it to the next level. Contextual inquiries and an interview with an actual user were two things we were striving to obtain to start our research but we were unfortunately not able to find a candidate to participate. Validating our prototype with users would also give valuable feedback into our design decisions. If we could get both sets of users to rank which matching criteria mattered most to them it would ensure the best matches possible. And finally working with community leaders and organizers would help spread the use and adoption of this tool.
Personal Takeaway
Going into this project I knew very little about the intricacies of the personal struggles and issues in the lives of the LGBT community, which is partly why I wanted to participate in this project from the beginning. In the end, I gained a perspective that I never would have had I not participated. This project was a prime example of why cultivating empathy for the end user is the only way of developing relevant design insights to ultimately create a successful product!