Find a Friend

Open Application

This is the Home Screen of this application.
it is in the form of a dashboard.
All the different tasks this UI offers can be initiated from this screen. For example: Add a Friend, View and Respond to event invitations, Viewing and Approving Friend Requests, Viewing all Friends on Map and Viewing all Events on Map.

This home screen displays all the functionalities offered by this application in one place. It encourages learning by doing, especially since all the task icons are labelled which facilitates a user who has a specific goal he/she wants to achieve. All the icons have a relevant picture to increase the information scent.

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.

Because of clearly labelled, discrete and task-specific menus, the user is less likely to select a wrong option to achieve his/her goal. 

Even in the event that the user does select a wrong option and leaves this view, the Home Icon located in the top left will allow recovery by returning the user back to the Home Screen.

View Friend list

Upon tapping on the first icon, labelled "Friends", Alice, the user, is presented with this screen. It contains the list of existing friends of the Alice. The list is displayed in alphabetical order. Alice can scroll up and down by finger or use the fast-alphabetical-scroll bar on right for fast retrival in case the list is long.

The home button, located in the top-left of the screen, allows Alice to return 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 how the contact list is commonly displayed in smart-phones. By allowing flick-to-scroll, the user is able to make use of direct manipulation in interacting with the contact list.

 

the fast-scroll makes it very efficient to browse the list of friends. 

the logical subdivision provided in the "Group" provide a efficient way to browse through the most frequently contacted friends.
 
 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. 

The consistently placed Home Button located in the top-left always allows the user to return back to the main menu - Home page.

Image Added Image Removed

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 on map 

Alice taps the name of Christine to see where she is currently.
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 uses the same map interface as provided by Google Maps. This external consistency will allow users to be familiar with how to interact with the Map View without having to be trained due to their familiarity with the existing Google Maps interface.

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 in common directory 

Alice realizes that Bob is not on her friend list. so she taps the "+" button on her Friend list page. which brings her to this screen. 

She could also go back to Home Page and tap on  "add a friend" icon.
  
This screen contains a search bar on the top and keyboard displayed on the bottom. 
Alice can look up a person in the directory by typing his/her name in the search box. 

it perform a prefix search and displays results as she types.  

the search results 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 respectively.

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

the little arrow next to each name has the affordance of opening a "details" page. 

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

 

Users need not concern themselves with viewing out-dated search results from previous searches lingering.  
<note>

View Profile

Alice found Bob and tapped on his name. 
When a user taps a name in the search results this screen shows up. It displays the 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. Alice proceeds to send a friend request by tapping the Add Button. 

This screen is very simple and contains only the very basic components, making it easy to use for even a new user

This page, in order to let user review the details and confirm the person's identity, actually slow the process of adding a friend by one step. But on the other hand it ensures that user identify the person before adding him/her.

At any time user can cancel the friend request. and the buttons with long term effect are placed strategically away from navigation buttons.

Size of such buttons is also increased if two buttons are adjacent to each other, minimizing the chances of accidentally tapping the wrong one.

Add as Friend

Alice taps Add as Friend Button to add Bob, and this screen pops up.
 This screen contains a customized message to be sent with friend request. The contact details is auto-filled and the customized message contains fragile default message. User can change the customized message field and send request by tapping the button on the bottom of the page. 

Alice may choose to cancel with the Back Button, but in this case, knows that Bob is the correct person to be added and thus proceeds by tapping on the Add Button.

All the buttons are clearly labeled 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 whose profile is being displayed is already a friend, this screen will show up instead. The map button is enabled now to allow Alice to view the users on the Map View.

If that person already sent Alice a request and is waiting for a response, this screen will show up. The map button would be disabled, and is only enabled when the 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.

Showing a consistent view for all search results including people who are "Already Friends", "Pending Friends" or "Not a Friend yet" eliminates the need for the user to go back and forth in his/her friend list to make sure the person he/she is trying to add is not already added in his/her friend list. This way users don't need to memorize friend list and still do the tasks efficiently.

All user actions are reversible.

Invite friends to an event 

Create event

After receiving approval notification from Bob, Alice now creates an 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 "ticker" 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 screen is easy to learn because it is externally consistent with other smart phone applications such as Calender and Alarm.

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.

RSVP to an Event

View Event Invite list 

Image Added
Image Added

When Bob and Christine get an event invitation, a notification pops on their hoem screen. 

they can also view the list of invitation by tapping "RSVP Event" icon on Home Page from this 

by tapping on the notification or the RSVP Event icon Bob and Christine reach this screen. 

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

This screen puts all the important information about an event in one easy to browse through list.

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

The user can undo all their actions by navigating back.

View event details and location

Tapping the event name brings the user to even details screen. This screen displays 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".

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

All user actions are reversible, by navigating back

View event on Map

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

All the buttons are clearly labeled and are externally consistent with the Google maps.

All user actions are reversible, by navigating back* *

Send RSVP 

Image Added 

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.

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

All user actions are *reversible, *by navigating back

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 cancelled, the word +Cancelled +is shown instead of the location and place of the event. In case the location is changed by the organizer an *-asterisk graphic 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 the user to the RSVP page.

This screen puts all the important information about an event in one easy to browse through list.

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

View RSVPs

 Image Added

Since Alice was the creator of this event, the View RSVPs button is available and enabled for her in the Event Details page. This will bring up the View RSVPs screen as shown.

This screen contains the list of invitees and a symbol representing there response. For the icon, a Tick symbolizes that a participant has accepted the invitation. The Cross icon symbolizes that a participant has rejected the invitation. The ?-question mark icon that a response has not yet been recorded by a user. 

Tapping on the arrow head against the response will take user to the window showing notes sent by the friends with their RSVP.

the arrowhead has the affordance of a link to details.

the "tick" has connotation of acceptance, likewise "cross" has the connotation of "rejected" and "question mark" of "unknown". this makes it easy for a new user to learn and a frequent user to use it without memorizing it.

All the responses are on one page and user can efficiently scroll through the list.

User can only perform navigation actions and they can undo by using the "back" button.

Edit details
and send update.   

 Image Added

The is a Edit Button exists at the top, which Alice taps on. This brings her to the Update Event page, which is similar to that of the Create Event page from earlier. The fields are automatically populated with the details from the event.

Upon reviewing the change that have been made to the event, Alice is happy and decides to confirm the sending of the updated event. In order to do so, she taps on the Send Update button at the bottom.update the details and send updated by tapping the button located at the bottom of the screen.

This screen is internally consistent with the "Create Event" screen, therefore is easy to learn.

If there is a slight change in events' plan user can update the event details instead of canceling the event and creating a new event and filling out all the unchanged event details.
This makes it efficient to use to frequent users.  

A dialogue box pops up when the user tapps "send update" button, asking for confirmation. making user to think twice before actually updating the event.