The following are 3 sketches that were used during the brainstorming session to determine how the information from the MLS website would be organized on a mobile device, in this case being Apple’s iPhone. For our search type, we choose Commercial Buildings.
- Our first design displays the information when you tilt the iPhone sideways. The display shows the search options and the result all in one screen. We felt that this design is too cluttered and the user will most likely hold the phone upright more often. Also finally the use of bandwidth would be taxing on the device since there would be a fair amount of information that would required to display quickly.
- Our second design uses icons to show the information such as building type, location, etc. This option might not be intuitive for the user because they will have to “connect” the information with the icon design. Hence, it might take longer for the user to make a decision based purely on icons. However, the icon metaphor can be used in specific sections.
- Our third design uses primarily text to display information. The design would be clean, efficient, and intuitive. Our third sketch is our design choice for developing the design.
Once we developed a draft visual representation, we improved on the design by using Adobe Photoshop to finalize the layout design. Our ideology behind the design was to keep the navigation as efficient as possible by providing the most important information only. The second design decision was to take advantage of the “screen tap” function rather than having the user type their selection.
The first design consideration was to create a short cut on the main screen of the iPhone. Since a person might use the website multiple times during the course of a day, week, or month, it would be efficient to access the MLS website right away.
The first version of the main screen designed seemed cluttered and in terms of download time could be heavy on the amount of bandwidth used.
In order to reduce clutter, we redesigned the button by using the Google Map symbol which would easily identifiable by users.
For the Building Type, we used to scroll function which would be the fastest and most efficient way to select the building type.
For the Transaction Type, we developed 2 different designs. The first design uses buttons, however, we felt that the buttons might not have the affordance for the user to realize that they can select the Transaction Type.
The second design has better affordance and the user can easily make their choice. Included in both designs is a back button which returns the user back to the main menu once they have selected their Transaction Type.
For the price, we again developed two different designs. The first design allows the user to scroll through a price range. Although the design might seem efficient, it does not allow the user to input a specific range manually.
Our second design, allows the user to quickly input a minimum and maximum price range for their search.
For the location search, the user can scroll through the provinces / cities or use Google Map to find their location.
Once the user has entered all relevant information, the search result is displayed in the following manner.
There are two options provided, the first is the property browse which goes through the details of every property. The second as displayed above is the quick browse which is based on price. We decided to use price only because for most people, price is the determining factor for choosing a property.
The above is the information displayed once the user has selected their property either through the quick browse or through the property tour. The user can quickly get directions to the property using Google Map and / or they can contact the realtor directly from the search result. You can also click on the pictures to view a larger version.
[...] of the MLS.ca website and a mobile app for the iPhone. View iphone App View MLS.ca [...]