Project Date | Oct 2020
Platform | Mobile
Type | Course Project
Role | UX researcher, UI Designer, Branding

Overview

Housing is one of the many stressors that people deal with daily. Competition is fierce and many of the choices out there are less than optimal. Open Doors' aim is to help users find housing that satisfies all their needs and additionally, giving someone that has an empty room all the necessary tools to get the job done quickly and easily.

Problem

Efforts to search for new housing or someone to rent an empty room takes time from people's day. Reading hundreds of housing posts for the perfect match, or trying to find the perfect roommate takes time away from the things you find the most valuable.

Solution

Create a system that helps people find rooms or roommates that have plenty of detail about the space or person that helps match all their needs while being able to quickly set up a time to view the space or meet the person.

Research & Define

Surveys & User Interviews

All the surveys and interviews were done online or over the phone. The information collection was from a pool of 20 surveys and 4 interviews

Insight

After user interviews and surveys many users shared a few key quotes. “Not having a life” and “Faster response time”, both show the frustration users have with the amount of time house and roommate searching takes.

Competitive Analysis 

The market for any new app we build has tons of competitors. Each has its pros and cons as to why someone would use them over another. I set my sights on 3. One that many would say dominates the market and 2 smaller ones. Everything that I could analyze about each one will help me find ways to streamline the user experience for my product. 

Craigslist
Spareroom
Roomi
Craigslist

It's a well know website that gets a ton of traffic and you don't need to sign up for an account to post ads, but a lot of the ads look fake or are missing key information.

Roomi

All the ad cards are very detailed before you click on them and they show local transit options that are near the house which some users rank high on their wants list. Although Many of the questions during sign-up could be removed to decrease user fall off.

Spareroom

The posting process is super helpful with a progress bar as well as tips on what the user should post to increases messaging to their ad. The major downside is this app isn't well known like others on the market, in addition you have to pay to push your ad to the top of the page.

Personas

User Stories

To establish features I used the research gathered to create a list of user stories that would be used as task for future testing. This list would give better insight on both users high priority wants and needs.

  1. Users need to be able to sign up for an account so they can find a room to rent or someone to fill it.
  2. Users need to be able to search/filter for cities/rooms to live in so they can find a place that meet all the needs they require. 
  3. Users need to be able to send/reply to messages they receive so they can receive more information about the space or person
  4. Users need to be able to post a room that is available for rent so they can quickly find someone to fill the space.

Information Architecture

User flow

I asked myself what steps would each one of my users Tina and Greg take after their onboarding. After sketching and some iterations I was able to build a shared final user flow.

Site Map

After user flows were set, a site map was made to show a visual backbone of the product.

Wireframes

Unsure of what would be the best route to take for my wireframes I used the crazy eights method to allow my mind to freely think of a few different layouts for the home screen and onboarding

Mockups

Working to keep in line with my project goal of quickly helping users find rooms and post their rooms, I focused on showcasing all the elements that mattered. 

Flow of user messaging for available room.
Flow of user with available room setting up times and dates to showcase room
Flow of how a room ad is posted.

Lo-fi Testing

After receiving some feedback on possible design changes I moved on to the lo-fi testing to search for any missing pain points users might have. 

Test Results?

During the making of the hi-fi mockups from the lo-fi mockups I lost all the results from my lo-fi testing.

This meant I had to heavily rely on the feedback I received during the lo-fi mockups and the results from my hi-fidelity testing to improve my design.

Branding

Name creation

The first step of my branding was to decide on a name for my product. During my mind mapping session 3 key words stood out.

Simple, welcoming, and intuitive
“The simple action of opening your door to welcome a stranger into your home, something so intuitive, it's second nature.”  

Logo

As someone that never had the itch to sketch as a kid or ever thought of myself as an exceptional drawer, building a logo always gives me a little bit of anxiety. I came across a few different designs that I thought about remixing but couldn’t make them feel like my own. In the end, I came up with something that I feel like I can truly call my own.

Colors

Focusing on the whole welcoming and simple theme I decided on this teal and orange combination for my main colors. Neutrals and earth tones for my greys and background, and dark blues for text.

Typography

Text was tested on all main backgrounds to meet WCAG level AA guidelines.

Visual Design

Hi-fidelity Prototypes

Building upon the framework of the lo-fi wireframes I keyed in on keeping important elements easy to find and using color to direct users to the information that’s high priority. 

Flow of user messaging for available room hi-fi version 1
Flow of user with available room setting up times and dates to showcase room hi-fi version 1
Flow of how a room ad is posted hi-fi version 1

Testing & Iterations

I tested 15 users following the same testing guidelines from my lost lo-fi testing, to help dial in the UI further. With all the collected feedback from user testing and senior designers, I was able to come to a final design. One that feels more intuitive to the user and gives a customized experience that hits Open Door’s goal of helping people find housing and roommates that meet their needs. 

I used filter chips in place of the checkboxes. This improved the interface visuals and made selecting filters easier for users with large hands. In addition, the added check icons give better visual feedback to users that are colorblind when something is selected.

Final version of the messaging system for users that have ads posted. The calendar and time slots were updated to have a similar styling to what Airbnb uses on its platform. The helper message was changed to a button after testing results found that 2 users were unsure how to remove the message. This version gives better visual clues on what this element's key feature is used for.

Final flow for a user that has found a room they want to message another user for. UI was updated by removing the filter icon and replacing it with the word filter. Testing proved that 30% of user were unsure what the icon looked like when given a task to update their set filters.

Flow for a user that has a room that needs to be rented. Each page give tips on what should be posted, so the ad looks more authentic.

Onboarding flow for a first time user.

Thoughts & Future

This project was something that I held close to heart. I know what it's like to only have a week to find housing and my goal as a designer is to always build things that help improve someone's life. What I also find amazing as a designer is that every project is like its very own mystery novel. We spend so much time trying to decipher what our users say so we can create things they want.

Machine learning wasn’t touched on much but is something I’ve thought about implementing more. Sending a list of newly posted housing that matches users filters would save them tons of time. Something similar to what Linkedin does for job searching. Another change would be modifying the onboarding process, like removing the profile creation at the beginning. Let the user explore what the app is capable of and once they find a room they want to message tell them they need to build a profile before that can be done. This should help decrease user fall off during onboarding.