Design 2

Find a Friend

Home page

This is the home screen of our application.
it is in the form of a dashboard; all the different tasks offered by this UI can be initiated from this screen; For example add a friend, view and RSVP a new event invitation, view and approve friend requests, view all friends on map and view all events on map.

This home screen displays all the functionalities offered by this application in one place.
All the icons have a relevant picture to increase the information scent.
Each icon has a label under it to make it easy to learn for a new user.

Because user can directly identify which icon is most relevant to the task they have in mind, they can directly got to the relevant page, instead of steering thorough multiple pages, making it a very efficient home page.
Also because the icon and label puts all the information on screen, users do not need to memorize the exact position of button for a specific task.T

Affordances of this menu prevents user from selecting a wrong option. 
In case a user does select a wrong icon, and leave this page, they will see a button on top left of the screen with shape of a house on it. Tapping this button will always bring the user back to "home"
page.

Friend list

When a user tap the first icon labeled "Friends" this screen will show up.
This screen contains the list of existing friends of the user. The list is displayed in alphabetical order. user can scroll up and down by finger or use the
scroll bar on right for fast retrival in case the list is long.

this screen has a button on top left with the symbol of home on it. which symbolizes that this button will take user back to the home screen.

this screen has a "Groups" button and an "+" button on top right.
The groups button will take user to a page where predefined categories of friends are displayed; All friends(the default list), recently contacted friends(list of 10 friends user recently attended an event with), pending friends(friends who haven’t accepted user’s  friend request yet.).

This display is externally consistent with contact lists in smart phones, facilitating a new user in learning process. 

If a user realize at this point that there is another person that they want to add, they dont need to go back to home page to add a new friend, because there exists a short cut on the top right of this window in shape of "+". this short cut increase the efficiency for frequent users. 

all the actions user perform on this page can be undone by navigating back.

tapping the name of a friend brings up this screen.
this contains the name and details of the friend. and an "map" icon labeled "Map".
it also contains a short cut for initiating event at the bottom of the page for labeled "invite to a new event".

This page is simple and clearly labeled.  
The map icon has a label saying “show on map” which makes this feature easy to discover.

This page contains efficient direct links to find a friend on map, and also to create an event.

all the actions user perform on this page can be undone by navigating back. 

if the user accidentally creates an event, user can cancel it and return to this page.

Find a friend

tapping the map button against friend's name opens this screen.
this screen contains a map with a small dot on the location of that friend with a small speech bubble with the name of that friend in it.

this screen is externally consistent with the google maps. making it easy to learn for a new user of our application.

It allows zooming in and out, the panning of the distance  is based on the zoom level.

User complete control over how much zoom in they want the map to be, and zooming action can be undone by zooming out. 

The "Back" button on top of the screen takes user back to friends page.

Add Friend

Look up a person

When user taps on "add a friend" icon on home page of "+" button on friends' list screen this screen shows up. 
This is the screen where user looks up a person in the directory to add as friend. the search result contains all the matches for the searched name.
It may contain people already added as friends, people whose friend request is pending for user's approval and friends who did not yet respond to user’s friend request.
To distinguish between all these type of search results, there is a small word against each search result saying either "friend" "pending" "respond" for each of the type explained earlier respectively.

The terminology used is externally consistent with common vocabulary as well as other social networking media, therefore it is easy to learn.

The search is adaptive and shows inline results as the user types next letter of the name, making it efficient.

 

user can at any time restart the search or change the key for search. 

View Profile

When a user taps a name from the search result list this screen shows up.
it displays name and details of that person from the common directory, for user to review and decide if this is the person he/she is looking for.
notice the map is gray, showing that the map is disabled for that person because he/she is not added as friend yet.
User can send friend request by tapping the add button.

At any time user can cancel the friend request. and the buttons with long term effect are placed strategically away from navigation buttons.and size of buttons is increased if two buttons are adjacent to each other, minimizing the chances of accidently tapping the wrong one.

Add as Friend

"Add" button on the previous screen takes user to this screen.
This screen contains a customized message to be sent with friend request.And “send” and “cancel” buttons.  
The contact details is auto-filled and the customized message contains fragile default message.
User can change the customised messgae field and send request by tapping the button on the bottom of the page. 

All the buttons are clearly labels and are internally consistent with the use of vocabulary.  

the text fields are auto filled decreasing the users responsibility in the overall procedure, increasing the efficiency.

User can cancel friend request process at any time.

If the person whoes profile is being displayed is already a friend, this screen will show up instead.
the map button is enabled.

if that person already sent youa request and is waiting you responce this screen will show up. the map buttonis disabled, and gets enabled when accept button is tapped .

all these three profile views are consistent with each other. therefore do not require users to learn or memorize the details. 
All he buttons and actions are appropriately labeled easing  the learning process.

Initiate Event 

Create event

this is the screen where user can schedule an event. tapping on each property of an event will take user to a separate page where they can enter a value.

each edit view has a cancel and done buttons on the top, which are wide and clearly labeled.

Edit start and end time page has a turn wheel for easily selecting
date and time, with default set to 30 minutes added into current time.
 
select invitees page takes the user to its friend list.
user can select multiple invitees by tapping on their names. the friends already added in the list have a tick againt their names and
those who are not added yet have a "+" inside a circle againt their names. there is also a search bar on the top.

once all the properties are set, event can be broadcasted to all invitees by tapping the button on thebottom of the page.which pops out a confirmation message.

this page is easy to learn because it is externally consistent with other smart phone applications.

features such as "Selecting multiple friends" and "ticker" for start and end time makes it efficient.
search bar in the list of friends makes it faster to browse through a long list of friends.

A dialogue box pops up when the user tapps "send invite" button, asking for confirmation. making user to think twice before actually sending out the invite.

Edit location and name

Edit start and end time

Invitee list

Edit notes

Broadcast invite 

Check RSVP

RSVP

View Event Invite list 

this page contains the list of new event invitations. 
this page lists time and location against each event.

this page displays time and location of the event against each event making it faster for user to browse through for a specific event.

user can undo ll their actions by navigating back.

View event details and location

tapping the event name brings the user to even details screen. this screen display the details just like a create event page did. except that the button on the bottom now says "send RSVP"
the "event location" has a button against it saying "show on may".

View event on Map

Tapping the map button against friend opens map and shows event on map. 

Send RSVP 

RSVP page contains option "Accept" and "Reject" along with a optional field for "additional notes".
user can send the reason for rejection or may be dietary restrictions with the acceptance and tap "send" to send response.

Reschedule

View list of events 

This is the page user can view all the events. 
each event has location and time againt its name. making it easier for the user to browse through the list for a specific event on a scpeicfic day and location. 

If the event is canceld, the word cancel is shown instead of location and place. 

In case the location is changed by the organizer a asterisk appears on the location and time. 

User can tap on the event name to view the full details. 

 the page which displays the full details looks just like the create event page. except for the fact that it does not contain "Send invite" instead it has RSVP button. which takes user to RSVP page.

View RSVPs

When the person who created the event taps the name of the there is a button at the bottom of the page labeled "view RSVPs"

Edit details
and broadcast update.   

there is a edit button on the top. which bring the user back to the create event page with all the field already populated. 
user can update the details and send updated.