Find A Friend

Launch App
(Home Screen)

This is the entry point of the application, and is the first screen that the user faces when it is first launched. This is termed the Home Screen.

At the top of the screen is an Action Bar, and this is persistent across all views in the application. It provides navigational access to other views and application functions via the icons which are present. Beginning from the left, we have the Friends icon, the Events icon and the Notifications icon. We will outline each of their usage in the following task and sketches. The Home Screen comprises of 2 main portions: the search bar at the top and the map view below.

Map View: By having this screen as a default screen, the user (Alice) is able to view a map view of the location, in this case it is the layout of MIT. Her position on the screen is indicated by a Pink dot, whilst those representing her friends' locations are Blue dots. Tapping on a friend's dot will reveal the friend's name.
Search Bar: The search bar allows for Alice to easily find a user's location on the map by entering his or her name. The view camera will pan over and center about the specified friend. Alice may easily pan the view camera back to her location by tapping the Locate button location on the right of the search box.

By using icons in the Action Bar as opposed to menu buttons with text, it encourages learning by exploring.

We mitigate the confusion by using familiar icons which are used by several other apps, such as the Friends Icon being a silhouette of a male and a female character (Facebook), the Events Icon being a calendar (iOS Calendar) and the tray with an arrow for the Notifications (Apple's Find My Friends. Also, we use the magnifying glass to indicate search. This helps to maintain external consistency with other apps in the same mobile apps ecosystem.

We encourage the user to interact with the map view via direct manipulation. The user is able to pan, perform pinch-to-zoom and tap to select. Upon tapping on a dot on the map, the bubble with the person's name helps to bring the metaphor of the user speaking out his name. There is continuous visual feedback in this interface due to these elements.

The Action Bar's location at the top of every window makes it quick for a user to access any of the 3 key menus without having to cycle back and forth in order to reach any of them.

The map view shows all the users within a nearby location of Alice, the current user. This is an intrinsically efficient way of knowing who is around the user. 

The search bar allows the user to quickly search for a person should he/she not be present in the viewport.

The locate button next to the search bar allows a quick way for Alice to return to where she is located should she have strayed far away whilst looking at someone else's position. This saves user time in trying to pan back to his/her original location.

Listing Friends.

Alice wants to view the list of friends that she has using this app, and also approved her. She taps on the Friends Icon on the Action Bar, and it pops and overlaying dialogue. It currently shows two of her friends, Boris and Christine which are sorted alphabetically. Alice wants to search for for Bob to add to this list, and taps the icon with the `+'-plus sign on the top right of the dialog.

The overlaying dialog box is used for all three icons on the action bar and we maintain internal consistency by using the same speech bubble dialog whenever each menu is accessed.

The names are listed in alphabetical order, and the list is scrollable by flick gestures. The arrows on each cell indicate the affordance of tapping to reveal a sub-menu (we will see this in action later). The "+"-icon used for adding a friend maintains external consistency as it is widely used across all mobile apps in the ecosystem.

By using a overlaying dialog instead of switching to a separate view, a user can quickly dismiss the dialog and return to the map view (lying behind it) with just a single tap.

Using flick gestures allows quick scrolling through the list too.

The overlay dialog box can only be dismissed by tapping on the Friends Icon. Because it is relatively small compared to the dialog, and located away from the tapping zones covering the list view and the add button, it becomes a *pointing task. *There is little chance of dismissing the dialog without intending to. 

Even if a user unintentionally taps on a user's name and moves into the Profile View, the back button will allow him/her to return  back easily.

Add a Friend 

Searching for Bob.

The app dismisses the dialog box, and presents the user with the Add Friend screen. An icon with a left-arrow is the Back Button, which dismisses the page and brings the user back to the previous page (the Home Screen in this case.) should she change her mind.

The soft-keyboard automatically pops up and the prompt gives focus to the Search Bar upon loading this view. As Alice begins typing the letters 'B' and 'o', the application fill the spaces in between the search bar and the soft keyboard with suggested people she might be looking for based on the directory listing database. 

For each person listed within the list that is already an approved friend in Alice's list, a small icon with the word "friend" is present in the cell. Each cell can be tapped to reveal a user's profile, as indicated by the '>'-arrows located at the right edge. 

Alice sees `Bob' in the list, and wants to find out if he is the person she wants to add. She taps on the cell in order to view his profile.

As Alice types in Bob's name, suggestions guide the user into finding the person he/she is looking for. The list is automatically refreshed and populated with user's names from the directory, 

By placing an icon to indicate an existing friend, the system helps to reduce the task of remembering whether a friend had already been added into a recognition task, as opposed to a recall task.

There exists a clear text button indicated by a circle with an 'x' within it. This allows the user to efficiently clear the search text box as opposed to have to press backspace/delete multiple times in order to clear a name with a long sequence of characters.

The soft-keyboard pops up automatically, and focus is also automatically given to the search bar.This prevents any mode errors, (for instance if the user had to first tap on the search bar manually before the keyboard came up, the user might have just been staring at the empty list assuming something was supposed to happen).

Viewing Bob's profile and sending an "Add Request" to Bob.

The app brings up the Information View. It lists Bob's name, email-address, office and any other profile information as already available on his public MIT directory listing. Alice knows that this is the Bob she is looking for, and taps on the Send Friend Request button to confirm her intent to send a request to this particular Bob to add as a friend in Discover.Me.

The app brings Alice back to the Home Screen. Alice taps on the Friends Icon on the Action Bar to bring up the dialog, and now sees that Bob has been tentatively added to the list of friends. An icon with the graphic and text stating "pending" indicates that Bob has not yet accepted the request. As such, Alice is unable to view Bob on Map View.

By keeping the information screen simple and uncluttered, and using terminology externally consistent with that used in the MIT directory, Alice will be able to identify if the current "Bob" is the one she is looking for.

By having the pending icon located next to the person's name, Alice will not be forced to recall whether a request had been sent to Bob previously.

If for any reason Alice wants to email Bob, she can simply tap on the email entry which should natively bring up the Mail application of the device she is working on. This saves her from having to first close the app and force her to have to recall the email address before sending an email.

She can also immediately view the location on Map View by tapping on the office section on the user profile.

In order to prevent an accidental request being sent by a mis-tap, a confirmation dialog should ask Alice whether she wants to proceed with sending the friend request after she has tapped on it.

Receiving confirmation from Bob through a Notification.

After Bob's approval of Alice's request, Alice is notified by a counter on the Notifications icon in the Action Bar. Alice taps on the icon to bring up the Notifications dialog, and there she sees that Bob had accepted her request. She dismisses the dialog.

Because the counter on the notifications icon appears in real-time, it provides a call for attention. It also provides an affordance that the icon has to be tapped in order to attend to the call.

Alice can easily view the number of requests without having to manually refresh or enter the Notifications page because of the live counter.

One safety issue here would be if Alice taps on the Notifications Icon, and accidentally dismisses it, the counter would have reset and the items in the list which were initially marked as unread would no longer be in that state.

Viewing location of all approved friends.

This reveals the Home Screen once again. The Map View shows an additional _Blue-_dot, which corresponds to the newly-added Bob's location (Building 19). Alice notices that both Christine (Building 20) and Bob(Building 19) are located relatively close to her (Building 20). She decides that it could possibly be a good time to arrange a meeting for all three of them for a cup of coffee. She taps on the Events Icon in the Action Bar.

This is the same as the Home View from earlier, except that it should be immediately visible that the number of friends has increased because of the addition of the new dot on the map screen.

Efficiency issues covered earlier in similar screen.

Safety issues covered earlier.

Invite Friends to an Event

Viewing listed events.

The app launches the Events List dialog. Alice notices that she has no scheduled events from the dialog that pops up. She taps on the "+"-plus icon to create a new event.

Using the ""-plus graphic+ maintains external consistency as it is a widely adopted icon to indicate the affordance of being able to add something.

When the list is populated, the user can easily flick-to-scroll across the list at high speeds.

No specific safety issue here.

Creating an event for friends - Bob, Christine and Alice herself.

The Create New Event view is brought up. It provides text boxes for Alice to fill up, corresponding to the details of the event she wants to organize right now. The Title is a self-defined title which best describes the event. The Location text box is used to define the location of the event. The Time section indicates the Start Time, End Time and Time-Zone of the event. The Participants text box lists the participants of the event and the Comments text box is a free-entry text for an additional information the organizer might want to add.

Alice types in "Coffee" as the title of the event. The timing automatically defaults to the nearest half-hour based on the current time and time-zone which Alice, the user, is at. Alice is also automatically added as the first participant of the event. 

Alice decides to pick a location for the event, and taps on the Compass Icon located on the right edge of the Location text box.

Each of the text boxes used are widgets which provide the* affordance* that they can be tapped to have their contents change. 

Both the Location and Participant fields have buttons (Compass Icon and +-plus Icon) which provides the affordance that they can be used to assist in filing in their respective fields.

The ">"-arrow located at the Time section indicates that editing the timing is possible (because it indicates a sub-menu is present)

The page provides all the information about the event, and sub-menus are only required to be accessed if edits are required.

Because the timing automatically defaults to the nearest-hour based on Alice's current time, it saves Alice the trouble of needing to specify the time of an event when she wants to quickly and spontaneously create one.

As further illustrated later, by allowing the user to use context specific sub menus to adjust the location, timing and participants, it allows the user to be less likely to make a mistake (picking building 41 instead of 14 for instance).

Selecting a location for the event.

This brings Alice to the Map View, but it is in the mode which allows her to tap on a location to select a location for the event she is creating. A small semi-transparent note instructs her on how to select a location. Alice decides that Building 24 is a good location that is close to all three of them. She also really likes the coffee there. She taps on Building 24 on the screen to indicate her choice.

The semi-transparent notice indicates to the user that the mode has changed, and clearly instructs Alice, the user, on how to achieve her goal of picking a location.

By being able to simply tap a location and having the system populate the text representation of the location, it saves time.

Mode error is reduced because of the persistent text that is on-screen, even though the view is similar to the Map View on the Home Screen.

Confirming the location for the event.

A Pin Icon animates and drops on the point Alice tapped. White Lines are drawn to between a participant and the pin location to indicate that he/she is invited. It thus shows that Alice, Bob and Christine are all invited to participate in the event. 

At the bottom of the screen, a confirmation menu pops up. It states in text: Location: Building 24, MIT which corresponds to the location of the pin and where Alice tapped. Alice knows that this is correct and thus taps the Confirm button to accept the location.

Because the Pin Icon animates onto the location, the user's attention is brought to focus on the location. The confirmation menu only pops up after the pin drops, and it also states in text what the location Alice

The user can view immediately the number of participants, their proximity to the event location and their responses because of the lines connecting the dots to the event pin.

The confirm and cancel options will allow a user to make a change in location in the event a wrong place was tapped, making the action reversible.

Selecting participants for the event.

The Select Participants view is brought up. It presents the list of friends that Alice has (corresponding the to Friend's List). Check-boxes are located on the left of each cell containing the friend's name. There is a search bar located at the top to enable Alice to search for people by typing, or she can make use of the fast-alphabetical scroll-bar located on the right of the screen.

Alice doesn't have many friends, and she can see both Bob and Christine in the list. She checks the boxes corresponding to the both of them. Hovering Text located at the bottom of the screen reflect the number of people chosen. Alice is happy with her selection and taps the Done button.

The use of menus, checkboxes and search bars allow internal and external consistency, so a user like Alice would already be familiar with how to interact with them and their uses.

The quick-alphabetical-scroll allows Alice to scroll through her contact list quickly, even in the event she has many friends listed.

The indicator at the bottom showing the number of people selected adds as a sanity check for the user to ensure he/she has invited the corrected number of participants.

Reviewing and sending the event to friends - Bob and Christine.

Alice is returned back to the Create New Event screen. The information which she has provided is now reflected in the screen. She is happy with her selection and taps the Done button to confirm that she wants to create the event and invite the selected participants to it.

The changes that Alice has made is immediately reflected in the user interface.

Efficiency issues covered previously.

Alice may continue to make changes at this point. Other safety issues regarding this UI was covered earlier.

Viewing the created event

The screen is dismissed and Alice is returned to the Home Screen. A non-blocking semi-transparent overlay notifies Alice that the invite has been successfully sent out to the users. Alice taps on the Events Icon to bring up the Events List again. It is now populated with her recently created event, giving a summary of the title, date, time and location of the event. Alice may tap on the event to make changes to it, but she does not have any reason to do so right now. She awaits the acceptance of the invite from both Bob and Christine.

The semi transparent overlay acts as visual feedback that the action of sending the invite has completed successfully.

The list compactly represents the event that Alice created.

Alice can simply make modifications to the event by tapping on it and reaching the Modify Event Screen (covered later). This will allow her to make changes and resend the invitations out.

Receiving notification of an event.

On Bob and Christine's side, they receive a Notification in their app, which once against is indicated on the counter above the Notifications Icon. Tapping on the icon brings up the Notifications dialog once again. 

On Bob's screen, he can see two notifications on the dialog. The new, one is highlighted with a slight shade and has a dot, which indicates that the notification is unread. Unread in this definition corresponds to notifications which were only not present since the last time Alice was in the Notifications Dialog and corresponds with the counter above the icon.

The notification acts similar to the one covered earlier when talking about an incoming friend's request. The issues with learnability would be similar in this case.

The reciepients Bob and Christine, can easily access details fo the event by tapping on the entry in the notification view.

Safety issues similar to the ones covered earlier.

RSVP to an Event Invitation

Viewing the event details and accepting the invitation.

On their respective phones and apps, Bob and Alice tap on the cell in the Notifications dialog. This brings up the View Event screen, which is similar to the Map View. At the top, the title of the event "Coffee" is listed, as well as the participants invited as indicated by dots on the screen. The pin corresponds to the location.

Bob thinks it's a great idea to meet up, and he is happy with the location and time, and he taps on the Accept button at the bottom of the screen.
Christine, however, would like to meet up for the event too, but has something on at 2:00PM. She decides to respond to the invitation by Proposing a Change and tapping on the Propose Change button.

The map view provides information regarding the event title and time, and the visual representation clearly indicates the location of the event.

The recipients can easily see the number of people invited to the event, as well as where the event is going to be held without further navigation.

The Accept & Reject buttons have no confirmation dialog. The confirmation dialog is unnecessary because all responses to events can be modified in the Events Menu.

Proposing a change to the event.

The Propose Change view pops up for Christine, which is similar to what Alice saw in her Create Event screen. It is populated with the details of the event. Since Christine only wants to change the time of the event, she taps on the Time section.

Because certain options are greyed out, it marks that the affordance for Christine to modify them is not available.

Christine can easily make modifications to the Location, Time or Participants by making use of the Compass and "+"-plus icon.

The greyed out options make it impossible for Christine to make alterations to parts of the event which shouldn't be modified.

Proposing a change of time for the event.

This brings up_ the Start & End Time view. Christine may alter the Start Time, End Time, Time Zone or Date of the event. She wants to suggest shifting the event _back by one hour, so that the event now starts at 3:00 PM instead of 2:00 PM. She taps on the Start, and uses the Date & Time ticker at the bottom to modify the start time to 3:00PM. As she changes the time, it gets reflected in the corresponding sections in the top half of the screen. The End Time automatically shifts back by one hour to 4:00PM, so as to maintain the duration of the meeting. She is done, so she taps on the Done button.

She returns back to the Propose Change view. At the bottom, a summary of changes made by Christine is shown. She is happy with the changes and taps on Done to send the proposed changes back to Alice.

The ticker is used across standard mobile devices when it comes to selecting date and time, so it helps with external consistency. The use of* Today as opposed  to just the present date helps to reduce the need to *recall what the day is.

By highlighting Today, it allows the user to quickly be oriented as to what the present day is, and allow them to quickly select the next day or previous day because of this frame of reference.

The use of the ticker automatically ensures that times that are chosen are valid (i.e. selecting a time and data in the past is not possible).

Receiving a notification for a proposed change to the event.

Alice receives a notification, and taps on the Notification Icon to view the list of notifications received. She sees Christine's proposed change as the latest, unread notification. She taps on it to view the details of the changes.

Learnability issues similar to those covered previously.

The user can easily reach the Modify Event menu by tapping on the entry in the list.

Safety issues similar to those covered previously in the Notifications Menu.

Reviewing proposed changes to event

This brings up the Modify Event view. Alice can see that the Time of the event has been modified, because there is an *-asterisk next to that section. The modified time as proposed by Christine is now reflected in that section, and at the bottom, a summary of proposed changes by Christine is shown. Alice is happy to shift the event to 3:00PM and clicks on Done to resend the new invitation out back to Bob and Christine.

The *-asterisk and the message at the bottom is externally consistent with its usage as a indicator for change.

The event Start Time and End Time was changed and reflected automatically.

Safety issues similar to those covered previously in the Create Event Menu.

Confirming the event

Bob sees the updated invitation and accepts it. 
Christine is delighted that her proposed changes didn't cause any problem at the event is still going ahead as planned.

Alice is able to view the confirmed event in the Events Listing menu. A Tick graphic is located next to it to indicate that all members of the events have responded to it and are attending it.

The Tick graphic helps to indicate that responses have been added.

The user can easily access the Modify Menu by tapping on the entry.

The use of the Tick also saves the trouble of having the user view the event through the Event Menu in order to see who has responded.

Changes can be proposed by tapping the entry, which will bring the user back to the Modify Event menu.

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.

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 

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 

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

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.   

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.

Add a Friend

Entering theHome Screen

This is the home page of out Application.
Alice opens Discover.Me.
Alice immediately sees list of friends.
Alice can search for friends by tapping on the text bar near the top.
On the bottom row are four buttons:* Friends (Home Screen): brings up the current homepage with a list of friends.* Events: shows the events that Alice has been invited to or will be attending.* Search: immediately pulls up the text box to search for friends.* Invites: shows the people that have invited Alice to be their friend.

The screen presents few details to Alice. She sees some of her Friends and quickly realizes that she can find more friends by scrolling down the list or by using the Search text bar.

Alice can immediately search for her friends by tapping the Search text bar near the top of the screen. She has one-tap access to a listing of her Events and Friend Invitations.

Buttons and selections are made large so that Alice can tap the right targets on the screen. Alice may accidentally hit the Exit button when she taps on the Search text bar.

Looking up for friends

Alice taps on the text search bar near the top of the screen.
A keyboard pops up from the bottom of the screen allowing Alice to type her entry.

The Keyboard automatically appears telling Alice to begin typing. Alice is familiar with this feature from using other apps.

It isn't clear whether there are other option for Alice to find her friends besides searching for their names.

The keyboard is rather compact and Alice may find herself accidentally hitting the wrong key.

Adding as Friends

Alice types "Bob" in the search bar.
The Friends list updates to show friend names closely matching Alice's entry.* The list contains a directory of people (e.g. the MIT directory).   
Alice views the updated list of people. Next to their names are indicators:* Friend: indicates the person is already a friend.* Pending: indicates that Alice has invited the person to be her friend.* Add: allows Alice to invite the person to be her friend.     
Alice adds Bob as her friend.
Bob quickly accepts Alice as a friend.

Alice sees the same list of friends as she saw on the home screen, so she is familiar with the user interface. The buttons to add a friend are colored brightly so that Alice knows she can perform an action by tapping the button.

As Alice types "Bob," the list updates to show close matches to her entry. For longer names, this could allow Alice to find her friend without typing in his entire name.

Alice may want to add Bob as a friend but accidentally hits Borat's "Add" button. We can ask Alice to confirm when she taps to add a friend, but this will increase the number of steps she has to perform.

Find a Friend

Viewing Friend's Location

Now that Alice and Bob are friends, they can view each other's locations on a map.
Alice taps on Bob's name on the friends list.
Bob's location is selected and a pop-up balloon shows the selected "dot" is Bob.
Alice can also view her own location as a blue dot on the map.

Once Alice selects her friend, a map shows Bob's current location. Furthermore, a blue dot shows Alice's current location. Alice is familiar with the blue dot representing her location, since it is also used in the iPhone's Map app.

Depending on the level of zoom, Alice may need to further zoom in or zoom out of the map. There is a tradeoff between presenting a large map including most her friends' locations, or showing a detailed and smaller map.

If Alice "flicks" her finger past the screen, there is danger that the current map view will be lost. It will take her some steps recreate the map screen showing her and Bob's location.

Viewing Friend's Profile

Alice clicks on the balloon with Bob's name to open Bob's profile.
Bob's profile screen displays his email, phone number, and other details.* Alice can directly call or email Bob by selecting the contact info in Bob's profile.

Bob's profile includes his phone number and email appearing in blue with underlines. This provides Alice with an affordance to click these entries.

By selecting Bob on the map view, Alice immediately sees Bob's profile. She can click on Bob's email or phone number to contact Bob.

If Alice accidentally taps Bob's phone number, then she will begin making a call to him. We can ask Alice to confirm the call, although this will require her to make more selections to accomplish her tasks.

Viewing the Events Screen

Alice sees a list of events she has been invited to or will be attending.
Each event is colored green to indicate that she will attend.
Other events awaiting her RSVP are colored yellow.
Events are arranged so that upcoming events appear first in the list.
On the top right, Alice can adjust the time range of events she wishes to display.* 1 day, 3 days, 1 week, or Custom setting. Alice enters the location of the event. 
Alice taps the Add an Event bar near the bottom of the list.

Alice will find this view similar to the earlier Friends view. However, she may not immediately realize that she can adjust the time range of events by tapping on the button on the top-right.

The Events tab allows Alice to immediately see the events she has been invited to or will be attending. Furthermore, she can add an event with one tap. However, if Alice has a longer list of events, there is no option for her to search for the events by keyword. However, Alice can choose to view only events happening in: 1 day, 3 days, 1 week.

Alice may accidentally select the wrong time-range on the top-right drop-down tab. The drop-down tab is rather small, compared to the other selection boxes on the screen.

Invite friends to an Event

Adding an Event

A New Event page opens allowing Alice to create a new event and invite friends.
Alice types in the Event Name
She selects the Start and End Time.
Alice taps the Search button in the Invite Friends field.

The boxes to enter Event info is brightly colored, providing Alice with an affordance to click on the fields and enter new data.

When adding an event, Alice immediately sees the event info she needs to provide. She can select the time using a drop down box. The drop-down box may require longer time to fill in the information.

Alice can select the time using a drop-down box, which prevents her from typing in a wrong time (e.g. 10:70)

Inviting Friends

Alice taps the Search text bar at the top of the Invite Friends page.
She types in Bob's name.
The Friends list updates to show friend names closely matching Alice's entry.
Alice views the updated list of people. Next to their names are indicators:* Accepted: Friend has accepted invite.* Pending: Friend has been invited and Alice is waiting for their response.* Invite: Friend has not been invited. You can invite them by clicking this button.     5.  Alice invites Bob and Christine by tapping on the invite button next to their names.

Alice is familiar with these interface from the Search Friends screen she used earlier. Furthermore, she recognizes that she can tap on certain users to invite them, just as she has previously tapped to add users as friends.

When Alice types the Search button in the Invite Firends field, she will encounter a list of her friends. Alice can also quickly search for friends she wants to invite.

Similar to the earlier Add Friends function, Alice may find herself accidentally inviting the wrong friend if she mistaps. To prevent this, we can ask Alice to confirm before sending invitations. However, this would slow down the task process for her.

RSVP to an Event

Receiving Event Notifications

Christine, whom Alice invited, received the invite and wishes to change the event to a later time.
A pop up note appears on Alice's screen telling her that Christine has proposed a change to the event.* This notification appears even if Alice is not viewing the Discover.Me app.* If Alice has turned off her phone's screen, then the phone will vibrate or sound an alert. The screen will turn on briefly to show the notification.

If Alice encounters this notification when she is not using the Discover.Me app, she may not realize the notification relates to the Discover.Me app.
Upon receiving the notification, she may try to look in another app, which has no information related to Discover.Me.

The notification concisely tells Alice about Christine's proposal to change the event. To present the notification concisely, no additional information is shown about the proposed event changes.

There is no safety issue because Alice cannot make any selections during the time the notfication box appears.

Accepting a Changed Event

Alice sees the updated event info, including the time, location, and other details.* The updated entries are highlighted making it easier for Alice to see Christine's proposed changes.         Alice accepts the updated event.

If Alice receives the notification while not using Discover.Me, we can immediately transition to this screen in Discover.Me. This will help Alice immediately realize the previous notification relates to Discover.Me

If the notification immediately transitions to this Discover.Me screen, then Alice may find the action disruptive. She may be using another app and find it difficult to return to the previous app she is using.

If the notification immediately transitions to this Discover.Me screen, then Alice may find the action harmful. For example, she may be in the middle of texting a friend. This might cause her to tap incorrectly and accidentally accept the updated event.

A pop-up box appears telling Alice that she has accepted the changes and that updated invitations will be sent to all people she originally invited.

Alice is familiar with notifications because they are used in other smartphone apps.

The notification concisely tells Alice about Christine's proposal to change the event. To present the notification concisely, no additional information is shown about the event details which have been changed.

There is no safety issue because Alice cannot make any selections during the time the notfication box appears.

Viewing Event Status

Alice can scroll down the event list to see the list of friends she has invited.
The list of friends indicates whether a person has accepted the invite.

Alice views the event info recorded in the same format which she previously input info into. Therefore, she will know where to find certain fields containing info about the event.

If Alice has invited a lengthy list of friends to the event, then she must scroll further down to view the entire list. We can make the friends text shorter to fit more names in a page. However, doing so makes makes it more difficult for Alice to find and select certain friends on the list.

If Alice selects taps on any of the fields displayed on this page, she will be taken to a subpage. This makes navigation cumbersome, since Alice would have to hit back to return to the Events page.