Design #3: Map 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.
...