Assignment 4 – Brainstorming Information Designs

For this assignment we were asked to examine the existing MLS/REALTOR.com property search function for problems, and brainstorm some possible solutions for both the web and mobile devices. Then we were asked to choose the best two designs and to iterate them into a more presentable mock up.

First I looked at the current system and identified problem areas:

click for a larger image

1.

- Most of the menu options are superfluous, or at least layed out poorly. They take up too much space, and following the 80/20 rule, I doubt that 80% of the users use even 20% of the features.

- The highlighted portion in particular is very strange. Although prices may vary wildly in different areas, and the user’s budget may be more specific, there is just a huge list of canned values to choose from. This could be better handled with text boxes, or a slider bar with a max and min point that are both movable.

- It’s odd that the system clings to using the number of bedrooms and bathrooms as a metric for size instead of THE ACTUAL SQUARE FOOTAGE OF THE HOUSE/PROPERTY. Usually the size of the house might correlate to how many bedrooms it has. If I’m buying a house with three tiny bedrooms and a much larger house with two bedrooms sells for the same price, I want to know.

- This information doesn’t update based on the area the user is looking at which can return search results that include zero houses but does not explain why. This is useless. If there’s any houses for sale in an area, I want to know, even if they’re out of my price range.

2.

- What are these dots telling the user? They are all the same, so the only thing they communicate is location.

- Because the dots don’t communicate any information, seeing patterns in house pricing is nearly impossible.

- Mousing over a dot brings up a popup with some information on the property. The exact same information is being presented in the list on the right!

3.

- This list on the right has nothing to connect it to the location of the houses, which is odd considering that location is perhaps the most important thing buyers are looking for. Location, location, location.

- The system could include a graphic much like the one I added to make this illustration. Note: the house and the dot that I linked are not actually related.

4.

- My mistake, the dots do change colours. But what is the blue indicating? Can you tell? After a few minutes of confusion, I realised that the blue appears when you mouse over a house in the list on the right. The fact that it sometimes doesn’t go away is a bug with the system. This tiny change is almost impossible to notice, and the fact that there’s a bug that could potentially confuse users is unacceptable.

5.

- It’s pretty much just cluttered and ugly.

Brainstorming Process

Here’s some examples of my brainstorming process:

These first two sketches were for the website version.

On top, I started by making the elements of the site collapsible and a bit more streamlined. Because location is very important, I made the map the center of attention, having the map physically envelope the other elements.

The second attempt eliminated the home list sidebar altogether, relying on popups for each house. Because side by side comparison is sometimes necessary, I added a “drag here to compare” box that appears when users mouse over a particular home.

On top I kept the housing list, and attempted to have the search settings take up as little space as possible atop the list. The houses on the sidebar are linked to the map by use of rays emitting from the sidebar onto the location of the house.

The next adds pictures and pop-open information tabs. The tabs may be useful in comparing houses together, and the pictures of the houses are always present because to some users the look of a house is a very important feature. The pictures exist over the actual location of the house on the map.

The first two mobile brainstorms relied on two screens.

The top was designed without the use of a map, which can be tricky on a cell phone. The interface returns a list with pictures and brief information. Here as well I’m focusing on location, price, and size as the most important elements of a house.

The next design identifies the location with a map, and allows the user to filter data with search terms. While browsing each possible house, the search box is replaced with the house information, and the location is made obvious with a bubble tail.

Click for larger image

For a while I experimented with having the actual dot of the house location indicate more to the user than just location. I developed two sliders, one for price and one for size that would change the appearance of the actual dots, allowing the user to see information quickly without having to browse dozens of search results manually. I even tried to combine them into one meter, but I decided it was too confusing to have one meter indicate two separate functions, although it’s technically feasible.

Mobile Device Mockup

This mockup focuses on the three most important things about buying a home: Location, Price, and Size.

The user finds the location they’d like to find a home in using a map, such as Google Maps, which are already widly used on platforms lik the iPhone. The area they are looking at comprises the bounds for their search: the values for the minimum and maximum of both the Price and Size bars are the actual minimum and maximum price of the homes for sale in the area they are observing. These values update on the fly as the user pans and zooms the map. This gives a quick overview of the price range of the homes in the area and allows the user to narrow their search quickly.

Once they think they’ve found an area with homes in their price range, the user can fine tune the price slider to get a better idea of where the homes they can afford are located. The white marker indicates their desired price. The dark green just below this marker indicates homes that are very close to their desired price. Red homes show houses just outside of their price range, to give an idea of what they could purchase if they were willing to go a little higher in price. The black indicated homes far outside thier price range. The green values fading into yellow give an idea of other price options in that neighborhood.

The size in square feet is also very important to buyers. By adjusting this slider, they can get a feel for the size of the houses in the area, and more importantly, how size relates to price. The size of the houses is automatically mapped from largest to smallest to the size of dots from largest to smallest. The user sets the slider to their desired home size. Every house dot on the map has a black circle around it that indicated the user’s current size request. This ring gives context to all the homes: the user can quickly see which homes are larger than their requirement but equal price, or if a home is too small and more expensive.

A red dot that extends beyond the black ring is a home that is larger than required, but just outside the price range.

A yellow dot that is small and not touching the black ring is a small home that is much cheaper than the budget.

The ideal home is one with a green dot that fills the black ring.

If they want more information or a picture, they can poke or select a specific dot and a popup will apear with all the particulars of that specific house.

UPDATE: WINDOWS VISTA WIDGET MOCKUP! AAAAH!

After talking to Alex today in class about being sick over the weekend, he asked me to continue with the assignment and create a desktop based mockup. I decided to focus on a desktop widget for windows Vista that incorporated my previous mobile concept. This model centered on the decision making process of buying a home, namely the comparison of competing homes.  I developed a folder popup that would contain the information about a property, as well as showing where the property met or did not meet the requirements of the user.

For example, if the user wanted a home that was over 2000 square feet, but the home only had 1900, the floor space field would be coloured Red to indicate that it did not meet the requirement. This allows the user to quickly glance at a property and see how many plusses and minuses it has, aiding the decision making process.

Click for larger image

I have a few things I’d like to change: there’s no close button, I’d like clicking the address in the property info field to center the map on the property. As well, I didn’t mock up the settings pane that would acompany this. I like the idea of a settings pane that would be visible only when needed: when people are searching for a home their requirements for the home don’t change every time they visit a website, so if they visit the Realtors.ca website a lot they’ll always be typing in the same info. Can we not do this to people?

In addition, Alex mentioned some critiques of my original mobile design:

- The cirlces aren’t very helpful: they could be houses instead, and better than a circle that encloses the house the house icon could fill up with a colour to indicate floorspace.

- The colours don’t work aesthetically (I agree, and probably spent the least amount of time on them)