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.