Team HephaestusRedefining the apartment search experience

Final Write-up

1. Problem Statement
Searching for a sublet online can be a time-consuming, frustrating, and overwhelming experience. TheSubletter will improve this process and make it easier for users to find a place they want.

2. Solution overview
Our solution is a website that takes data from craigslist and presents it in a way that makes it significantly easier to search and navigate. Rather than needing to reload the page after every search, our page adjusts the results every time the user adjusts any of the criteria, so they can see exactly how their new search criteria affects the results. They can also see all the key information they need to make a decision without ever leaving the page. Our site won’t find a sublet for them, but it will make the process quicker and less stressful.

3. Personas and Scenarios
See up-to-date personas here.
See up-to-date scenarios here.

4. Describe the Final Interface Design
Functionality

Other than the fact that it’s loaded with fake data, our final prototype is more or less entirely functional. You should be able to use it as fully as you would any regular website to explore the results.

Interacting with our prototype is fairly straightforward. At this point, we have assumed that on a separate page the user has already selected the Boston area as their target, and the results of the current filter are shown on the main screen. We pre-loaded it with 1000 fake results. The user can then narrow these results using the search criteria, which are in the four main boxes.

You can use any of them in any order and their effect is instantaneous. If you leave any of them blank, it treats it as an empty search and does not filter by that criteria.

You can then click on each of the listings, which will display a side panel pop-out. This side panel will display the text of a listing we copied from craigslist. In our prototype, the text of the listing does not actually correspond to the listing you clicked on. (we have nine possible, and it just randomly picks one) When you click on the “Go to Craigslist” icon on the bottom, it actually takes you to craigslist in a new tab. In our prototype it always takes you to the same listing, but in an actual system it would take you to the one you were just reading.

Left unimplemented

We wanted to have the listings turn purple after you had already clicked on them, so that you could easily see which ones are new and which aren’t.

We wanted to make the location selector turn entire regions blue when you clicked on them, instead of using checkboxes.

An actual site based on our design would have a front page where the users could search for a particular city, which would have taken you to a page like ours.

An actual site would have been pulling live data from Craigslist. Ours just fakes it.

We would have put a more sophisticated back-end on the data validation. Right now it’s pretty easy to break.

Tools we used

We used HTML, Javascript (jQuery) and Ruby on Rails to implement our prototype. The benefit of this setup is that we could make an extremely realistic and functional prototype, all while learning real-world skills that would could use to apply in an actual project.

The downside is that there was a steep learning curve, and only one of the three people on our team had any experience with these technologies. There is also a high barrier of entry before anything real can be produced.

5. Design Evolution
Lo Fi Changes:

• Listing Badges and Icons:
  

  After doing preliminary user testing we found the badges and icons intended to make them easier to read to be unnecessary and confusing. Most users did not understand what buzz words like “Fresh” and “Hot” meant when applied to searching for sublets. As a result we removed these icons for the listings in our initial prototype and put the raw data on instead.

• “Extras” Tab:
  

  We included a expandable extras tab in our first paper prototype with the thought that users would use it to specify custom search criteria they had when looking for a sublet. We found after user testing that this tab was unnecessary and rarely used. Users said they did not want to limit the results displayed too much by specifying some arbitrary criteria. They instead wanted to see all the listings and sort through them on their own. As a result of this we removed the button as a whole from our search criteria and simplified our user search experience.

• Price Icon:
  

  In our paper prototype we tried to simplify the user experience when entering a price by having them enter a target price. User studies pointed out that it was unclear how this price would be used to refine the search space for price. They instead preferred the interaction of specifying a maximum and minimum price. As a result of these findings we changed our icon to included a maximum and minimum price.

  

First Prototype Changes:

• Error Checking and Data Validation:

  In the feedback from our heuristic evaluation we got feedback that the lack of error checking on our site disrupted the user experience. As a result we implemented some data validation and charged some input fields, like the bedroom selection icon, to prevent data from being entered in wrong.

  
• Listing Expanded Info:

  We got feedback from our heuristic evaluation that the additional info in our expanded listing tab was not very useful and did not provide important additional information like we hoped it would. As a result we modified the expanded listing to include a map with the listings location, a button to quickly email the poster, and a link to the original CraigsList listing.

  
• Listing Highlighting:

  As outlined in our Usability study we got feedback that it was difficult to see which listing was selected. As a result we changed the color of each listing to clearly show that it was selected.

• Auto searching

  Originally we had a search button which the user could press once they selected their search criteria. We felt this was disruptive to the flow of the search experience and wanted to make it more interactive. We changed our final prototype so that once any search category was changed a new search would be run with the newly specified criteria. We got comments from our users in our final usability tests that they really enjoyed the feature and thought it made the search experience much more fluid.

Our team found the low fidelity prototyping method to be the most valuable exercise to carry out our design. We had many initial ideas and the process of converting those ideas into to a physical format was a very constructive exercise. We were also able to see which ideas looked good and which looked ridiculous and got a general idea of the layout of our final site. We were also able to quickly see when things got too cluttered and when small inclusions were going to go unnoticed.

7. Division of Labor
Scott:

• Back-end improvements
• Usability Study

Matt A:

• Prototype layout/Front end redesign
• Usability Study

Matt B:

• The majority of the prototype work
• Usablity Study
• Update Hephaestus HFID Site