Add to Collection
Tools Used
About

About

A web based intranet portal to tackle the difficulties in communication within a housing complex.
Published:
Heather Housing - Interface Design
The objective of this project was to create and propose a system that would simplify the interaction that happens between the residents and the committee of a housing complex at various levels. 
 
A web based intranet portal was proposed that would serve as a platform for the residents and the committee members to communicate with each other (and within each other) in a clearer and more precise manner.
The system not just acts as a mode of communication, it also keeps a record of all the data and makes it available to the residents, keeping the manadement system transparent. It reduces the wastage of paper as the data can be saved as soft copies.
 
The process included research about the various user groups and creating user personas. Understanding task flows and simplifying them. Making paper prototypes for quick User Testing. Making changes to the protypes and keeping the users in the feedback circle before making the wireframes and finally the interface.
The images below provide a glimpse of the major features of the interface. 
(NOTE : The images used are only for representational purpose as it was a classroom assignment.)
 
 
A few of the wireframes from the set of wireframes made during the project.
LOG IN PAGE : The Log In page has been kept extremely simple and straight forward. There are two user categories - Resident & Committee. The following images show the interface meant for the resident members of the society.
HOME PAGE : The home page uses the same background as the Log In page to maintain consistency. The surname of the user is at the top to acknowledge that the account belongs to the right person. The details of the user - Flat number and primary phone number is also given under the name. It can be editted from the Account settings. The menu bar has all the relevant buttons that the user can access.
A fair amount of space is given to the soceity's newsletter that acts as a platform for the users to connect and share various articles / albums with each other. It has been discussed in detail later...
NEW MESSAGE : When there's a new message, it appears on the MESSAGES button as a superscript showing the number of unread messages. Clicking it gives a drop-down menu that has the basic details of the message and also gives an option to view Sent Messages or Create a new message. The unread message appears with a grey highlight.
When the new unread message is clicked, the Messages window opens up and evrything else in the backdrop gets deativated. There's an option to respond to the message directly or view other messages either in the Sent / Received category.
Clicking the Actions button reveals a small drop-down with the options to either Delete, Forward or Mark the message as unread. There is no way to mark a message read as the Actions button can be used only when a message is read. When the Actions are revealed, the less important data get lightened that helps the user to see the options much more clearly by avoiding distractions. Clicking anywhere on the lightened elements of the window closes the Actionsmenu.
The Create button opens up three fields as shown. The sender name usually appears automatically depending on which member had drafted the previous message. The sender name can be changed using the list of members that are registered to operate the website. The message can be sent to multiple receipients by using the Contacts list. There's an option to attach files / photos similar to the respond panel shown earlier.
NEW NOTICE : Similar to the MESSAGES button, a new Notice appears as a superscript showing the number of unread notices. On clicking the button, a drop-down appears that gives the basic details of the new notice and also gives an option to view drafted notices or create a new notice.
The notice may / may not have an attached image, but, whenever there's a relevant image attached, it downloads itself automatically. There's an option to view the received notices or the notices drafted by the user / other members of the family. A Received notice can either be Deleted or Marked as Unread.
While drafting a new notice, the sender's name appears as a default depending on who the sender was while drafting the previous notice. There's an option to attach files / photos that may be relevant in a particular situation...like shown as an example above.
THE NEWSLETTER : The newslatter is the platform where members can upload and share relevant albums, articles etc with other members of the society. Though various social networking sites provide a much broader and versatile platform to do this, but the Heather Housing newsletter is a cyber space meant only for the members of the society so that the activities taking place inside the society can be viewed and shared.
ALBUM VIEW : An album appears with a strip containing the thumbnails of the photos inside the album. The album can be viewed through the photo-viewer by clicking on the '+' button.
There's an option to quickly go through the images using the strip. When the cursor is placed on any of the photos it expands to a buigger size. Clicking on the image would take the user to the photo-viewer.
The post gets highlighted on the newsletter acknowledgeing the fact that it is active. This highlight (through the shadow) happens whenever the cursor is inside the rectangle that demarcates the post from the other posts.
The cancel button removes the post from the user's newsletter.
PHOTO-VIEWER : Once the image is clicked / the post is expanded using the '+' button, the photo-viewer gets activated and darkens everything else in the background. The user can view the images one by one / click on the desired image in the thumbnails.
The Actions that the user can perform appear as a drop-down when the Actions button is clicked. The image and the thumbnails become lighter to reduce visual clutter and help the useer see the options clearly.
If a person Reports a particular image, a message is immediately sent to the author of the Album and the particular image gets blocked. It can be accessed only with the consent of the person who has blocked it.
NAME & DETAILS : The details about a particular member can be viewed by just placing the cursor on the name of the person. Clicking the name / the '+' button opens a new window with more details about the person and the other users of the family. There's an option to send a message to the person being viewed through this window.