As I will be designing for web browsing, the interface needs to be universally adaptable and transportable from screen size to screen size.
Developing fluid sections //
Do not feel these suggest 'fast'. In addition, the overlay type detail negates from the quality of the images, not adding to them. Often people will take more on board from the image of a property than the words and description alongside it, this means that the photo should take priority, and perhaps a hover over animated feature, to tell the user where it is etc.
I have prioritised iPhone browsing, at 1334x750 to increase the usabiliity of the browser for people searching on the go.
Revised Wireframes
Landing page and Dropdown Menu
Search Results and Advanced Search
Recently Viewed and Favourites
- Same kind of flow to promote consistency, yet different enough so not to get confused by the two
Me page and Best of the Week.
Property Page -
The property page contains all of the relevant information, as well as links to the relevant supplier.
3 Different drop down menu options. I felt the need of a large button is imperative, so when on the go you are not getting stressed out by having to tap on tiny little buttons. By allowing a larger surface area, more pixels per page are being covered, giving a larger surface area for you to tap, taking the physical act of browsing to a larger, free'er space, rather than tight and confined. Also three different ways of implementing the colour scheme. The green was just something I was playing around with, which was not featured in the previous Hexadecimal Code pallet, but rather an adaptation of. These vividity of green was far too much, going back towards the childish websites aimed at students, rather than a quality service/aimed at both students and young professionals a-like.
Landing page with simplified Global Masthead. I decided to remove the 'Me' icon and replace it with a section on the dropdown menu.
Dropdown menu in #B5E5C6, featuring large buttons and free hanging feature. I opted for the more muted turquoise (over green), so not to look gaudy and overtly 'student'. When the website takes you to alternative pages, the remainder of the menu compresses, placing all of the emphasis and decision making on these few options. In addition, by compressing the navigational options the viewer can see everything on that one page, removing the need to zoom or scroll.
Instead of incorporating a back button or home icon on every page, the logotype 'HomeFind' also acts as a home button, and the 'Me' acts as a personalised homepage breaking down your requirements, with clear links to lateral sites customisable. When going backwards on pages, swipe the screen left to go back to the previous page at any point. Alternatively, use the menu to navigate around the page, or return to the landing page.
Once you have entered your location, move in date and max budget, you will be taken to this page, with the need to scroll. To increase interactivity with the website, the user can hover over any of the images to bring up the address, alternatively tap on the icon to be taken to its personal page. If you are wanting something ultra specific, wether in area or facilities, the user can alter and filter the search criteria to better match their needs.
By tapping 'show all on map', the properties will be listed as housing icons, colour coordinated with the letting agents main brand colour. This will allow the viewer to zoom and see what properties are the best location or more convenient for them. This also lets the viewer visually see what local amenities are in the area, as well as public transport links.
Filter Search Criteria
This gives just as many options as on the web browser, condensed to a smaller format. Alternative shades of #585454 and #333333 to increase readability at a glance, as well as separating and giving a difference to each row of criteria. To select any of the criteria, all the user needs to do is TAP, and it will illuminate subtly and the toggle switch on the left will turn from Grey to White.
When the dropdown menu is activated on any page containing busy information, so not to overpower the viewer the background opacity gets reduced to 70% maximise colour balance of the drop down.
Recently Viewed
I opted for a slightly more personal style here, incorporating Orator STD once more to show the most important information- where it is/what it's called and how much?. After spending the past month frantically house hunting myself, these are definitely the two main things the user will be considering in a hurry. To give a sleeker quality to the overall display, I extended the use of Monochrome rather than greens to suggest a higher quality approach, possibly more eye catching to the young professionals looking for something a bit more special. The user can scroll over the information to bring up what it includes (icons etc), or tap to be taken to the property page. Here, the user can also access their favourites (via the golden star), or filter their recently viewed properties by cost or popularity. When you're viewing properties, you see so many its easy to forget which ones you wanted to take further and which ones you didn't. By having a 'most viewed' filter, you will know which ones have your interest as they will be in order- most viewed by you at the top, least views (or 0 views) at the bottom.
The images are clear and fit slightly smaller than a full screen view, giving a clarity and room to breath to the viewer. I opted for this larger layout than a smaller, perhaps icon based layout, for the effectiveness at small screen. The viewer needs to see all the information clearly, not be zooming around whilst walking or scrolling past things because little information is given.
Favourited Properties & Best of The Week
Continuing from the layout of 'Recently Viewed', large image icons are provided with personalised text overlaid. When the user favourites a property, they will be given the option to re-name it to something more memorable. This personalised name is what will feature in your favourites, as well as an option to edit the property further, contact agents/share on social media, and view a full cost breakdown. Favourites are accessible through 'Recently Viewed' or through the 'Me' page. Looking back, it would of been a good idea to incorporate a favourites function on the Landing page, or even incorporate it on the dropdown menu.
Best of the week searches letting agencies all over the country, to bring you the top deals. Without that being said, it is questionable wether the viewer will fully understand what this function is for. Looking back, this should of been incorporated as a tagline/subheading rather than keeping the aesthetic minimal and simple. A map function is used to quickly and clearly show where properties are located, as well as the density of each cities rentals. I have only focused on selective area's for now, yet if the website was fully up and running, it would feature housing points all over the country. The user can further filter down these deals, so only feature content within their filtered requirements.
Me Page
Me is a quick and easy tool to breakdown all of your search criteria, see your favourites, a full map view, cost breakdown and easy access to contact letting agents. If you are letting a room, this would also feature here as well. The envelope in the top right hand corner is a shortcut to your HausFind emails, as well as the phone being a shortcut to your contacts. Contacts include letting agents, any private landlords you have registered interest with, Haus Find's customer service information and even the contact information of your future housemates (if applicable).
To personalise the page, you have the option to upload a photo and accurately save all your criteria to be re-used in the future.
When you want to see all of the properties together in one go, tap on 'Map View' and a exact location map of the area will appear. This will show you where all the properties are in relation to each other, local amenities and the city centres. Using two fingers to zoom, the user can get a closer look of the map, facilities near by and see shops/takeaway/bar icons start to appear. Furthermore, by tapping on any home icon, the information of that page will flash up on this page, where you have the opportunity to go through to the full property page, save to your personal Google Maps or Favourite for later. The colours of each icon are derived from their Agents brand colours. If no letting agent colours are available, or it is a private landlord, the icon will remain black for legibility.
The use of the large magnifying glass can be picked up and moved acting as a proper magnifying glass, when the user is on a desktop with a mouse. Alternatively, when double tapped (on any device), the user can use this tool as a 'Search' bar, acting the same as the quick search feature on the landing page.
The cost per week breakdown is shown here as a Pie chart, yet can be altered to whatever view the user is most comfortable with. The total cost per month (or p/week) is calculated from a total breakdown of costs (week or month view can be altered in 'Me' filters)- similarly to comparison sites such as comparethemarket.com. The total cost is worked out by Rent + Additional Bills (Approximate running costs) + Deposit + Admin Fee's ÷ Length of tenancy = TOTAL cost P/M. This figure will most likely be slightly larger at first than it will be in real life, and when you further go into the Cost Breakdown, the user has the option to add/remove things, such as TV Licenses, Council Tax and payment schedules.
See a full working prototype at:
No comments:
Post a Comment