Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

...

When the food arrives, she hits the button and everyone gets another email "Katie says the food's here. Hope you are still hungr-y". Everybody comes over, pays up, and enjoys the deliciosu Thai food. They are real happy and full. 

Designs

Design 1:

Image Added

  1. First, Katie needs to invite friends to an order. She can do so by searching through her Facebook friends via dropdown menu or by typing in an e-mail address of the desired person. If desired, she can choose a restaurant or type of restaurant from the searchable drop down list of restaurants in her area. In this case, she chooses “Thai food”. She can also optionally add a message to send along with the invitation. She can view the people she's added in the “friends invited” box on the right side of the screen.
  2. Next, she is directed to the page to choose a restaurant. Upon accepting the invitation, her friends can also view this screen, and their current status will be displayed in user info tab on the left. This will show what friends are currently viewing the page, which haven't responded yet, and those who declined. Tim really doesn't want Mexican food tonight, so he filters out Mexican restaurants. Janet wants Thai food as well, so she also selects restaurants with Thai food, and the multiplier next to Thai food is increased to show that multiple people favor this option. As Katie and her friends are offering up suggestions about food, a list of constraints is displayed on the right. Once everyone has agreed on a restaurant, they can select that restaurant as their current restaurant (option on list of restaurants) and proceed to order.

  Image Added

  1. Now, everyone is looking at the same ordering page. They can clearly see who has chosen food and who hasn't on the right side of the screen. Each food item will have a “me too” button near it. In addition, on the right side of the screen will show a list of people willing to share items. For example, when Janet requests a half order of Duck Choo Chee, her request will show up on the right as “Janet is willing to share Duck Choo Chee with one other person.” Tim was slow in choosing his food, so his name remained highlighted in red for quite some time.
  2. Finally Katie gets to finish her order. She records a tip amount in hungr and everything is sent over to Foodler for finishing. She double checks everything and submits the order. She can also view an itemized list of what Janet, Tim, and Todd owe her. When food arrives, she can push the painfully large “food is here” button.

Image Added

  1. At this point, Janet, Tim, and Todd are redirected to a page showing how much they owe, what they ordered, and where and when the food will arrive.
  2. Lastly, an optional perk would be to show users past orders so that former organizers can keep track of who owes them money.
General Comments on Design 1:

Learnability: To start up an order, it is quite natural for people to search through list of Facebook friends, as everything is connected to Facebook nowadays. In addition, the general ordering interface will be very similar to that of Foodler (and can be used exactly as such at a base level). Our interface will simply provide simple add-ons that people can choose to use (“me too” “I want to share”). In addition, payment will be the same as usual for online food ordering.

Efficiency: Linking up to Facebook will allow suggested completions of names, as will providing a list of restaurants. This will help organizers suggest things quickly and easily. Selecting restaurants will be facilitate by filter options embedded in the menu (“want” “do not want”) next to restaurants and food types. In addition, allowing people to order simultaneously cuts down on menu reading time and allows for more instant feedback regarding choices.

Visibility: This interface prioritizes important things, including showing a list of people included in the order as well as constraints imposed upon restaurant selection. Showing the constraints allows the user to know whether or not a certain restaurant will be “allowed”. In addition, familiar “vote up/vote down” buttons will perform the obvious action of showing the other users a list of preferences in the right pane.

Errors: Users will have the option to delete items that they don't want from their order, as well as the option to back out entirely. Essentially, one can undo any action up until the time that the order is submitted. If this design goes without a chat box entirely, the users may run into a communication issue if the interface doesn't take into account every desired communication. For example, Janet could have ordered half the duck, but Tim could have clicked the “other half” button first, leaving Todd still wanting to share the duck. In this model, without the chat box, there would be no way for Todd to communicate to Tim that he specifically wanted to share the duck with Janet (ie optimizing food order could be tricky).

Design 2:

