McInterface
User Interface Design & Development Project
SIMS 213, Spring 2001

: Linda Harjono, Saifon Obromsook, John Yiu Chi Wai

Summary Report | Assignments | Prototypes | Presentations | Team | Vocabulary | Workload Distribution

Scenarios, Competitive Analysis, and Preliminary Design

John's Design

My design consists of eight main pages:

Welcome Page - This is the first page user sees when he/she comes to the McInterface Machine.

Remaining Balance Page - This page shows the remaining balance in the McCard, and allows user to choose one of these options: Food Menu, My Favourites, Add Value, and Cancel.

Food Selection Page - This is the page user goes when he/she touches the Food Menu Button. It shows seven buttons for the seven categories of food sold in McDonald's. Touch one of these button and user will go to the page for the specific food category (here is one example when user touches the Super Value Meals Button).

Add Value Page - This is the page user will go when he/she touches the Add Value Button. It allows the user to add value to his/her McCard. User touches the OK Button after finish adding the value or touches the Cancel Button to quit the whole process.

My Favourites Page - This is the page which shows the different combinations of my favourite food. User can store at most three combinations of food and can choose one or two or all three of them during the food purchasing process.

Checkout Page - This is the page user will go after he/she has made his/her choices and touches the Checkout Button. It shows the amount due and allows the user to add more food, confirm his/her order, add value to his/her McCard, or cancel his/her order.

Thank You and Remaining Balance Page - This page is shown after the user touches the Confirm Order Button. It shows the remaining balance of the user's McCard.

Thank You Page - This page is shown everytime user touches the Cancel Button. The Welcome Page will automatically come up after this page is shown.
 

Here is the chart of interaction flow of my design. (A version of the chart for Visio 2000 is here.)

Let me uses task scenarios 3 and 4 to explain the flows of food purchasing processes.

In task scenario 3, Jeff first adds $10 value to his McCard. He looks at his My Favourites Page and thinks that he is bored with them.

Therefore Jeff orders the new Chicken Ranch sandwich package. He also orders a McParfait which he saved as MyFav#3 before.

Before he confirms his order, Jeff saves his whole order as MyFav#1.

Below are the steps Jeff performs in our McInterface system:

  1. Jeff inserts his McCard into the machine when he sees the Welcome Page. This brings him to the Remaining Balance Page.
  2. Jeff touches the Add Value Button to go to the Add Value Page.
  3. Jeff inserts money to add value to the McCard up to $10.
  4. Jeff touches the OK Button and goes back to the Remaining Balance Page.
  5. Jeff touches the Food Menu Button to go to the Food Selection Page.
  6. Jeff touches the New Products/Promotions Button in the Food Selection Page. This brings him to the New Products/Promotions Page.
  7. Jeff touches the button for the Chicken Ranch sandwich package. Then he touches the Checkout Button to go to the Checkout Page.
  8. In the Checkout Page, Jeff touches the MyCombo Button to go to the My Favourites Page.
  9. In My Favourites Page, Jeff touches the Combo3 (MyFav#3) Button. Then he touches the Checkout Button to go to the Checkout Page.
  10. In the Checkout Page, Jeff touches the Number 1 Button to save his choices as Combo1 (MyFav#1).
  11. Jeff touches the Confirm Order Button. Then the Thank You and Remaining Balance Page shows.
  12. The Welcome Page shows again.


In task scenario 4, Jeff orders Quarter Pounder combo which was saved by Jeff as MyFav#2 before. Also, he changes the drink from Coke to Root Beer.

When Jeff tries to order a McFlurry, he finds out that his McCard does not have enough value. So instead he orders Strawberry Milkshake. However, his McCard still does not have enough value. So Jeff decides to add value to his McCard.

When Jeff tries to add value to his McCard, he finds out that he forgets to bring his debit and credit cards. So Jeff decides to cancel the whole order and goes to the cashier to make the order instead.

Below are the steps Jeff performs in our McInterface system:

  1. Jeff inserts his McCard into the machine when he sees the Welcome Page. This brings him to the Remaining Balance Page.
  2. Jeff touches the MyCombo Button and goes to the My Favourites Page.
  3. Jeff touches the Combo2 (MyFav#2) Button in the My Favourites Page. Then he touches the Checkout Button to go to the Checkout Page.
  4. Jeff touches and holds the item Coke on the screen. A pop-up menu shows. Jeff chooses Other choices in the pop-up menu. Another pop-up menu comes up with different choices of soda. Jeff touches Root Beer.
  5. Jeff touches the Food Menu Button to go to the Food Selection Page.
  6. In the Food Selection Page, Jeff touches the Dessert Button and goes to the Dessert Page.
  7. Jeff touches the button for the McFlurry. Then he touches the Checkout Button to go to the Checkout Page.
  8. In the Checkout Page there is a blinking signal which tells Jeff his McCard does not have enough value to make the purchase.
  9. Jeff touches and holds the McFlurry on the screen. A pop-up menu shows. Jeff touches Cancel in the pop-up menu to cancel the McFlurry.
  10. Jeff touches the Food Menu Button and goes to the Food Selection Page.
  11. Jeff touches the Drinks Button in the Food Selection Page. This brings him to the Drinks Page.
  12. Jeff touches the button for the Strawberry Milkshake. Then he touches the Checkout Button to go to the Checkout Page.
  13. In the Checkout Page there is a blinking signal which tells Jeff his McCard does not have enough value to make the purchase.
  14. Jeff touches the Add Value Button to go to the Add Value Page.
  15. Jeff finds out that he forgets to bring his debit and credit cards. So he touches the Cancel Button.
  16. The Thank You Page and then the Welcome Page shows up
Linda's Design Saifon's Design