Scenario
Anjali is working at Microsoft. She wants to organize a group of coworkers to go to lunch at her favorite restaurant, Taco Time. She logs onto LunchBunch and decides to create a Lunch Event at Taco Time later that day. She plans the lunch for 1:00pm and invites her teammates, her best friend at work Pallavi, and her boss Mike.
Pallavi wants to go to lunch, but hates eating in the cafeteria alone. Through LunchBunch, she finds out that Anjali is planning a lunch at Taco Time that day. She joins the Lunch Event and now has people to eat lunch with!
It's getting close to lunch time. Mike sees that he got a notification from LunchBunch reminding him of his commitment to attend lunch at Taco Time that day. He is also asked to re-confirm that he is attending the lunch so that Anjali can get a final head count. He confirms his attendance, wraps up his work, and heads for Taco Time.
Design #2 : Lunch List Browsing Interface
1) This window is the home page of the site. It shows the list of lunches the user has been invited to in chronological order by time of event. Each lunch event shows the most important details, namely time, place, and creator of event. They are clickable to show another page with extra details such as administrator comments, and the list of individuals who are attending. A tooltip will also be shown upon a mouseover which will show an abbreviated list of people attending. If user desires an event that does not exist in a list, they can create their own using the “Create Lunch Event” button at the bottom.
This is the button Anjali would use, because she desires to create a TacoTime lunch.
2) The “Create New Lunch” window polls the user for location, time, people to invite, when to send a reminder email to participants (if a reminder is desired) and when to allow users to confirm attendance. The “where” field is simply a text box. The time is segmented into separate boxes for hour and minute, a short drop down allows selection between AM/PM, and a calendar widget for selection of date. The “people to invite” field is a scrollable list of users or groups of users, with checkboxes to indicate whether the person should be invited. This list also has an optional search field at the top. It will abbreviate the list below to only include users who match the string typed into this field. The creator of an event can also set reminder times, and the time in which parcipants can confirm their attendance. These two have identical fields with a spot for a 2 digit number, followed by a “minutes, hours, days” dropdown that indicates time before event reminders, and confirmations will be in effect, respectively. There is also a comments section at the bottom where the user can put in whatever they think will be helpful for other users to see in order to coordinate the event. They complete creation of the event by pressing the “Create Event” button at the bottom. If the event has already been created, they will see an “Edit Event” button there instead.
3) The “MyLunches” screen shows a user all tof the lunches they have joined. It shows the same information for each lunch as does the browsing home page. Clicking an event yields the same result of showing the full event details. On the left, there is a space which will be inhabited by an exclamation point if the event is within the confirmation time set by the user. Upon clicking an event with the exclamation point, they will be able to confirm attendance to the event. This has the effect of giving a very accurate tally at the last minute before an event of who is actually going to attend.
If this screen is reached by creating or joining an event, text at the top indicating that the event has been successfully added will be displayed.
4) The Event Info page is reached by clicking on an event either in the list on the home page or by clicking on an event in the MyLunches list. This screen shows the location and time of the event, as well as a list of people that have joined the event. A “U” will be displayed at the right side of a person’s name to indicate they have not confirmed attendance, and a “C” will be displayed to indicate if they have. Any comments made by the creator of the event will also be shown. At the bottom left, there is a button for joining or removing oneself from the event depending on if you have joined the event already or not. The button in the lower right is for confirming attendance. This button will only be active if it is within the time window set by the creator of the event before the set time.
Learnability:
This interface does pretty well in the learnability category. The user is greeted with a list of obviously-clickable events in chronological order on the front page. These are the events they have been invited to attend. There is no searching or information required by the site before the list of events can be displayed. Upon clicking an event, they will see all necessary details such as location, time, and who is attending the event. Upon clicking the button to create a new lunch event, they will see an easy form that asks them for the relevant information.
Efficiency:
The efficiency for this interface is pretty positive as well. The user can quickly find events for the current day (because they are at the top of the list) and click them and edit them and get back to the list with the “My Lunches” button at the top right of every page. The event creation screen is also very streamlined and efficient, with a calendar widget for setting date, a scroll bar with checkboxes for inviting friends (and added search functionality to this scrollbar). One drawback in efficiency we envision for this design is that it may be difficult for users to find events that are far off in time if they are not initially seen in the scroll bar. The events are organized by time, but the density of times may not be uniform so it may take some time for the user to locate a particular event in their list.
Safety:
Potential errors users can make are in setting event details incorrectly, inviting the wrong people, failing to notice that they have been invited to an event, or creating a duplicate event. The first error is easily correctable by the admin of the event, as they can edit what they have input simply by clicking on the event. Events can be deleted for the purpose of inviting the wrong people, which is slightly more of a pain to correct but is possible to do. In theory, if users check the list of events they have been invited to before creating a new one, so duplicate events should not be a common occurrence. If they were, however, it would be very obvious because the two events would be next to each other in the chronological list after the event is created. The user could identify this mistake, and correct it. The error we find most difficult to correct is the one in which a user does not notice that they have been invited to an event. They could fail to check the site regularly, or it could be hidden in a sea of events that are all scheduled for similar times.
Design #3: Map Browsing User Interface
Picture 1:
This is the first page a user sees on LunchBunch. The map can be zoomed into or out of. It is initially focused on the location the user has specified in their account. The search bar in the upper left corner allows the user to search for a restaurant and refocuses the map on the nearest business that most closely matches the search. Stars on the map mark places where lunch events are occuring that you are invited to, have joined, or have created. When you have joined an event, the star is emphasized with a circle around it. Hovering over one of these stars shows a tooltip-like popup with a summary of the event details. Clicking on this popup takes the user to the event details page for a lunch event. When Pallavi is looking for a lunch to attend, she browses this map. She hovers over a star on Taco Time and see details for an upcoming lunch she has been invited to. She clicks on this star to see more details about this lunch and join it.
Picture 2:
This is the event details page. It tells the user all the details about the lunch, including who has already joined the lunch. There is a large button on the screen to join the lunch. With one easy click, Pallavi joins the lunch. Once she joins the lunch, the “Join” button becomes a “Remove Me From This Lunch” button (not pictured). Note that if the organizer visits this page, he or she will see a “Edit Details” button and a “Delete This Lunch” button (also not pictured). Pallavi can click “Back to Map” at the lower right corner of the page to return to the map of lunch events.
Picture 3:
This is the event creation page. When Anjali wants to create her lunch event and goes to LunchBunch, she clicks the button at the bottom of the map to create a new lunch event and is brought to this page. Because she was taken to the map page before creating an event, she was able to make sure there isn’t an existing lunch that she would rather join. On this event creation page, Anjali fills out the details of her event in a form format (see notes on picture for details about each part of the form). Anjali can write in special comments (e.g. a place to meet before the lunch, reservation details, etc.) at the bottom of the form. Anjali requests that her guests are asked to re-confirm that they are coming to the event along with a reminder for the event that she sets to be sent out to attendees 45 minutes before the lunch. This reminder/confirmation request is sent via email to all the people who have joined the event at the time Anjali specified.
Picture 4:
This is the My Lunches page. It shows all the lunches that the user has joined and fits them onto one map frame. It can be navigated to from the map homepage from a link in the upper right corner of the screen. This page makes it easy for users to keep track of the lunches they have committed to and the “!” symbol next to the star alerts them that the organizer is asking them to confirm that they are actually coming to the lunch because it is approaching. Mike almost forgot that he had committed to lunch at Taco Time. However, he received an email reminder and a request for him to confirm that he’s actually coming (this email is further explained in picture 6). Instead of confirming through the email, Mike navigated to the My Lunches page and clicked on Taco Time, which was marked with a “!” because the event time was approaching.
Picture 5:
This is the event details page again. Now that the event is approaching, the user is presented with a large button asking them to confirm their attendance. Other people who have already confirmed their attendance will have a check next to their name on the list of people attending. Hovering over this check reveals a tooltip signifying that the person is confirmed for lunch. Mike could have accessed this page through either the main map or the My Lunches map, but the My Lunches map made it easy to browse through lunches Mike had already committed to.
Picture 6:
This is the email that people who have joined a lunch receive when the organizer specifies that he or she wants a reminder/confirmation request to be sent out. Mike receives this email 45 minutes before the lunch. He would have almost completely forgotten about this lunch if it weren’t for this email! It also contains a confirmation request. Mike can click the “confirm” button to confirm his attendance. Clicking the button will open up a new tab in the browser that opens up the page in picture 5, but with the confirm button disabled since the event has been confirmed through the email. This gives Mike a chance to take a look at who else has confirmed the event. He could have also gone straight to the page in picture 5 without yet confirming by clicking on the “see event details page” link just above the “confirm” button on the email. This is useful in case Mike wanted to see who all was already confirmed for the lunch before confirming.
Design #3 Analysis:
Learnability:
The map display of this UI design is easy to learn because it is intuitive to plan events by location on a map. Also, the map interface is externally consistent with other online maps such as Google Maps. It is easy to recognize that the locations with a star on them are the ones where lunch events are being planned, but less intuitive that the special star with the circle around it indicates events you have already joined. However, when you move the mouse over one of these stars, a tooltip box pops up with event details so the user can quickly figure out the significance of the stars on the map. This pop up is also externally consistent with Google Maps.
This UI is also very learnable because we kept the event details very simple. The app only requires basic information to plan a lunch and provides a comments box for any unique event details. The button to make a new lunch event is large and the only button on the bottom of the page, so it is visibly very different from the rest of the map.
Some issues with the map design may be that users have trouble orienting themselves on the map initially. They might not be certain what area the map covers and have to move around the map to orient themselves. They might also not realize that they may need to search around the map to see further away events that are not captured in the current map frame.
Efficiency:
This map design makes it very efficient to see all the lunch events around your area, but the tradeoff for this is that it is less efficient to see lunch events that are more distant from you because you have to move the map to another location. The search bar helps for quickly focusing the map on another location, but this is still less efficient than the lunch events being shown all on one map frame.
It is also easy to get quick information on a lunch event because of the tooltip popup that is displayed when the user hovers over a star (marking an event you have been invited to or started). The My Lunches map is less visible than the main map, but it makes it easier for the user to see details about the lunches he or she has already joined.
Safety:
The map design makes it harder to go back to the details of an event on the map because you have to locate the restaurant again and click on the popup in order to access the lunch details page. If you have accepted this lunch, you can also see it on the My Lunches map, but this feature is less visible. You need to navigate to the lunch details page to also remove yourself from the lunch.
It’s hard for users to forget about the lunches they’ve committed to because the person who creates a lunch can send out a reminder as the event approaches. The event organizer can also ask users to re-confirm their attendance shortly before the event so that people actually commit to coming and do not forget about their commitment.
If the organizer makes a mistake on the event details, he or she can go back to the event details page. There, the organizer can delete the event, which will notify the people who have already joined the lunch, or edit event details, which will return them to the form they filled out when they created the event.