Simulation of McDonald's Self-Order Kiosk

January 13, 2017

Fun! Fun! Fun! This week's ELH Challenge was to design an interaction that simulates the checkout process at grocery or retail stores.


If it's your first time reading my blog, here's a quick tip about me: I love sharing and I love learning from other people. I enjoy being part of a community and it doesn't matter if it's virtual or in-person (even though I tend to prefer the "in-person" interactions). I am fascinated by creative minds and love to be surrounded by inspiring people.


Now with this introduction, might be easier to understand why I like the Articulate Community. I like participating in the community's e-learning challenges and you'll find my submissions everywhere on my website (see here and here for example).


Going back to this weeks challenge....



How I got the idea to create a demo of the self-order kiosk from McDonald's?

There is a McDonald's restaurant right next to my office. I go there once in a while when I am craving for french fries and burgers (bad habits!?) :). Ever since they installed the self-order kiosks I never order from the counter anymore. When this challenge came up, I wanted to try and reproduce the whole experience.




I couldn't remember exactly how the self-order kiosk looked like so I googled it and found a video  on Youtube. I then searched for images with the McDonald's products and edited them in PowerPoint (Ppt is my go to place when I need to make small edits to pictures or create basic graphics).


I've used a series of numeric variables to make the checkout process work. Here's an example:


I created a numeric variable called "TOTAL" and another numeric variable called "QUANTITY".


I wanted to give "customers" the option to adjust their order and any change in quantity will be reflected in the total price also. I set the following triggers:


Adjust variable TOTAL -> Subtract  value 5.99 (price of product) -> When user click Minus button -> On Condition "TOTAL ! = Not equal to 0.

Note: The condition plays an important role in this case; If you miss it, the price will be deducted with 5.99$ every time the user clicks "Minus" (imagine it could go as far as - 35,94$)


Adjust variable TOTAL -> Add value 5.99-> When user clicks Plus button. 

Note: No condition needed in this case


Same logic was applied for triggers related to variable QUANTITY:


Adjust variable QUANTITY -> Subtract value 1 -> When user clicks Minus button ->  On Condition QUANTITY != Not equal to 0.

Adjust variable QUANTITY -> Add value 1 -> User clicks Plus button


For the checkout process I've created a drag and drop interaction. I added a hotspot on top of the payment reader and set a trigger to jump to next slide when credit card is dropped on the hotspot.





Click here to see the published demo.


The food menu is pretty limited for the moment, you can just "order" a Big Mac Meal and a portion of fries. Promise to add more variety soon :)


Hope you enjoy it! Go to my CONTACT page if you'd like to connect with me directly.


Thank you,


Please reload


© Liliana Cotoara 2016

Instructional Designer in Vancouver