Image Added

  1. William wants to invite his friends into an order.  He logs in to the page through Facebook connect, and is brought to the create order page.  Here he is able to type in his friends' names (with suggestions provided by facebook), as well as the e-mail addresses or phone numbers of other people he wants to invite to the order.  Once he he has selected at least one friend, the arrow leading to the next box lights up.
  2. Here he is able to choose the restaurants he wants to seed the list with, and can search by name (with suggestions provided via foodler) and in addition filter these by category and price.  Adding one or more restaurants lights up the arrow for the next box.
  3. The Get Started box holds a large "Send!" button and a box to enter an optional message.
  4. Content in any of the boxes can be modified at any stage until the form is sent out.

Image Added

  1. Heather receives the e-mailed link from William, and deciding that she's up for Thai food, clicks it.  She is automatically identified by the unique url.
  2. She chooses which restaurants she wants to order from, and briefly thinks about suggesting somewhere else before deciding that Pepper Sky is good enough for now.
  3. William, when everyone has finished, clicks the selection button for the restaurant.  The arrow heading to the next box lights up, indicating it's time to order.
  4. Heather, seeing this, clicks the view menu button, which brings up a floating div containing the restaurant menu in a foodler-style format.  This menu allows her to view prices, select special options, and specify if she would want to split the meal or eat the whole thing.
  5. The menu dynamically updates to show the selections of the other users, and indicates the split/full status of each item.
  6. At any time, the user can remove an item they've selected.
  7. When Heather is done ordering (having decided to just save some of the rice for later), she clicks the done button at the bottom of the frame.
  8. After everyone has done so, William brings the Order to completion.

Image Added

  1. Once this is complete, Heather is brought to this screen, informing her how much she owes, and to whom.
  2. She will also receive an e-mail when the order arrives, reminding her of how much she owes.  The e-mail will use dynamically created images and HTML to show the status of their payment.
General Comments on Design 2:

Learnability: The process of adding friends is similar to that of adding friends to things on facebook, primarily because it is processed through a facebook interface.  The glowing arrows provide a guide as to what the process is, and how it should be followed.  A lot of the interface components are similar to those on other sites, e.g. the "doodle-like" restaurant selection frame, so should require little learning.

Efficiency: As with design 1, Facebook will suggest completions of names, and foodler will provide a list of restaurants. This will help organizers suggest things quickly and easily.  Filtering options will make this even faster.

Visibility: The process is well demarcated by the "glowing" arrows.  The internal information storage (such as selected users and restaurants) is visible at every step, and other users' interactions are also easily visible as the system progresses.

Errors: The system is divided into two primary steps, creating the order and placing the order.  In each of these steps the user is able to back up and reverse any of the choices they have made, but they can't usually jump between states.  This is alleviated by making the most important details (e.g. participants, restaurant selections) modifiable by all users in the second stage. For example, sharing the link to the page allows one user to add additional people to the order, even after the ordering has begun.  The second page only allows adding (and not removing), though, as it ensures that the involved parties will never lose track of what happened in the past and lead to their current state.

Design 3: Image Added

one.

Julian wants to make an order with his friends. he goes to the site and sees the three steps he needs to take to do so.

He picks his restaurant of choice from a drop down list

He searches for groups of friends and select them in groups

He decides that he only wants people to be contacted by email, so unchecks phone and IM.

Everything seems okay to him, so he clicks GO!

two.

Karen is invited to the group via email and clicks on the link she gets.

She is presented with a page with a menu on the left and looks through the choices, gets some rice...

Looks over to what other people are getting...lamb curry! She loves lamb curry, how cold she have forgotten to get that!

Karen adds lamb curry and sees that her total comes out to be $13.52. She clicks Done Ordering at the bottom of the page and waits.

three.

The order is in and Julian sees everyone who is in the order and what they individually need to pay. The others do neo see this.

When people approach him and ask him what they owe, he clicks on their face and tells them.

When they pay, he clicks the paid button unter the price.

four.

Karen gets an email teller to pay Julian 13.52.

She goes over to him, gives him the money, and he checks her off on the above page.

She returns to her computer and sees that she has been marked as paid!

General Comments on Design 2

First page visibility/efficiency questionable.