Guide - Rupesh Vyas
For a detailed overview of the project, please click on the documentation below.
Document on ISSUU: http://issuu.com/anupriyaarvind/docs/studio_3_housing_guide_doc
Document on ISSUU: http://issuu.com/anupriyaarvind/docs/studio_3_housing_guide_doc
Snippets from the Brain-storming board
Mapping of residential/rented locations most frequented by NIDans
Looking at the target audience
Identifying type of users and percentages in terms of primary, secondary and tertiary audiences.
Identifying type of users and percentages in terms of primary, secondary and tertiary audiences.
A schematic of the percentages of primary and secondary users that the interface would cater to.
Persona and Scenario Building
This exercise was done a little differently keeping in mind the objectives of the project which was to get real time data and so, the personas were developed by merging and categorising the needs and scenarios in which those needs would arise.
This exercise was done a little differently keeping in mind the objectives of the project which was to get real time data and so, the personas were developed by merging and categorising the needs and scenarios in which those needs would arise.
The personas were developed as four distinct types of users.
Looking at Taskflows as Approaches
Understanding Grids
After trying out many grids, the final grid chosen was scrollable 12 column grid with elastic gutters to help in responsivity.
Grid specifications: 1280 px by 900 px
1280 px by 450 px (single scroll down/up)
After trying out many grids, the final grid chosen was scrollable 12 column grid with elastic gutters to help in responsivity.
Grid specifications: 1280 px by 900 px
1280 px by 450 px (single scroll down/up)
Column width: 54 px
Gutter space: 45 px
Gutter space: 45 px
Creating the Wireframe
Wireframes were created based on the site map and then the grid was fitted onto it, thereby creating the skeletal framework of the interface.
Wireframes were created based on the site map and then the grid was fitted onto it, thereby creating the skeletal framework of the interface.
Creating the Visual language
The visual style for the site was created in terms of color and type selection, iconography and the identity of the web interface.
The visual style for the site was created in terms of color and type selection, iconography and the identity of the web interface.
A collection of icons created for the interface.
The Final Web Interface
Below are a few screenshots of how the interface looks like and works. For a detailed task flow map, please look at the documentation link posted above.
Below are a few screenshots of how the interface looks like and works. For a detailed task flow map, please look at the documentation link posted above.
The homepage has an introduction video explaining what is the interface all about and how would it help.
The site has three main categories - Need a place, Know a place and Give up a place.
For security, any action on the interface opens a Login page which has multiple options for logging in.
The single scroll shows the map, distances of your choice of house from the NID campus, other facilities available around your choice of location and an interactive web banner on information about housing, rent agreements, bokers and brokerage laws, accommodation do's and don'ts etc.
The site opens as a grid of various housing options tagged by icons which are denoted by special functions as taken, available and available soon. The categories of houses available can be reset based on on the users' need by clicking the given options.
Clicking on a specific option opens up pop-ups with information on the house directly from the owner and amenities available shown as icons.
More details on that option can be look up, queries can be asked, contacting the owner is also possible and Live chat option helps save time incase the owner is online.
The site also provides an option to tag places and then compare them later on through the compare tags function your personal dashboard.
Give up my place option provides back-end data for Need a place option. The features are similar to Need a place with additional features as uploading photos, type of house and other specifications.
Know about a place feature is for third party persons such as brokers and house owners who are not a part of the NID community or NIDians who have heard about accommodation from somewhere else. It is an additional security feature to enable accountability and reliability. It is denoted by an icon of an exclamation mark in a house to help better identification.
The dashboard has the user's personal profile and other features as new posts, personal posts and compare tags.
The Interface in its context of use
