Homii

Hommi is a website that is used for housing and housemates searching. The idea was first directed towards the needs of UCSD students of off-campus housing. Besides the usual filter features that user can use to search for their ideal housing environment, the website also offer housemate ‘filter’ that can help match user with their ideal housemates. We hope to help users to not only find the best housing, but also find a friend to live with.

This website was developed over the summer course session together with 5 other teammates. We started looking for idea and feel that this website might be a solution for many students’ problem. During the course of the course, we developed our idea through the creation of persona and storyboard, did several draft of prototyping, conducted user testing, and finally came out with our final product.

PHASE 1: NEEDFINDING

First of all, to better understand our market, the group came together proposing a Google survey. This would allow us to reach the appropriate audience in the shortest amount of time while also providing convenience for our interviewees. This would allow us to truly connect with potential users and better our understanding on providing the best product. Our main target for the survey filler is different kind of UCSD students. Some of the questions we asked:

  1. Which group do you belong to? (transfer, graduate, undergraduate)
  2. Where is the first place you go to search for housing?
  3. How much time do you spend on one house-searching website?
  4. What is the most important thing that you keep in mind when you look for a house
  5. What would you like to see in a house-searching website?
  6. What do you least like about searching for housing?
  7. Do you prefer to communicate through an apartment/housing agent or directly with the owner?

Throughout the needfinding process, we all agreed that we would look to send our survey to varying users so that we could better gather data that wasn’t skewed towards a certain direction. We would send it to users of different genders, educational backgrounds, as well as established households. In the end, both methods seemed to attract a wide variety of answers.

The result can be seen summarized in charts below

Not only were we using our survey to get a background idea on potential users, we also included a question that would better help develop our product. We managed to gather some information on what factors we should focus on or even include to better or product. This will allow us to consider what may be discarded or be on hold based off user feedback. From our short answer survey, we could also come to some conclusions about users not liking the long processes, cold calling, and even not receiving responses when looking for housing. From here, we will look into all our data received and adjust our website accordingly.

ADDITIONAL IDEA

After doing competitive analysis, we realized that there are many existing house-searching websites that tackle the same problems that we are trying to solve. We brainstormed how to differentiate our website from the others and make it stand out. We focused on our primary goal of helping students finding the perfect housing and see what similar problems we can tackle using our website.

The idea of finding the perfect housemates then came out! We recognized that finding the ideal housemates is as difficult as finding the ideal housing. People might love their house but not really the people that they live with. To avoid this problem, we want to try to match users with another user that have the same interests, hobby, or habit. Therefore, our website goal now is to

Help students finding the perfect housing environment and ideal housemates!

PHASE 2: PERSONAS AND STORYBOARDS

Now that we are done with the interview, each one of our team members are making their personal character based on the people that they have interviewed. Each character will represent different type of user and each user will have a problem that can be tackled through the use of our house-searching website. We focused on three different types of student: transfer, freshman, and graduate student.

Personas

Different personas and their problems are:

  1. Graduate student that needs a cheap apartment as soon as possible.
  2. Freshman that wants to find a housemate with similar interest as he does.
  3. Transfer student that wants a housemate that can understand his schedule and habit
  4. Graduate student that needs a quiet off-campus housing and also quiet housemate.
  5. A student that just moves off-campus and wants a housing that has many nearby facilities such as gym and grocery store
Storyboard

PHASE 3: FEATURES AND FILTERS

Now that our group knows what problems we are trying to solve, we discussed the features that we would like to implement on our website. We decided on several ‘must-have’, ‘should-have’ and ‘could-have’ features that all of our prototype must possess. Our must-have list includes:

  • Homepage: The main page that will appear when user first type our website address
  • Sign-in / Sign up page: The option for user to sign-up or sign in to their account (if they already have an account)
  • Housemate/Housing listing page: The list of listings that are available when user search for certain criteria
  • Profile page: User’s profile page where they can edit/add information about themselves.
  • Message feature : Used when user would like to contact other user on a listing that he/she is interested in

We drew a flowchart to visualize how user would navigate around the website. The flowchart is designed to accompany our must-have list so we know the essential features/pages that we need to have. This is how we imagine user will go around around website:

Flowchart

The group was also deciding what filters we should include on the website, both for finding housing and housemate.

Filter ideas

PHASE 4: PROTOTYPING AND USER TESTING

With the filter and features decided, each of the team members designed their initial lo-fi prototype using pen and pencil or Balsamiq. We were just trying on different designs before we decide on one. We implemented the same features and have similar flowchart (based on what we have drawn above) as to have the same website basis.

Prototype 1
Prototype 2
Prototype 3

When the class began, we teamed up with another team in order to cross-test our team design. On the test itself, we present the user with our low-fi prototype and let the user intuitively use it. User began by being presented by the sign in page. From there, we tried to give them as little information as possible on how to navigate around the website.

We prompted the user to tell us what they think they are doing and the function of each features on the page. We were taking notes on the features that the evaluators think are ambiguous or not sure about. We only response to their questions when they want to navigate to other page or if they are extremely clueless of where they are or what they are doing.

Some of the things that the evaluators try to do includes

  • Use the filters for housing/housemate searching
  • Update the search result
  • View listing profile and contact housing owner
  • Check and edit their profile page
  • Create their own listing
User testing time

User Feedback and Design Decisions

In the feedback we got from user testing, we gain a lot of insightful feedbacks on what our design lacks as well as what we have done well. Each comments were written on a post it and we spend some times to organize the feedback based on the page they are found (see image below).

Certain critiques/comments that came up more than once from different users were noted so we can make it a top priority of things that need to be revised.

User testing notes and revisions. More and more post-its!

Based on the user feedback, we have came up with our final low-mid-fi design prototype that we hope have improved from our initial design. We decided that although we used only one person’s design on the user-testing, we also incorporated some new ideas from other version of initial designs. We tried to take the best features that each design possess while keeping the features that most users like during the user-testing phase.

Some of the major changes include:

  • Sign up page — we decided to require more basic information from the user when they sign up to increase user’s credibility.
  • Creating listing page — We decide to add option to create a listing on the homepage.
  • Help page — We decide to add a help page to help the user use our website. The user will be able to contact the website admin (us) or read the Frequently Asked Questions (FAQs)
  • Saved Listing — A feature that we include in our ‘should-have’ that are requested by many users! Users would be able to save a listing of their choice for future use.
  • Map on homepage — There is now a map on the website homepage! Listing that appear on the search result will pop up as a red dot on the map.
Revised design for the Profile page

PHASE 5: FINAL PHASE

The group had two choices while deciding how to implement our final prototype. We were given the option to mock up our web app with software that could create a hi-fidelity prototype, or code the entire application. Being that we were a team of purely computer science majors, our team decided that the best way to approach this problem was to fully code the application. We have divided the tasks and set up a git repository in order to combine all of our work.

However, due to lack of time, we decided to just use Axure and InVision to create a high-fidelity prototype of our project. The quality of the design will still be the same if we are going to code it and we aim to maintain the quality of user interaction with the application.

Our homepage
One of the pages on our website

Here is a tour and demo on our website.

Hommi demo

A BIT FROM ME

Although this is my first time taking a Cognitive Science class, I thoroughly enjoy the class and the processes the team went under in order to finish this project. We took some baby steps when we first started this project, not really knowing what we are going to do, but here we are at the end of it. For me personally, the project made me realize of my interest in web development and design. I would love to develop my interest outside the scope of this project and improved my skill in using different tools and technologies out there. There is still so many things that we can accomplish for this project, but for now, I am happy with the experience that I get.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.