Wednesday, December 28, 2016

OUGD504 - Design for Screen - Site Pages

PAGES

Landing Page

The landing page takes inspiration from sights such as sky scanner and train line, where users can't progress their search until the desired filters are selected and completed. 
Users can be as vague or specific as they please and then progress to the search results by clicking the search button. 

There is also a link to the login page where users can access their saved searches and reminders instantly if that's the reason they were coming to visit the site.


To enhance the User Experience and user interface of the page and make it more engaging I created a moving background featuring images of famous Leeds landmarks, students enjoying their new homes and examples of the properties featured on the site. 

The background was made using iMovie for Mac. I edited the video so the images would seamlessly blur into one another, making the look of the home page more engaging.

In the search bar itself there are several different examples of user interface including auto-complete, sliders check boxes.

Location: In the location box users are prompted to type the name of the location allowing for a range of endless possibilities. Autocomplete then suggests the rest of the name or address you may be typing in allowing for accurate results. I took inspiration from the way some platforms suggest the rest of your address when you're filling it in such as google maps this feature is called 'autocomplete'

No. Bedrooms: This feature is a drop down menu of the range of options available, saving space and allowing for accurate results. 

Price: The price uses a slider, allowing users to accurately and quickly select a specific price range they desire. As budget is a key feature when it comes to finding student housing, some students may be within an extremely specific budget of say £72 a week exactly. Vague price ranges would be no good in these circumstances as even a few pounds would be too expensive. This is why this feature allows students to select the exact amount they want putting them fully in control. 

Features: The feature is a checklist of all the most important features students might be looking for. There is a chance to refine the search even more in the 'edit search' menu on the next page.  

Search Results Page


The search results page features:
  • The global mast head
  • Option for Map View or Photo View
  • Number of results matching your search criteria
  • drop down menu with option to re-arrange search results in order of: Price Low to High, Price High to Low, Relevancy (highest % matching your search result) and star rating highest to Lowest. 
  • Images of the houses which you can flick through by hovering your mouse horizontally backwards and forwards over the image. This removes the need to open up a new tab to view the images, making browsing easier and more fun. 
  • Option to save the house to your my roof page, allows you to compare and save searches in one place. 
  • Average star rating from previous tenants. 
  • Price of each house with and without bills included. 
  • Number of times the property has been saved and number of viewings the property has had indicating popularity.
  • % matching your search criteria from the filters you selected.
  • Name of the property. 
To alter the search criteria at any time simply click on the side bar to the left of the screen with a magnifying glass icon and expander arrow. 



This opens up all of the filters from the previous page plus more options you can select such as move-in and move-out date and which letting agents you want to go with. Here is how all the filters would work if expanded:



Update: I decided to add other filters including star rating and re-arranged them into order of importance and what is most relevant / useful to students when they are looking for a house, with price first.



I also added the google rating next to each letting agency to give students an idea of who is reliable before committing to letting a property from them. 








To update filters and return to the results page click the tick on the right hand side of the screen and the pop up menu shrinks back into the side bar on the left of the page. 



Switching to map view alters the page to look like this. The benefits of this feature are that you can choose your house via location, enabling you to see it's proximity to places like university and town. The page allows you to quickly flick through the images of different houses and favourite the ones you like the look of for later. 


Individual House Page


Once a property has been selected to view from the search results page it will direct the user to this page.

First section of the page features: 
  • Images of the house at the top of the page as a priority with navigational arrows to click through the pictures. 
  • Button to add house to favourites on 'my roof' page
  • House Name / Number and Street Name
  • Average star rating and link to reviews from previous students (which is located further down the page)
  • Number of saves the property has had since becoming available.
  • Number of viewings the property has had since becoming available. 
  • % matching your search criteria
Second section of the page features: 
  • Price of house per week with and without bills 
  • Brief description of the house, keeping it short and snappy
  • Basic details of the house in list form
  • Added Features of the house with corresponding symbols for international students to understand more clearly. 



Third section of the page features: 
  • Map showing the location of the house
  • Average star rating from previous tenants
  • Statistics of the ratings in bar chart form
  • Example of a review from previous tennant
  • Option to view more reviews. 
Final Section of the page:
  • Link to 'book a viewing' which opens a pop up window where you can leave your details and write a note requesting a booking which emails the estate agent that the property belongs to. This conversation also shows up in the messages section of the 'my roof' page.


Below that you will find: 
  • Logo or image of the corresponding letting agency
  • Average star rating from google reviews
  • Link to the google reviews of the agency
  • Contact details including email address, phone number, street address and opening times




My Roof Page 

Once you click the Login link a pop up window appears giving you the option to sign in or create an account.



Once you log in it takes users to the 'My Roof' page. 




This page features: 
  • All your saved searches in one place, allowing users to easily compare the houses they like. 
  • Reminders of viewings you've booked and when payments such as signing fees and deposits are scheduled with letting agencies.
  • A list of your house mates where you can easily share and link properties with one another. Any house you favourite automatically goes into their saved searches as well, making sharing houses fun and easy and eliminating the need to screen shot and share or link via messaging services. 
  • Messages of your correspondence with different letting agencies so you can keep track of your viewings. 
  • A dream house section where you can save your chosen filters and search criteria allowing you to be notified when suitable houses matching your criteria become available. Notifications go into the chat area. Option to edit this criteria at any time.
  • An option to share and send your favourited searches to your housemates.  

No comments:

Post a Comment